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