JS之手风琴效果

最新推荐文章于 2025-06-23 16:14:56 发布

转载最新推荐文章于 2025-06-23 16:14:56 发布 · 96 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/youbiao/p/7222584.html

本文通过一个具体的案例，展示了如何使用HTML和CSS实现一个包含多种布局和交互效果的页面，包括响应式设计、过渡动画及鼠标悬停效果。

  1 <!doctype html>
  2 <html>
  3 <head>
  4     <style type="text/css">
  5         body,ul,li,p {margin: 0;padding: 0}
  6         ul,ol {list-style: none;}
  7         .mydiv{height:128px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border:1px solid #d3d3d3;border-color:rgba(0,0,0,.12);overflow:hidden;width:938px;margin-top:12px;background:#fff}
  8         .mydiv ul{width:1000px}
  9         .mydiv li{width:156px;height:128px;float:left;overflow:hidden;-webkit-transition:all .1s linear;-moz-transition:all .1s linear;-o-transition:all .1s linear;-ms-transition:all .1s linear;transition:all .1s linear}
 10         .mydiv li *{-webkit-transition:all .1s linear;-moz-transition:all .1s linear;-o-transition:all .1s linear;-ms-transition:all .1s linear;transition:all .1s linear}
 11         .mydiv li a{width:156px;height:128px;display:block;position:relative;cursor:pointer;text-decoration:none;overflow:hidden}
 12         .mydiv li a:hover{position:absolute}
 13         .mydiv li a:hover .mask{-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;-webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;-o-transition:opacity .2s ease-in;-ms-transition:opacity .2s ease-in;transition:opacity .2s ease-in}
 14         .mydiv li img{height:72px;width:117px;position:absolute;bottom:0;right:-13px}
 15         .mydiv li .line{height:128px;width:0;font-size:0;border-right:1px dashed #cacaca;position:absolute;right:0;top:4px}
 16         .mydiv li .info{position:absolute;top:0;left:0;width:136px;padding:4px 10px}
 17         .mydiv li .info h3{font-size:14px;font-weight:700}
 18         .mydiv li .info p{color:#868686;font-size:12px;overflow:hidden;width:136px;height:22px;line-height:22px}
 19         .mydiv li .info p.price{font-size:14px;font-style:italic;color:#fa2a5d;height:35px}
 20         .mydiv li .info p.price strong{font-size:22px;font-family:Arial;padding-right:2px}
 21         .mydiv li .info p.price i{font-size:14px}
 22         .mydiv li .info p.more{display:none}
 23         .mydiv .mask{height:128px;width:156px;display:block;position:absolute;top:0;left:0;background:#000;-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;-webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;-o-transition:opacity .2s ease-in;-ms-transition:opacity .2s ease-in;transition:opacity .2s ease-in;_display:none!important}
 24        
 25        .mydiv .big{width:314px}
 26         .mydiv .big a{width:314px}
 27         .mydiv .big img{width:195px;height:120px;right:0;bottom:0}
 28         .mydiv .big .info{width:294px}
 29         .mydiv .big .info h3{font-size:18px}
 30         .mydiv .big .info p{font-size:14px;width:166px}
 31         .mydiv .big .info p.price{font-size:16px;padding-top:7px}
 32         .mydiv .big .info p.price strong{font-size:28px}
 33         .mydiv .big .info p.price i{font-size:16px}
 34         .mydiv .big .info p.more{display:block;font-size:12px;color:#ff2a5b}
 35         .mydiv .big .mask{width:314px}
 36         .mydiv:hover .mask{-ms-filter:"alpha(Opacity=15)";filter:alpha(opacity=15);opacity:.15;-webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;-o-transition:opacity .2s ease-in;-ms-transition:opacity .2s ease-in;transition:opacity .2s ease-in}
 37     </style>
 38     <script type="text/javascript" src="jquery-1.9.1.js"></script>
 39 </head>
 40 <body>
 41     <div id="subject" class="mydiv">
 42     <ul>
 43         <li>
 44             <a>
 45                 <img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
 46                 <div class="info">
 47                 <h3 style="color:#f62368">聚美妆</h3>
 48                 <p>聚美妆1/2周年庆</p>
 49                 <p class="price"><strong>1</strong><i>折起</i></p>
 50                   <p class="more">进入专题抢购 &gt; </p>
 51                 </div>
 52                 <s class="line"></s>
 53                 <i class="mask"></i>
 54             </a>
 55         </li>
 56         <li class="big">
 57             <a>
 58                 <img src="http://gtms01.alicdn.com/tps/i1/T1qxGLFsVbXXbA5QAK-195-120.jpg_Q90.jpg">
 59                 <div class="info">
 60                 <h3 style="color:#ff578a">Baby购</h3>
 61                 <p>宝宝该换装了，新品抢购</p>
 62                 <p class="price"><strong>2.5</strong><i>折起</i></p>
 63                   <p class="more">进入专题抢购 &gt; </p>
 64                 </div>
 65                 <s class="line"></s>    <i class="mask"></i>
 66             </a>
 67         </li>
 68         <li>
 69             <a>
 70                 <img src="http://gtms02.alicdn.com/tps/i2/T1KOSNFxXaXXbA5QAK-195-120.jpg_Q90.jpg">
 71                 <div class="info">
 72                 <h3 style="color:#6d3fa7">时装团</h3>
 73                 <p>时尚春装，清新小潮搭配</p>
 74                 <p class="price"><strong>1</strong><i>折起</i></p>
 75                   <p class="more">进入专题抢购 &gt; </p>
 76                 </div>
 77                 <s class="line"></s>    <i class="mask"></i>
 78             </a>
 79         </li>
 80         <li>
 81             <a>
 82                 <img src="http://gtms04.alicdn.com/tps/i4/T1CCeIFrVbXXbA5QAK-195-120.jpg_Q90.jpg">
 83                 <div class="info">
 84                 <h3 style="color:#d61939">TV购</h3>
 85                 <p>补血养颜 就这么简单</p>
 86                 <p class="price"><strong>2.6</strong><i>折起</i></p>
 87                   <p class="more">进入专题抢购 &gt; </p>
 88                 </div>
 89                 <s class="line"></s><i class="mask"></i>
 90             </a>
 91         </li>
 92         <li>
 93             <a>
 94                 <img src="http://gtms01.alicdn.com/tps/i1/T1jmKJFyJbXXbA5QAK-195-120.jpg_Q90.jpg">
 95                 <div class="info">
 96                 <h3 style="color:#6f9400">聚新鲜</h3>
 97                 <p>最纯正的泰国香米</p>
 98                 <p class="price"><strong>5</strong><i>折起</i></p>
 99                   <p class="more">进入专题抢购 &gt; </p>
100                 </div>
101                 <i class="mask"></i>
102             </a>
103         </li>
104     </ul>
105     </div>
106     <script type="text/javascript">
107          window.onload=function()
108 
109     {
110     var outer=document.getElementById('subject');
111 
112      var list=outer.getElementsByTagName('li');
113 
114       for(var i=0;i<list.length;i++)
115 
116      { list[i].onmouseover=function(){
117 
118        for(var i=0;i<list.length;i++)
119 
120       {list[i].className=''; }
121 
122        this.className='big';}}
123        }
124     </script>
125 </body>
126 </html>