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>

　　

[jQuery] jq练习手风琴效果2

相关帖子

22寸显示器最佳分辨率是多少？

linux中vi编辑器的练习心得

dpi是什么意思

电脑怎么调节电脑分辨率

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

电脑分辨率设置步骤

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

绝代码农 LV4

[jQuery] jq练习 手风琴效果2