jquery实现手风琴案例
2020-05-05 07:06
1471 查看
手风琴案例练习,供大家参考,具体内容如下
显示效果
重点:
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>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- 基于jquery的手风琴图片展示效果实现方法
- jquery实现复选框案例
- 基于Jquery代码实现手风琴菜单
- 用jquery插件实现手风琴效果
- JQuery的Ajax请求实现局部刷新 小案例
- js,jquery——实现精美的下拉菜单 & 手风琴菜单(二级、三级)
- 参考课堂案例jquery图片滚动效果实现微博首页内容滚动效
- jQuery实现简单购物车案例
- Jquery 实现手风琴切换效果
- jQuery实现ajax的嵌套请求案例分析
- JQuery实现 点击单元格定位功能案例
- jquery实现返回基部案例效果
- 基于jQuery实现Accordion手风琴自定义插件
- jquery实现图片的放大案例
- jquery插件实现手风琴效果!
- jquery实现下拉菜单的手风琴效果
- jquery实现手风琴效果
- jquery实现手风琴效果
- 【html5】css3过渡实现手风琴案例
- jQuery 获取屏幕高度、宽度的简单实现案例