html、css、js實現手風琴圖片滑動

時間 2019-11-18

標籤 html css 實現手風琴圖片滑動欄目 HTML 简体版

原文原文鏈接

手風琴圖片滑動是我最近學的一個圖片的效果，感受不錯，分享給你們。javascript

最終效果見：http://gjhnstxu.me/squeezebox/demo.htmlcss

詳細代碼以下：html

html代碼：java

<!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>jquery

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;
}this

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

js代碼：htm

$(function(){
$("#pic ul li").mouseover(function(){
$(this).stop(true).animate({width:"800px"},1000).siblings().stop(true).animate({width:"100px"},1000); //animate()能夠使圖片滑動具備動畫效果，stop(true)是圖片滑動更加流暢，不加stop()則圖片的反應比較慢
});
});seo

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。