jQuery实现推拉门效果
更新时间:2020年10月19日 11:41:25 作者:willard_cui
这篇文章主要为大家详细介绍了jQuery实现推拉门效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jQuery实现推拉门效果的具体代码,供大家参考,具体内容如下
方法:anemate(), stop(), siblings()
动画效果:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>推拉门</title> <script src="../jquery.min.js"></script> <style> *{ margin: 0; padding: 0; list-style: none; } .container{ margin: 50px auto; width: 988px; height: 405px; overflow: hidden; } img{ width: 538px; height: 405px; } .container ul li{ float: left; width: 75px; height: 405px; } .container ul li.active{ width: 538px; } </style> </head> <body> <div class="container"> <ul> <li class="active"><img src="images/1.jpg" alt="图片1"></li> <li><img src="images/2.jpg" alt="图片1"></li> <li><img src="images/3.jpg" alt="图片1"></li> <li><img src="images/4.jpg" alt="图片1"></li> <li><img src="images/5.jpg" alt="图片1"></li> <li><img src="images/6.jpg" alt="图片1"></li> <li><img src="images/7.jpg" alt="图片1"></li> </ul> </div> <script type="text/javascript"> $(document).ready(function () { $(".container ul li").mouseover(function () { // $(this).addClass("active"); // $(this).siblings().removeClass("active"); $(this).stop(true,false ).animate({width:538},500); $(this).siblings().stop(true,false).animate({width:75},500); }); }); </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
想要利用ExtJS的库函数对DOM进行各类操作,就要得到Element类型的对象,但是Ext.get()取到的虽然是Element,但是参数只能是id,如果大家对jQuery的selector方式很喜欢和崇拜,那么就一定要学习Ext.get()和Ext.query()的组合方式。2011-09-09jquery中的mouseleave和mouseout的区别 模仿下拉框效果
不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件2012-02-02jquery操作checkbox的常用方法总结【附测试源码下载】
这篇文章主要介绍了jquery操作checkbox的常用方法,结合完整实例形式总结分析了jQuery使用checkbox全选、取消、反选等常见操作技巧,并附带测试源码供读者下载参考,需要的朋友可以参考下2019-06-06浅谈jQuery animate easing的具体使用方法(推荐)
下面小编就为大家带来一篇浅谈jQuery animate easing的具体使用方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-06-06
最新评论