首页 > 特效插件 > 图像特效 >  鼠标移上去会不停上下抖动的图片特效正文

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

特效介绍
jQuery抖动图片特效

    鼠标移动到图片上,图片会上下来回摆动,摆动服务会越来越小,直到停止的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>