html实现抽屉式效果,抽屉式效果.html

Document

* {

margin: 0px;

padding: 0px;

}

body {

background: url('img/bg.jpg')

}

.box {

width: 1100px;

height: 430px;

margin: 120px auto;

}

.box ul li {

list-style-type: none;

width: 100px;

height: 429px;

float: left;

}

.box .l1 {

background: url('./img/1.png')

}

.box .l2 {

background: url('./img/2.png')

}

.box .l3 {

background: url('./img/3.jpg')

}

.box .l4 {

background: url('./img/4.jpg');

width: 789px;

}

.box .txt {

width: 100px;

height: 429px;

background: rgba(4, 2, 6, 0.4);

cursor: pointer;

}

.box .txt p {

color: #fff;

font-family: "微软雅黑";

float: left;

}

.box .txt p.p1 {

font-size: 12px;

width: 12px;

margin: 45px 20px 0 20px;

}

.box .txt p.p2 {

font-size: 14px;

width: 14px;

margin-top: 120px;

}

• 作者 ：小猪

  拉萨之旅

• 作者 ：小猪

  荒漠之旅

• 作者 ：小猪

  山谷之旅

• 作者 ：小猪

  冰山之旅

$(".box ul li").click(function () {

$(this).stop(true).animate({

width: "789px"

}, 1000).siblings().stop(true).animate({

width: "100px"

}, 1000);

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史