You are here
JS打造抖动的按钮特效(鼠标放上去开始抖动)
<HTML><HEAD>
<TITLE>JS打造抖动的按钮特效(鼠标放上去开始抖动)_网页代码站(www.webdm.cn)</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY bgColor=#fef4d9><BR><BR>
<CENTER>鼠标抖动的按钮</span>
</CENTER><BR>
<CENTER>
<TABLE borderColor=#FFCC00 border=5 borderlight="green">
<TBODY>
<TR>
<TD align=left>
<SCRIPT language=JavaScript>
<!-- Begin
pos = 15;
TO = null;
function shake_funct2(object,speed)
{
obj = eval(object)
txt = clear_space(obj.value);
if (pos == 15)
{
txt = txt + " ";
pos = -15;
}
else
{
txt = " " + txt;
pos = 15;
}
obj.value = txt;
obj.style.width = parseInt(obj.style.width) + pos;
obj = object
sp = speed
TO = setTimeout("shake_funct2(obj,sp)",speed);
}
function clear_space(text)
{
while (text.substring(0,1) == " ")
{
text = text.substring(1,text.length);
}
while(text.substring(text.length-1,text.length) == " ")
{
text = text.substring(0,text.length-1);
}
return text;
}
function end_shake_funct2(object)
{
clearTimeout(TO);
obj = eval(object);
txt = clear_space(obj.value);
obj.value = txt;
//alert(pos);
if (pos == -15)
{
obj.style.width = parseInt(obj.style.width) +15;
}
pos = 15
}
// End -->
</SCRIPT>
<FORM name=myform2>
<TABLE border=0>
<TBODY>
<TR>
<TD>一般抖动的按钮</TD>
<TD align=middle width=160><INPUT onmouseover=shake_funct2(this,100) style="FONT-SIZE: 12px; WIDTH: 150px" onmouseout=end_shake_funct2(this) type=button value="一般速度">
</TD></TR>
<TR>
<TD>快速抖动的按钮</TD>
<TD align=middle width=160><INPUT onmouseover=shake_funct2(this,50) style="FONT-SIZE: 12px; WIDTH: 150px" onmouseout=end_shake_funct2(this) type=button value="更快速度">
</TD></TR></TBODY></TABLE></FORM></TD></TR></TBODY></TABLE></CENTER>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
</BODY>
</HTML>
JavaScript实现网页上的抖动按钮特效，鼠标移上去开始抖动，松开鼠标则停止抖动。其实网页上很少见到此种效果，一般用在需要提醒人注意的地方，比如报警页、错误提示页等。本效果中的抖动速度分为两种：一般抖动和快速抖动。代码发上来主要是为了学习一下吧。
来自 http://www.webdm.cn/webcode/ad07cb79-a779-43b3-b40b-0f4cea204c40.html
js 鼠标放图片上抖动效果
<html><head><title>鼠标移至图片后抖动的JS代码 </title></head><BODY>
<style>.shakeimage{position:relative; left:100px; top:100px;}</style>
<img src="//www.jb51.net/images/logo.gif" class="shakeimage" onMouseover="shake(this,'onmouseout')" >
<script language="JavaScript1.2">
var typ=["marginTop","marginLeft"],rangeN=10,timeout=20;
function shake(o,end){
var range=Math.floor(Math.random()*rangeN);
var typN=Math.floor(Math.random()*typ.length);
o["style"][typ[typN]]=""+range+"px";
var shakeTimer=setTimeout(function(){shake(o,end)},timeout);
o[end]=function(){clearTimeout(shakeTimer)};
}
</script>
</body></html>
创意之处：
调用简单：事件="shake(this,'onmouseout')";
代码简短：函数主体程序仅仅5行代码
性能高
逻辑清晰，便于二次开发