self.qq

抖动效果—创意版

闲得无聊，弄了个抖动效果，大家看看有没有值得学习地方
 
 
 
 
 

 

<html><head><title>鼠标移至图片后抖动的JS代码 </title></head><BODY>
<style>.shakeimage{position:relative; left:100px; top:100px;}</style>


<img src=http://img.baidu.com/hi/logo/logo_93_30.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>

 

创意之处：

  1. 调用简单：事件="shake(this,'onmouseout')";
  2. 代码简短：函数主体程序仅仅5行代码
  3. 性能高
  4. 逻辑清晰，便于二次开发
posted @ 2012-01-11 11:17  王那个锋啊  阅读(2132)  评论(5)    收藏  举报
self.qq