手风琴效果

最新推荐文章于 2022-10-31 10:19:31 发布

sunlizhen

最新推荐文章于 2022-10-31 10:19:31 发布

阅读量392

点赞数

分类专栏： jquery 文章标签：手风琴效果 jq

本文链接：https://blog.csdn.net/sunlizhen/article/details/78107409

版权

jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<body>
<div class="bg bg-box-1"></div>
<div class="bg bg-box-2"></div>
<div class="bg bg-box-3"></div>
<div class="bg bg-box-4"></div>
<div id="bg_wrap">
<div id="content">
<ul>
<li class="curr">
<div class="left">
<p>尼尔机械纪元1</p>
</div>
</li>
<li>
<div class="left">
<p>尼尔机械纪元2</p>
</div>
</li>
<li>
<div class="left">
<p>尼尔机械纪元3</p>
</div>
</li>
<li>
<div class="left">
<p>尼尔机械纪元4</p>
</div>
</li>
</ul>
</div>
</div>

</body>

css：

*{
padding:0;
margin:0;
list-style:none;
}
body{
width:100%;
height:100%;
}
#bg_wrap{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
.bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bg-box-1{
background: url('../img/1.jpg') no-repeat center/cover;
}
.bg-box-2{
background: url('../img/2.jpg') no-repeat center/cover;
}
.bg-box-3{
background: url('../img/3.jpg') no-repeat center/cover;
}
.bg-box-4{
background: url('../img/4.jpg') no-repeat center/cover;
}
#content{
position: absolute;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 1000px;
height: 400px;
}
ul{
width:120%;
}
li{
width:100px;
float:left;
height: 400px;
transition:all 1s;
}
li:nth-child(1){
background:url(../img/1.jpg) no-repeat center/cover;
}
li:nth-child(2){
background:url(../img/2.jpg) no-repeat center/cover;
}
li:nth-child(3){
background:url(../img/3.jpg) no-repeat center/cover;
}
li:nth-child(4){
background:url(../img/4.jpg) no-repeat center/cover;
width:700px;
}
#content .left{
width:100px;
height:100%;
background:rgba(0,0,0,0.5);
}
#content .left p{
padding:20px 40px;
color:#fff;
}

js：

/**
* Created by SlzStar on 2017/9/26.
*/
window.onload = function () {
$("li").mouseover(function(){
var that = $(this);
if(!$(this).hasClass("curr")){
$("li").removeClass("curr");
$(this).addClass("curr");
//改变背景色；
$("li").each(function(index){
console.log(index) //得到1-3所有的；所以拍判断有curr的时候才用他的index；
if($(this).hasClass("curr")){
$(".bg").fadeOut(300);
$(".bg:eq("+index+")").fadeIn(500);
}

})

//手风琴效果
$('.curr').stop().animate({
width: 700
}, 100, 'linear');

$("li").not(".curr").stop().animate({
width:100
},100,"linear")
}

})
}