鼠标移上去会不停上下抖动的图片特效
- 作者：网页模板
- 大小：0.091MB
- 点击次数：
- 发布时间：2014-06-20 09:55
特效介绍
鼠标移动到图片上，图片会上下来回摆动，摆动服务会越来越小，直到停止的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>
- 本文标签：
- jQuery图片特效
