鼠标移上去会不停上下抖动的图片特效

    鼠标移动到图片上，图片会上下来回摆动，摆动服务会越来越小，直到停止的jQuery特效。 1、在head区域引入下面的css文件和js文件：

<style type="text/css">
ul{list-style:none;margin:0;padding:0;}
ul li{vertical-align:bottom;}
.img_box { width:900px; height:150px; margin:0px auto;}
.img_box li{ width:200px; float:left; height:135px; border:1px solid #eee; padding:3px; margin-left:8px;}
</style>
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jump.js"></script>
<script type="text/javascript">
$(function(){
     $("#ul img").each(function(k,img){
        new JumpObj(img,10);   //参数：第一个img表示抖动的元素，可以使img，也可以是div等；第二个代表上下摆动的幅度。
    });
});
</script>

2、在body区域引入下面的html代码：

<div class="img_box">
    <ul id="ul">
        <li><a href="#"><img src="images/01.jpg"/></a></li>
        <li><a href="#"><img src="images/02.jpg"/></a></li>
        <li><a href="#"><img src="images/03.jpg"/></a></li>
        <li><a href="#"><img src="images/04.jpg"/></a></li>
    </ul>
</div>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！