最近都没有更,就来几个效果充实一下。都没有进行美化这步。手风琴:纯css:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g ...
最近都没有更,就来几个效果充实一下。
都没有进行美化这步。
手风琴:
纯css:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>手风琴css</title> <style> .showBox{ width: 660px; overflow: hidden; } ul{ list-style: none; margin: 0; padding: 0; width: 30000px; } ul li{ float: left; position: relative; height: 254px; width: 110px; overflow: hidden; transition: all 0.3s; } /* 这是css手风琴的核心,就是hover的使用 **首先是ul:hover li这个触发了经过ul但没有经过li的变化 **然后是ul li:hover这里是被经过li的变化,匹配css3动画效果, 和css3的一些对页面美化的效果,就可以做出一个很好看的手风琴, 如果使用纯js实现可能很麻烦。 */ ul:hover li{ width:22px; } ul li:hover{ width: 460px; } ul li img{ width: 550px; height: 254px; } ul li span{ width: 22px; position: absolute; top: 0; right: 0; height: 204px; padding-top: 50px; color: #fff; } ul li span.bg1{ background: #333; } ul li span.bg2{ background: #0f0; } ul li span.bg3{ background: #ff7500; } ul li span.bg4{ background: #0ff; } ul li span.bg5{ background: #00f; } </style> <script type="text/javascript"> </script></head><body> <div class="showBox"> <ul> <li><span class="bg1">这是第一个</span><img src='/images/loading.gif' data-original="1.jpg" ></li> <li><span class="bg2">这是第二个</span><img src='/images/loading.gif' data-original="2.jpeg" ></li> <li><span class="bg3">这是第三个</span><img src='/images/loading.gif' data-original="3.jpg" ></li> <li><span class="bg4">这是第四个</span><img src='/images/loading.gif' data-original="4.jpg" ></li> <li><span class="bg5">这是第五个</span><img src='/images/loading.gif' data-original="5.jpg" ></li> </ul> </div></body></html>
原标题:javascript效果:手风琴、轮播图、图片滑动
关键词:JavaScript
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。