手风琴效果

1.html中的内容如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>手风琴</title>
	<link rel="stylesheet" href="shoufengqin.css">
</head>
<body>
	<div id="subject" class="home-subjects-v2">
	    <ul>
	        <li>
	            <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 class="big">
	            <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 type="text/javascript" src="jquery-1.9.1.js"></script>
	<script type="text/javascript" src="shoufengqin.js"></script>
</body>
</html>

2.js内容如下

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);
})()

3.css内容如下

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}
.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}

4.效果如下

本文出自 “素颜” 博客,请务必保留此出处http://suyanzhu.blog.51cto.com/8050189/1902092

IT文库 » 手风琴效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址