<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>拉萨手风琴</title>
<style>
*{
margin: 0;
}
body{
background-image: url(../images/6.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.piclists{
width: 1089px;
height: 429px;
background-color: #8392e2;
margin: 100px auto;
}
.piclists ul{
list-style: none;
padding: 0;
height: 100%;
}
.list{
float: left;
width: 100px;
height: 429px;
background-color: #ff9999;
background-image: url(../images/3.jpg);
}
.list:nth-child(2){
background-image: url(../images/4.jpg);
}
.list:nth-of-type(3){
background-image: url(../images/5.jpg);
}
.list:nth-of-type(4){
width: 789px;
background-image: url(../images/6.jpg);
}
.list div{
width: 100px;
height: 429px;
background-color: rgba(0,0,0,0.5);
}
.list div p{
padding: 43px;
color: #ffffff;
}
</style>
</head>
<body>
<div class="piclists">
<ul>
<li class="list">
<div>
<p>我的个人拉萨之旅 | | 故事之城</p>
</div>
</li>
<li class="list">
<div>
<p>我的个人拉萨之旅 | | 故事之城</p>
</div>
</li>
<li class="list">
<div>
<p>我的个人拉萨之旅 | | 故事之城</p>
</div>
</li>
<li class="list">
<div>
<p>我的个人拉萨之旅 | | 故事之城</p>
</div>
</li>
</ul>
</div>
<script src="../js/jquery-1.11.1.min.js"></script>
<!--script src="../js/tab.js"></script-->
<script>
(function($){
$.fn.tab = function(option){
var bgNode = option.bg;
var eventNode = option.el;
var imgArr = option.bgImg;
$(eventNode).click(function(){
var index = $(this).index();
$(this).stop().animate({
width: "789px"
},500).siblings().stop().animate({
width: "100px"
},500);
$(bgNode).css({
backgroundImage:"url("+imgArr[index]+")"
});
})
}
})($)
$.fn.tab({
el:".list",
bg:"body",
bgImg: ["../images/3.jpg","../images/4.jpg",
"../images/5.jpg","../images/6.jpg"]
});
</script>
</body>
</html>
拉萨手风琴
最新推荐文章于 2024-07-18 14:29:38 发布