jQuery CSS3 手风琴插件效果

这里写图片描述

body, ul, li, p {
  margin: 0;
  padding: 0
}
ul, ol {
  list-style: none;
}
.home-subjects-v2 {
  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;
  margin: 50px auto;
}
.home-subjects-v2 ul {
  width: 1000px
}
.home-subjects-v2 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
}
.home-subjects-v2 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
}
.home-subjects-v2 li a {
  width: 156px;
  height: 128px;
  display: block;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden
}
.home-subjects-v2 li a:hover {
  position: absolute
}
.home-subjects-v2 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
}
.home-subjects-v2 li img {
  height: 72px;
  width: 117px;
  position: absolute;
  bottom: 0;
  right: -13px
}
.home-subjects-v2 li .line {
  height: 128px;
  width: 0;
  font-size: 0;
  border-right: 1px dashed #cacaca;
  position: absolute;
  right: 0;
  top: 4px
}
.home-subjects-v2 li .info {
  position: absolute;
  top: 0;
  left: 0;
  width: 136px;
  padding: 4px 10px
}
.home-subjects-v2 li .info h3 {
  font-size: 14px;
  font-weight: 700
}
.home-subjects-v2 li .info p {
  color: #868686;
  font-size: 12px;
  overflow: hidden;
  width: 136px;
  height: 22px;
  line-height: 22px
}
.home-subjects-v2 li .info p.price {
  font-size: 14px;
  font-style: italic;
  color: #fa2a5d;
  height: 35px
}
.home-subjects-v2 li .info p.price strong {
  font-size: 22px;
  font-family: Arial;
  padding-right: 2px
}
.home-subjects-v2 li .info p.price i {
  font-size: 14px
}
.home-subjects-v2 li .info p.more {
  display: none
}
.home-subjects-v2 .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
}
.home-subjects-v2 .big {
  width: 314px;
}
.home-subjects-v2 .big a {
  width: 314px
}
.home-subjects-v2 .big img {
  width: 195px;
  height: 120px;
  right: 0;
  bottom: 0
}
.home-subjects-v2 .big .info {
  width: 294px
}
.home-subjects-v2 .big .info h3 {
  font-size: 18px
}
.home-subjects-v2 .big .info p {
  font-size: 14px;
  width: 166px
}
.home-subjects-v2 .big .info p.price {
  font-size: 16px;
  padding-top: 7px
}
.home-subjects-v2 .big .info p.price strong {
  font-size: 28px
}
.home-subjects-v2 .big .info p.price i {
  font-size: 16px
}
.home-subjects-v2 .big .info p.more {
  display: block;
  font-size: 12px;
  color: #ff2a5b
}
.home-subjects-v2 .big .mask {
  width: 314px
}
.home-subjects-v2: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
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>手风琴效果</title>
    <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <div id="subject" class="home-subjects-v2">
      <ul>
        <li class="big">
          <a>
            <img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
            <div class="info">
              <h3 style="color:#f62368">聚美妆</h3>
              <p>聚美妆1/2周年庆</p>
              <p class="price"><strong>1</strong><i>折起</i></p>
              <p class="more">进入专题抢购 &gt; </p>
            </div>
            <s class="line"></s>
            <i class="mask"></i>
          </a>
        </li>
        <li>
          <a>
            <img src="http://gtms01.alicdn.com/tps/i1/T1qxGLFsVbXXbA5QAK-195-120.jpg_Q90.jpg">
            <div class="info">
              <h3 style="color:#ff578a">Baby购</h3>
              <p>宝宝该换装了，新品抢购</p>
              <p class="price"><strong>2.5</strong><i>折起</i></p>
              <p class="more">进入专题抢购 &gt; </p>
            </div>
            <s class="line"></s> <i class="mask"></i>
          </a>
        </li>
        <li>
          <a>
            <img src="http://gtms02.alicdn.com/tps/i2/T1KOSNFxXaXXbA5QAK-195-120.jpg_Q90.jpg">
            <div class="info">
              <h3 style="color:#6d3fa7">时装团</h3>
              <p>时尚春装，清新小潮搭配</p>
              <p class="price"><strong>1</strong><i>折起</i></p>
              <p class="more">进入专题抢购 &gt; </p>
            </div>
            <s class="line"></s> <i class="mask"></i>
          </a>
        </li>
        <li>
          <a>
            <img src="http://gtms04.alicdn.com/tps/i4/T1CCeIFrVbXXbA5QAK-195-120.jpg_Q90.jpg">
            <div class="info">
              <h3 style="color:#d61939">TV购</h3>
              <p>补血养颜 就这么简单</p>
              <p class="price"><strong>2.6</strong><i>折起</i></p>
              <p class="more">进入专题抢购 &gt; </p>
            </div>
            <s class="line"></s><i class="mask"></i>
          </a>
        </li>
        <li>
          <a>
            <img src="http://gtms01.alicdn.com/tps/i1/T1jmKJFyJbXXbA5QAK-195-120.jpg_Q90.jpg">
            <div class="info">
              <h3 style="color:#6f9400">聚新鲜</h3>
              <p>最纯正的泰国香米</p>
              <p class="price"><strong>5</strong><i>折起</i></p>
              <p class="more">进入专题抢购 &gt; </p>
            </div>
            <i class="mask"></i>
          </a>
        </li>
      </ul>
    </div>

    <script>
      function mouseover(e) {
        var list = $('#subject li');
        var target = $(e.target).parents('li');
        list.removeClass('big');
        target.addClass('big');
      }
      (function () {
        var outer = $('#subject');
        outer.find('li').on('mouseover', mouseover);
      })()
    </script>
  </body>
</html>

jQuery CSS3 手风琴插件 效果

猜你喜欢

jQuery CSS3 手风琴插件效果