本章节分享一段代码实例,它实现了手风琴式图片展示效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style> body { background: #f9f9f9; margin: 0; padding: 0; width: 100%; height: 100%; } .wrap { width: 800px; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); } .item, .item-end { float: left; margin: 0 2px; width: 50px; height: 500px; cursor: pointer; background: #6c62d1; font-size: 24px; color: #FFF; border-radius: 10px; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } .item:hover, .item-end:hover { background: #2932e1; } .select { background: #2932e1; } .item p, .item-end p { margin: 220px auto; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .slide { float: left; display: none; margin: 0 4px; } .slide img { width: 360px; height: 480px; margin-top: 10px; border-radius: 10px; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $(".item").click(function () { var thisobj = $(this) if (!thisobj.next().is(":visible")) { if ($(".select").length > 0) { if ($(".select").next().length > 0) { $(".select").next().animate({ width: "hide" }, 180, function () { $(".select").removeClass("select"); thisobj.addClass("select"); thisobj.next().animate({ width: "show" }, 180); }); } else { $(".select").prev().animate({ width: "hide" }, 180, function () { $(".select").removeClass("select"); thisobj.addClass("select"); thisobj.next().animate({ width: "show" }, 180); }); } } else { thisobj.addClass("select"); thisobj.next().animate({ width: "show" }, 180); } } else { thisobj.removeClass("select"); thisobj.next().animate({ width: "hide" }, 180); } }) $(".item-end").click(function () { var obj = $(this).prev(); if (!obj.is(":visible")) { if ($(".select").length > 0) { $(".select").next().animate({ width: "hide" }, 180, function () { $(".select").removeClass("select"); $(".item-end").addClass("select"); obj.animate({ width: "show" }, 180); }); } else { $(".select").removeClass("select"); $(".item-end").addClass("select"); obj.animate({ width: "show" }, 180); } } else { $(".select").removeClass("select"); obj.animate({ width: "hide" }, 180); } }) }) </script> </head> <body> <div class="wrap"> <div class="item"><p>;P1</p></div> <div class="slide"><img src="demo/jQuery/img/p1.jpg" /></div> <div class="item"><p>;P2</p></div> <div class="slide"><img src="demo/jQuery/img/p2.jpg" /></div> <div class="item"><p>;P3</p></div> <div class="slide"><img src="demo/jQuery/img/p3.jpg" /></div> <div class="item"><p>;P4</p></div> <div class="slide"><img src="demo/jQuery/img/p4.jpg" /></div> <div class="item"><p>;P5</p></div> <div class="slide"><img src="demo/jQuery/img/p5.jpg" /></div> <div class="item"><p>;P6</p></div> <div class="slide"><img src="demo/jQuery/img/p6.jpg" /></div> <div class="item"><p>;P7</p></div> <div class="slide"><img src="demo/jQuery/img/p7.jpg" /></div> <div class="item-end"><p>;P7</p></div> </div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
body { background: #f9f9f9; margin: 0; padding: 0; width: 100%; height: 100%; }
上面的代码设置bod的背景颜色
并且删除body默认的外边距和内边距以及尺寸。
.wrap { width: 800px; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); }
手风琴效果的容器,设置它为居中效果。
.item, .item-end { float: left; margin: 0 2px; width: 50px; height: 500px; cursor: pointer; background: #6c62d1; font-size: 24px; color: #FFF; border-radius: 10px; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; }
设置可以点击的竖条的样式。比如设置两端圆角,并且使用transition设置元素属性以动画方式过渡。
.item:hover, .item-end:hover { background: #2932e1; }
设置可以点击竖条鼠标悬浮时候的样式,以动画方式进行。
.select { background: #2932e1; }
设置点击展开图片后对应的可点击竖条的背景颜色。
.item p, .item-end p { margin: 220px auto; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
设置可点击竖条中p元素的样式,可以将其旋转,也就出现了文字倾斜的效果。
.slide { float: left; display: none; margin: 0 4px; } .slide img { width: 360px; height: 480px; margin-top: 10px; border-radius: 10px; }
设置图片容器和图片的相关样式属性。
$(document).ready(function () {})
当文档结构完全加载完毕再去执行函数中的代码。
$(".item").click(function () {})
为可点击竖条注册click事件处理函数。
var thisobj = $(this)
当前点击元素转换为jQuery对象。
if (!thisobj.next().is(":visible")) {}
判断当前点击的竖条后面的元素是否是显示,也就是说后面的图片有没有展开。
if ($(".select").length > 0) {}
判断当前是否有展开的图片。点击一个竖条展开一个图片,那么对应的竖条就会被添加上一个select样式类,如果隐藏图片,那么对应的竖条的select样式类也会被删除,所以如果length大于0,那么也就是说有展开的图片。
if ($(".select").next().length > 0) { $(".select").next().animate({ width: "hide" }, 180, function () { $(".select").removeClass("select"); thisobj.addClass("select"); thisobj.next().animate({ width: "show" }, 180); }); }
如果具有竖条后面的元素大于0,也就是说不是最后一个竖条。
那么就将竖条后面的元素以动画方式隐藏。
然后将竖条的select样式类删除,并且给当前点击的竖条添加select样式雷。
最后展开当前点击竖条后面的元素。
else { $(".select").prev().animate({ width: "hide" }, 180, function () { $(".select").removeClass("select"); thisobj.addClass("select"); thisobj.next().animate({ width: "show" }, 180); }); }
如果是最后一个竖条,那么就将它前面展开的图片隐藏。
然后删除此竖条上面的select样式。
再给当前点击竖条添加select样式,并以动画方式显示后面的图片。
else { thisobj.addClass("select"); thisobj.next().animate({ width: "show" }, 180); }
如果当前没有展开的图片。
那么就为当前点击竖条添加select样式类。
并展开它下一个紧邻的图片。
else { thisobj.removeClass("select"); thisobj.next().animate({ width: "hide" }, 180); }
如果当前点击的竖条后面紧邻的图片是展开的,由于点击最后一个竖条导致倒数第二个图片是展开的。
那么就删除当前竖条select样式类。
并且隐藏它后面展开的图片。
特别说明:后面的代码都是一样的道理,不多介绍。
二.相关阅读:
(1).next()可以参阅jQuery next()一章节。
(2).is()可以参阅jQuery is()一章节。
(3).animate()可以参阅jQuery animate()一章节。
(4).removeClass()可以参阅jQuery removeClass()一章节。
jQuery手风琴效果代码实例,这样的场景在实际项目中还是用的比较多的,关于jQuery手风琴效果代码实例就介绍到这了。
jQuery手风琴效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。
本文地址: http://www.zzsi.net/code/web/98667.html
本站部分资源来源与网络,仅供学习参考使用,请勿商用,如侵犯了您的权益,请联系我们删除。