jq练习手风琴效果的实现

Arce

　　图片分辨率为 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>

　　

[jQuery] jq练习手风琴效果的实现

相关帖子

ps怎么做出钢印凸起效果钢印凸起效果设置方法

电脑连接电视怎么设置分辨率

ps素描效果制作

电脑分辨率设置步骤

笔记本分辨率怎么调到最佳

利用CSS样式将网页变黑白色效果

Excel 使用技巧 - 如何使光标所在行的数据自动变颜色

7种好看的鼠标点击效果

好看的CSS3滑动按钮特效

php实现超简的分页功能

Arce LV4