手风琴想必大家都是非常熟悉的东西了吧,其实前端也有叫做手风琴的效果,接下来我们一起看看吧!
前端的手风琴效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
| <!DOCTYPE HTML>
<html>
<head>
<title>please enter your title</title>
<meta charset="utf-8">
<meta name="Author" content="">
<style type='text/css'>
*{ margin:0; padding:0;}
#wrap{
width:1090px;
height:429px;
margin:160px auto;
overflow:hidden;
}
#wrap ul{
width:120%;
}
#wrap ul li{
list-style:none;
width:100px;
height:429px;
float:left;
background: #ccc;
}
#wrap ul li .txt{
width:100px;
height:429px;
background:rgba(0,0,0,.5);
overflow:hidden;
}
#wrap ul li .txt p{
padding:0px 42px;
background:rgba(0,0,0,.5);
color:#fff;
font-family:'Microsoft yahei';
font-size:14px;
}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li>
<div class='txt'>
<p>页面一</p>
</div>
</li>
<li>
<div class='txt'>
<p>页面二</p>
</div>
</li>
<li>
<div class='txt'>
<p>页面三</p>
</div>
</li>
<li>
<div class='txt'>
<p>页面四</p>
</div>
</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
<script type="text/javascript">
$('#wrap ul li').hover(function(){
$(this).stop().animate({
width : '789px'
},500).siblings().stop().animate({
width : '100px'
},500);
});
</script>
</body>
</html> |
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"手风琴效果解析"
最新评论