JQuery之手风琴效果(part3)
2019-03-31 21:55
99 查看
今天来学手风琴。点击小图换为大图显示。运用了attr()方法
[code]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body, html, .wrapper ul { margin: 0; padding: 0; } .wrapper, .wrapper ul { width: 800px; height: 200px; overflow: hidden; } .wrapper ul li { list-style: none; height: 100%; float: left; width: 120px; position: relative; box-sizing: border-box; } .wrapper ul li.bigimg { width: 100%; height: 100%; } .wrapper ul li:first-child { background: url(img/timg.jpg) no-repeat; background-size: 320px 100%; } .wrapper ul li:nth-child(2) { background: url(img/timg1.jpg) no-repeat; background-size: 320px 100%; } .wrapper ul li:nth-child(3) { background: url(img/timg3.jpg) no-repeat; background-size: 320px 100%; } .wrapper ul li:nth-child(4) { background: url(img/timg4.jpg) no-repeat; background-size: 320px 100%; } .wrapper ul li:nth-child(5) { background: url(img/timg5.jpg) no-repeat; background-size: 320px 100%; } .wrapper ul li a { height: 100%; display: block; } .wrapper ul .bigimg a, .wrapper ul li a { width: 100%; } .bigimg { width: 39.72% !important } .bigimg .info { font-size: 20px; } .wrapper ul li.big a .mask { bottom: 0; left: 0; right: 0; z-index: 99; position: absolute; top: 0; display: block; background-color: rgba(0, 0, 0, .2); } .wrapper ul li.bigimg a .mask { background-color: transparent } .wrapper ul li.big a:hover .mask { opacity: 0; transition: all 0.5s } .info { position: absolute; bottom: 43px; left: -24px; transform: rotate(-90deg); } .info h3 { margin: 0; padding: 0; } li a img { position: absolute; right: 0; bottom: 0; height: 100%; width: 320px; display: block; } li.bigimg { z-index: 99; } </style> </head> <body> <div id="subject" class="wrapper"> <ul> <li class="big bigimg"> <a href="#link1"> <div class="info"> <h3 style="color:#f62368">石原里美</h3> </div> <i class="mask"></i> </a> </li> <li class="big"> <a href="#link1"> <div class="info"> <h3 style="color:#f62368">石原里美</h3> </div> <s class="line"></s> <i class="mask"></i> </a> </li> <li class="big"> <a href="#link1"> <div class="info"> <h3 style="color:#f62368">石原里美</h3> </div> <s class="line"></s> <i class="mask"></i> </a> </li> <li class="big"> <a href="#link1"> <div class="info"> <h3 style="color:#f62368">石原里美</h3> </div> <s class="line"></s> <i class="mask"></i> </a> </li> <li class="big"> <a href="#link1"> <div class="info"> <h3 style="color:#f62368">石原里美</h3> </div> <s class="line"></s> <i class="mask"></i> </a> </li> </ul> </div> <script src="js/jquery.min.js"></script> <script type="text/javascript"> $(function() { $(".big").mouseover(function() { $(".bigimg").attr("class", "big") $(this).attr('class', 'bigimg'); }) }) </script> </body> </html>
结果:
相关文章推荐
- 10个让人印象深刻的 jQuery 手风琴效果应用
- jquery 图片手风琴效果
- jQuery学习之手风琴效果
- jQuery插件的使用 --- 手风琴的效果
- jquery手风琴效果插件
- jQuery-手风琴伸缩效果
- jQuery实现手机竖直手风琴效果
- jquery,scss实现简单的手风琴效果
- jQuery制作效果超棒的手风琴折叠菜单
- jquery超简单实现手风琴效果的方法
- jQuery效果:简单的手风琴效果
- 超简单的 jquery 版 手风琴滑块效果
- bootstrap中jquery插件——collapse折叠效果-手风琴效果
- JQuery手风琴效果
- jQuery实现的手风琴侧边菜单效果
- jQuery-手风琴效果-2
- jQuery简单手风琴效果(Accordion)学习总结
- 带动画效果的jQuery手风琴
- jquery 手风琴切换效果
- Jquery 实现手风琴切换效果