你的位置:首页 > 软件开发 > Java > javascript效果:手风琴、轮播图、图片滑动

javascript效果:手风琴、轮播图、图片滑动

发布时间:2016-09-14 01:00:14
最近都没有更,就来几个效果充实一下。都没有进行美化这步。手风琴:纯css:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g ...

javascript效果:手风琴、轮播图、图片滑动

最近都没有更,就来几个效果充实一下。

都没有进行美化这步。

手风琴:

纯css:

javascript效果:手风琴、轮播图、图片滑动

<!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 (#换成@)。