javascript图片震动效果jQuery插件
javascript实现图片抖动，使用jquery实现。
插件配置说明
during：图片抖动间隔计时器时间，越小抖动越快，默认100ms
range：抖动频率，越大抖动的记录越大，默认10px
start：抖动开始前执行的回调，默认空函数体function(){}
end：抖动结束后执行的回调，默认空函数体function(){}
dir：方向，left(左右抖动)/top(上下抖动)，默认左右
测试源代码如下
<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>javascript图片抖动效果jQuery插件</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">window.onload=function(){
(function ($) {
$.fn.imgShake=function(o){
o=$.extend({during:100,range:10, start:function(){}, end:function(){},dir:'left'},o);
return this.each(function(){
var drct = 0,step = 1,elem=$(this),range=o.range;
elem.css('position','relative');
active()
function active(){elem.mouseover(function(e) {if(!drct)jump()})}
function deactive(){elem.unbind('mouseover')}
function jump() { var t = parseInt(elem.css(o.dir)); if (!drct) motionStart(); else { var next = t - step * drct; if (next >= -range && next <= 0) elem.css(o.dir, next + 'px'); else if (next < -range) drct = -1; else { var nextMax = range / 2; if (nextMax < 1) { motionOver(); return; } range = nextMax; drct = 1; } } setTimeout(function () { jump() }, o.during / (range + 3) + drct * 3); }
function motionStart() { o.start.apply(this); elem.css(o.dir, 0); drct = 1; }
function motionOver() { o.end.apply(this); range = o.range; drct = 0; elem.css(o.dir, 0); }
this.jump = jump;
this.active = active;
this.deactive = deactive;
});
}
})(jQuery);
$('#dvList li').imgShake();
};
</script>
<style type="text/css">
ul.list{width:980px;padding:0px;margin:0px;list-style:none;zoom:1;overflow:hidden}
ul.list li{float:left;margin-bottom: 27px;margin-right: 23px;width:300px;height:170px;}
ul.list li img{width:100%;height:100%;border:solid 1px #666}
</style>
</head>
<body>
<ul id="dvList" class="list">
<li><a href="/design/20120928/jiqiangkangfanhuangnizifen.aspx"><img src="/imgdesign/20120928/20120928164213345_s.jpg" alt="旧墙抗泛黄腻子粉"/></a></li>
<li><a href="/design/20120928/muzhibanzhuanyongnizifen.aspx"><img src="/imgdesign/20120928/20120928165002190_s.jpg" alt="木质板专用腻子粉"/></a></li>
<li><a href="/design/20120928/tejishigaozhanfen.aspx"><img src="/imgdesign/20120928/20120928165556713_s.jpg" alt="特级石膏粘粉"/></a></li>
<li><a href="/design/20120928/xiubushajiangbaozhuangsheji.aspx"><img src="/imgdesign/20120928/20120928170450739_s.jpg" alt="修补砂浆包装设计"/></a></li></ul>
</body></html>
jquery框架下载：jquery-1.4.2.min.js下载
加支付宝好友偷能量挖...
原创文章，转载请注明出处：javascript图片震动效果jQuery插件