三十六、jquery手風琴效果
阿新 • • 發佈：2018-12-16
1.基本結構樣式
2.新增手風琴展開事件：當滑鼠進入某個圖片，展開當前圖片，其同胞兄弟合起來，並設定相應的樣式
注意：需要使用stop()處理連續多次滑動的情況；
$(this).mouseenter(function(){
//設定span屬性
$(this).children("span").css({
borderStyle:"none",
});
//展開
$(".block").stop().animate({
width:"1200px"
},500,"linear");
$(this).stop().animate({
},500,"linear").siblings().stop().animate({
width:"120px"
},500,"linear",function(){
$(this).children("span").css({
backgroundColor:"rgba(3, 2, 3, 0.24)"
});
})
});
3.新增滑鼠離開整體框事件，設定屬性迴歸最初狀態，並處理不斷進入出去情況
注意：需用stop()停止當前執行動畫在將進行下一動畫時；
$(".block").mouseleave(function(){
$(".ulinfo li").stop().animate({
width:"120px"
},500,"linear",function(){
$(this).children("span").css({
border:"1px solid silver",
backgroundColor:"rgba(3, 2, 3, 0.24)"
});
});
$(this).stop().animate({
width:"720px"
},500,"linear")
})
4.完整程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;}
.block{
width: 720px;
height: 300px;
/* border: 1px solid red;*/
margin: 20px;
overflow: hidden;
position: relative;
}
.ulinfo{
width: 3600px;
height: 300px;
}
.ulinfo li{
list-style: none;
float: left;
width: 120px;
height: 300px;
position: relative;
overflow: hidden;
}
span{
display: inline-block;
width: 120px;
height: 300px;
background-color: rgba(0, 0, 0, 0.3);
border: 1px solid silver;
}
.imglist{
width: 600px;
height: 300px;
position: absolute;
top: 0;
z-index: -1;
}
img{
width: 100%;
height: 100%;
}
</style>
<script src="js/jquery-3.0.0.js"></script>
<script>
$(function(){
$(".ulinfo li").each(function(){
$(this).mouseenter(function(){
//設定span屬性
$(this).children("span").css({
borderStyle:"none",
backgroundColor:"rgba(3, 2, 3, 0)"
});
//展開
$(".block").stop().animate({
width:"1200px"
},500,"linear");
$(this).stop().animate({
width:"600px"
},500,"linear").siblings().stop().animate({
width:"120px"
},500,"linear",function(){
$(this).children("span").css({
border:"1px solid silver",
backgroundColor:"rgba(3, 2, 3, 0.24)"
});
})
});
$(".block").mouseleave(function(){
$(".ulinfo li").stop().animate({
width:"120px"
},500,"linear",function(){
$(this).children("span").css({
border:"1px solid silver",
backgroundColor:"rgba(3, 2, 3, 0.24)"
});
});
$(this).stop().animate({
width:"720px"
},500,"linear")
})
})
})
</script>
</head>
<body>
<div class="block">
<ul class="ulinfo">
<li><span>1</span><div class="imglist"><img src="image/demo1.jpg"></div></li>
<li><span>2</span><div class="imglist"><img src="image/demo2.jpg"></div></li>
<li><span>3</span><div class="imglist"><img src="image/demo3.jpg"></div></li>
<li><span>4</span><div class="imglist"><img src="image/demo4.jpg"></div></li>
<li><span>5</span><div class="imglist"><img src="image/demo5.jpg"></div></li>
<li><span>6</span><div class="imglist"><img src="image/demo6.jpg"></div></li>
</ul>
</div>
</body>
</html>