网页编程网

www.youkud.com

当前位置：主页 >> 网页特效 >> 正文

jquery实现手风琴最简代码

阅读：3332 输入：2020-05-22 21:16:18

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style> 
* {margin:0;padding:0}
.wrap{
    width: 1090px;
    height: 429px;
    margin: 0 auto;
    background-color: pink;
}
.list{
    float: left;
    width:100px;
    height: 429px;
    margin: 0 auto;
    background-color: blue; 
    background-image: url('1.jpg');
}
.list:nth-child(2){
    background-image: url('1.jpg');
}
.list:nth-child(3){
    background-image: url('1.jpg');
}
.list:nth-child(4){
    background-image: url('1.jpg');
    width: 789px;
}
.hide{
    width: 100px;
    height: 429px;
    background-color:rgba(0,0,0,.6);
}
.hide p{
    color: white;
    padding: 42px;
}
</style> 
</head> 
<body> 
<div class="wrap">
    <div class="list">
<div class="hide"><p>我是真心喜欢你</p></div>
    </div>
        <div class="list">
<div class="hide"><p>我是真心喜欢你</p></div>
    </div>
    <div class="list">
<div class="hide"><p>我是真心喜欢你</p></div>
    </div>
        <div class="list">
<div class="hide"><p>我是真心喜欢你</p></div>
    </div>
</div>
<script>
    $(".list").hover(function(){
        $(this).stop().animate({
            width:'789px'
        },500).siblings().stop().animate({
            width:'100px'
        })
    });
</script>
</body>

上一篇：利用CSS的hover伪类实现的下拉菜单效果
下一篇：弹性盒模型flex+绝对定位实现幻灯轮播

相关阅读: jquery选择器中的空格、大于号、加号、波浪号的意思解析; 利用jq设置图片等比例缩小; jquery也能实现汉字转拼音了

下载专区: 软件下载（提取码：mtag）

Tag

HTML工具: 进制间转换; 进制转换（带小数）; html代码运行

HTML工具: 字母翻转; 硬盘整数分区; html颜色代码

HTML工具: 除空格回车; 万年历; fojiao

HTML工具: 小游戏; 在线绘画; 更多

手机版
联系微信:jingqishens