html、css、js实现手风琴图片滑动
html、css、js实现手风琴图片滑动
手风琴图片滑动是我最近学的一个图片的效果，感觉不错，分享给大家。
最终效果见 ：http://gjhnstxu.me/squeezebox/demo.html
详细代码如下：
html代码：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>手风琴图片</title>
<link rel=”stylesheet” type=”text/css” href=”demo.css”>
<script type=”text/javascript” src = “jquery.js”></script>
<script type=”text/javascript” src = “demo.js”></script>
</head>
<body>
<div id=”pic”>
<ul>
<li class=”pic1″>
<a href=”#”>
<div class=”txt”>
<p class=”p1″>作者： 默默的沫沫</p>
<p class=”p2″>我的个人拉萨之旅 || 日光之城</p>
</div>
</a>
</li>
<li class=”pic2″>
<a href=”#”>
<div class=”txt”>
<p class=”p1″>作者： 默默的沫沫</p>
<p class=”p2″>我的个人成都之旅 || 美食之城</p>
</div>
</a>
</li>
<li class=”pic3″>
<a href=”#”>
<div class=”txt”>
<p class=”p1″>作者：默默的沫沫</p>
<p class=”p2″>我的个人丽江之旅 || 艳遇之城</p>
</div>
</a>
</li>
<li class=”pic4″>
<a href=”#”>
<div class=”txt”>
<p class=”p1″>作者： 默默的沫沫</p>
<p class=”p2″>我的个人南昌之旅 || 火热之城</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
css代码：
*{
padding: 0px;
margin: 0px;
font-family: “微软雅黑”;
list-style-type: none;
}
a{
text-decoration: none;
}
#pic{
width: 1100px;
height: 440px;
margin-top: 70px;
/*border: solid 1px red;*/
}
#pic ul li{
float: left;
width: 100px;
height: 440px;
}
#pic ul .pic4{
width: 800px;
}
.pic1{
background-image: url(img/1.jpg);
}
.pic2{
background-image: url(img/2.jpg);
}
.pic3{
background-image: url(img/3.jpg);
}
.pic4{
background-image: url(img/4.jpg);
width: 800px;
}
.txt{
background-color: #000;
background: rgba(0,0,0,0.5);
height: 440px;
width: 100px;
}
.txt p{
float: left;
color: #fff;
}
.txt .p1{
font-size: 12px;
width: 12px; //将文字大小和p1的宽度设为一样，就可以有文字呈一列显示的效果
padding: 25px 25px 0px 20px;
}
.txt .p2{
font-size: 14px;
width: 14px;
padding-top: 25px;
}
js代码：
$(function(){
$(“#pic ul li”).mouseover(function(){
$(this).stop(true).animate({width:”800px”},1000).siblings().stop(true).animate({width:”100px”},1000); //animate()可以使图片滑动具有动画效果，stop(true)是图片滑动更加流畅，不加stop()则图片的反应比较慢
});
});