仿京东特价产品图片位移和高光显示jQuery代码
- 作者:网页模板
- 大小:0.118MB
- 点击次数:
- 发布时间:2014-04-03 12:19
特效介绍
仿京东特价产品图片位移和高光显示jQuery代码,鼠标移动到图片上,图片会向左位移20px,同时会变得更亮,突出显示这张图片。兼容IE6
使用方法
1、在head区引入下面的代码<style> ul#imglist,#imglist li{list-style-type:none; margin:0; padding:0; background:#000;} ul#imglist{height:361px; overflow:hidden; width:750px;} #imglist li{float:left; display:inline; width:150px; overflow:hidden;} #imglist img{opacity:0.618; position:relative;} </style> <script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> <script> $(function(){ $("#imglist img").mouseover(function(){ $(this).css({"opacity":"1"}).animate({"right":"20px"},200); }) $("#imglist img").mouseout(function(){ $(this).css({"opacity":"0.618"}).animate({"right":"0px"},200); }) }) </script>2、在body区域引入下面的代码:
<ul id="imglist"> <li><img src="images/1.jpg" /><br /><img src="images/2.jpg" /></li> <li><img src="images/3.jpg" /></li> <li><img src="images/4.jpg" /><br /><img src="images/5.jpg" /></li> <li><img src="images/6.jpg" /></li> <li><img src="images/7.jpg" /><br /><img src="images/8.png" /></li> </ul>
- 本文标签:
- jquery图片位移,jquery animate动画