时间:2021-05-18
本文实例为大家分享了jQuery实现手风琴效果的具体代码,供大家参考,具体内容如下
js代码:
<script type="text/javascript" src="jquery-3.0.0.js"></script><script type="text/javascript"> $(function() { //获取所有li遍历 $(".li_list").each(function() { //当鼠标进去当前li $(this).mouseenter(function() { //设置当前元素宽度 $(this).stop() .animate({ "width": "600px" }, 500, "linear"); //设置同胞元素宽度 .siblings().stop() .animate({ "width": "100px" }, 500, "linear"); }); }); }); </script>css代码:
.li_list { width: 100px; height: 300px; list-style: none; float: left; overflow: hidden; } .li_list img { width: 100%; height: 100%; } .divbg { width: 600px; height: 300px; background: rgba(230, 0, 0, 0.5); text-align: center; line-height: 300px; float: left; } .divbg span { display: block; width: 100px; height: 300px; float: left; } .div1 { width: 500px; height: 300px; float: left; } .mo{ width: 600px; }html代码:
<ul class="ul_list"> <li class="li_list"> <div class="divbg"> <span>萌宠</span> <div class="div1"> <img src="img/0.jpg" /> </div> </div> </li> <li class="li_list"> <div class="divbg"> <span>萌宠</span> <div class="div1"> <img src="img/1.jpg" /> </div> </div> </li> <li class="li_list"> <div class="divbg"> <span>萌宠</span> <div class="div1"> <img src="img/2.jpg" /> </div> </div> </li> <li class="li_list mo"> <div class="divbg"> <span>萌宠</span> <div class="div1"> <img src="img/3.jpg" /> </div> </div> </li> </ul>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
复制代码代码如下://jquery实现手风琴效果手风琴$(function(){$("#accordion").accordion({header:"h3",e
前端简洁实用的jQuery手风琴插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库简洁实用的jQuery手风琴插件AjQuer
本文实例为大家分享了jquery实现垂直手风琴菜单的具体代码,供大家参考,具体内容如下1、HTML部分垂直手风琴菜单AccountBasicPictureGoP
本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下一、纯css+html的手风琴效果这种用css写的手风琴比较
手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验。本文借助jQuery插