这是一款使用jquery来模仿腾讯视频鼠标滑过图片滑动动画的特效。该特效使用jquery的animate动画函数来实现,可以在鼠标滑过指定的图片时,使对应的隐藏图片滑动展开,效果非常炫酷。
使用方法
在页面底部,<body>
标签结束之前,引入jquery文件。
<script src="path/to/js/jquery.min.js"></script>
HTML结构
该图片滑动动画特效的基本HTML结构如下:
<div class="wamp"> <div class="box_w"> <dl> <!--缩略图--> <dt><a><img src="img/1.jpg"/></a></dt> <!--隐藏的大图--> <dd><a><img src="img/6.jpg"/></a></dd> </dl> <dl> <dt><a><img src="img/2.jpg"/></a></dt> <dd><a><img src="img/7.jpg"/></a></dd> </dl> <dl> <dt><a><img src="img/3.jpg"/></a></dt> <dd><a><img src="img/9.jpg"/></a></dd> </dl> <dl> <dt><a><img src="img/4.jpg"/></a></dt> <dd><a><img src="img/8.jpg"/></a></dd> </dl> </div> </div>
CSS样式
为该特效添加下面的CSS样式:
*{ margin:0px; padding:0px;} .wamp{ width:1000px; margin:50px auto; display:block; background:#fff; height:600px; position:relative; overflow:hidden;} .box_w{ width:1000px;white-space:nowrap; font-size:0px; position:absolute; left:0px; top:0px;} .box_w dl{ width:250px;white-space:nowrap;font-size:0px; overflow:hidden; display:inline-block; cursor:pointer;} .box_w dt{ width:250px; height:105px;display:inline-block; } .box_w dd{ width:744px; height:95px;display:inline-block; margin-top:10px;} .box_w dd img{ width:100%; height:95px; display:inline-block;} .box_w a{ display:inline-block;}
JavaScript
在页面DOM元素加载完毕之后,使用下面的方法来为容器绑定鼠标进入和离开事件,使鼠标进入时相应图片可以展开,离开时又收缩回去。
$(function(){ $('.box_w dl').mouseover(function(){ var aa=$(this).index(); var aac=-aa*250 $(this).parent('.box_w').stop().animate({left:aac},600) $(this).stop().animate({width:"1000px"},600).siblings('dl').stop().animate({width:"250px"},600); }) $('.box_w dl').mouseout(function(){ $(this).parent('.box_w').stop().animate({left:"0px"},600) $(this).stop().animate({width:"250px"},600) }) })
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!