前言：
当前姐妹们对“jquery实现浮动窗口”可能比较关心，大家都需要分析一些“jquery实现浮动窗口”的相关知识。那么小编同时在网络上收集了一些有关“jquery实现浮动窗口””的相关文章，希望我们能喜欢，咱们一起来了解一下吧！知识点：css浮动定位，css3 nth-child()选择器，jQuery animate()动画函数，jQuery stop()函数
效果图：
手风琴效果动画
代码：
html代码：
<div class="img_show"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
css代码
/* init */*{ margin:0; padding:0;}ul{ list-style-type: none;}/* show */div.img_show{ width:1000px; height:300px;}div.img_show ul li{ width:100px; height:300px; background-repeat: no-repeat; background-size:100% 100%; float:left;}div.img_show ul li:nth-child(1){ background-image: url(../img/1.jpg);}div.img_show ul li:nth-child(2){ background-image: url(../img/2.jpg);}div.img_show ul li:nth-child(3){ background-image: url(../img/3.jpg);}div.img_show ul li:nth-child(4){ background-image: url(../img/4.jpg);}div.img_show ul li:nth-child(5){ background-image: url(../img/5.jpg); width:400px;}javascript代码
$(function(){ $('div.img_show ul li').mouseover(function(){ $(this).stop(true).animate({ width:'400px' },2000).siblings().stop(true) .animate({ width:'100px' },2000) })})声明：图片资源均来自互联网，如有侵权，请联系作者删除
转载说明：转载时，请注明出处，谢谢
jQuery库下载地址：
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #jquery实现浮动窗口
