jq练习 手风琴效果2
图片分辨率 560*300
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习 手风琴效果2</title>
<style>
*{
margin:0;
padding:0;
list-style:none;}
#contend{
height:300px;
width:680px;
margin:0 auto;
margin-top:200px;}
.pic-box{
width:2000px;}
.pic-show{
float:left;
width:30px;
height:300px;
overflow:hidden;
}
.pic-show img{
text-align:right;
padding-left:30px;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div id="outer">
<div id="contend">
<div class="pic-box">
<div class="pic-show" style=" width:590px; background-color:green"><img src="images2/1.jpg"/></div>
<div class="pic-show" style="background-color:orange"><img src="images2/2.jpg"/></div>
<div class="pic-show" style="background-color:lightblue"><img src="images2/3.jpg"/></div>
<div class="pic-show" style="background-color:pink"><img src="images2/4.jpg"/></div>
</div>
</div>
</div>
<script>
$(document).ready(function(e) {
$(".pic-show").hover(function(){
console.log("inhover");
$(this).stop().animate({width:"590px"},500).siblings().stop().animate({width:"30px"},500);
},function(){
});
});
</script>
</body>
</html>
文档来源：51CTO技术博客https://blog.51cto.com/u_15288038/3029476
页:
[1]