Главная » Ява скрипты » Пульсирующая кнопка со сменой цвета
00:30
Code
<html>
<head>
<TITLE>Кнопка пульсирует со сменой цвета</TITLE>
<!--
This file retrieved from the JS-Examples archives
http://www.js-x.com
1000s of free ready to use scripts, tutorials, forums.
Author: MEOS - http://myezofficesolutions.com
-->
<!--
This code based on a script from the MEOS web site.
http://www.myezofficesolutions.com/Scripters/Scripters
Changes by JS-X.com:
Code altered to not have nested delayed events, be DOM compatible
To have Style Class changes
-->
<style>
.c0{background-color:#FF8;color:#000;}
.c1{background-color:#008;color:#FFF;}
</style>
<script>
var min_width = 70; // Min Width of button
var max_width = 140; // Max Width of button
var cur_width = 70; // Starting Width of button
var cur_grow = true; // Current Direction
var cur_speed = 40; // Speed to grow at lower number to increase speed
var grow_by = 2;
function pulseit()
{
var _obj=document.getElementById("pulse_button");
var _class="c0";
if (cur_width < min_width)
cur_grow = true;
if (cur_width > max_width)
cur_grow = false;
if (cur_grow)
{
cur_width-=-grow_by;
}
else
{
_class="c1";
cur_width-=grow_by;
}
_obj.style.width = cur_width;
_obj.className = _class;
}
function init2()
{
setInterval("pulseit()",cur_speed);
}
window.onload=init2;
</script>
</head>
<body onload="init2();">
Cool pulsating button to get thier attention.<BR>
<form>
<INPUT type="button" value="My Button" id="pulse_button">
</form>
<BR><center><a href='http://www.js-x.com'>JS-X.com</a></center>
</body>
</html>
