jquery实现手风琴案例

时间：2021-05-26

手风琴案例练习，供大家参考，具体内容如下

显示效果

重点：

1.鼠标进入事件mouseenter 鼠标离开事件mouseleave
2. 再执行下一次操作前都要先通过.stop() 停止动画
3.sublings()选择当前事件外的兄弟事件

完整代码

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding:0; } img{ width: 500px; height:250px; } .box{ width: 900px; height: 300px; margin: 20px auto; border: 1px solid #808080; } .box ul li{ float: left; list-style: none; overflow: hidden; height: 300px; width: 100px; position: relative; } .text{ background-color:lightsteelblue; opacity: 0.7; text-align: center; height: 50px; width: 100%; line-height: 50px; position: absolute; color: black; bottom: 50px; } .link{ background-color:whitesmoke; font-size: 15px; text-indent: 20px; height:50px ; line-height: 50px; } a{ text-decoration: none; } p{ float: left; } span{ margin: auto 20px; } </style> </head> <body> <div class="box"> <ul> //每一个li为一个手风琴页面的显示内容 <li class="show" style="width: 500px;"> <div class="img"> <img class="show" src="img/images/p0.jpg" > </div> <div class="text"> 东大门 </div> <div class="link"> <a href=""> <p>科技</p> <p> <span>科技故事</span> <span>科技故事</span> <span>科技故事</span> </p> </a> </div> </li> <li > <div class="img"> <img src="img/images/p1.jpg" > </div> <div class="text"> 雷阳广场 </div> <div class="link"> <a href=""> <p>科技</p> <p> <span>科技故事</span> <span>科技故事</span> <span>科技故事</span> </p> </a> </div> </li> <li > <div class="img"> <img src="img/images/p3.jpg" > </div> <div class="text"> 校园石碑 </div> <div class="link"> <a href=""> <p>东大门</p> <p> <span>科技故事</span> <span>科技故事</span> <span>科技故事</span> </p> </a> </div> </li> <li > <div class="img"> <img src="img/images/p4.jpg" > </div> <div class="text"> 钟楼 </div> <div class="link"> <a href=""> <p>科技</p> <p> <span>科技故事</span> <span>科技故事</span> <span>科技故事</span> </p> </a> </div> </li> <li > <div class="img"> <img src="img/images/p5.jpg" > </div> <div class="text"> 椰林 </div> <div class="link"> <a href=""> <p>科技</p> <p> <span>科技故事</span> <span>科技故事</span> <span>科技故事</span> </p> </a> </div> </li> </ul> </div> </body> <script src="./js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ var $li=$("ul>li") $li.mouseenter(function () { //鼠标移入图片宽度变为500，siblings（）把其他兄弟的宽度恢复默认宽度。 //stop():在执行每次的事件前都必须停止上次的执行的事件,否则会出现最后一次鼠标事件移出后，图片显示空白 $(this).stop().animate({width:500}).siblings().stop().animate({width:100}); }); $li.mouseleave(function () { //鼠标移出事件 $(this).stop().animate({width:500}); }); }); </script></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章