jq练习手风琴效果的实现
图片分辨率为 500*300
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习手风琴效果1</title>
<style>
*{
margin:0;
padding:0;
list-style:none;}
#outer{
width:1200px;
height:300px;
margin:0 auto;
margin-top:200px;
border:solid 1px #000;
position:relative;}
#content{
width:2000px;
height:300px;}
.pic-show{
width:200px;
height:300px;
overflow:hidden;
float:left;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div id="outer">
<div id="content">
<div class="pic-show"><img src="images2/pic/01.jpg"/></div>
<div class="pic-show"><img src="images2/pic/02.jpg"/></div>
<div class="pic-show"><img src="images2/pic/03.jpg"/></div>
<div class="pic-show"><img src="images2/pic/04.jpg"/></div>
<div class="pic-show"><img src="images2/pic/05.jpg"/></div>
<div class="pic-show"><img src="images2/pic/06.jpg"/></div>
</div>
</div>
<script>
$(document).ready(function(e) {
$(".pic-show").hover(function(){
console.log("inpic");
$(this).stop().animate({width:"500px"},500);
$(this).siblings().stop().animate({left:"-60px",width:"140px"},500);
},function(){
console.log("outpic");
$(this).stop().animate({width:"200px"},500);
$(this).siblings().stop().animate({left:"60px",width:"200px"},500);
});
});
</script>
</body>
</html>
文档来源：51CTO技术博客https://blog.51cto.com/u_15288038/3029477
页:
[1]