jQuery实现图片左右出现和隐藏动画(腰封)
一定要引入jQuery,代码如下:.container{//整个容器的样式display:block;position:fixed;z-index: 13;}.d1{//红色部分的样式position:fixed;z-index:999999;overflow:hidden;;bottom:
·
一定要引入jQuery,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="jquery-1.8.3.min.js"></script>
<link rel="stylesheet" href="">
<style>
.container{//整个容器的样式
display:block;
position:fixed;
z-index: 13;
}
.d1{//红色部分的样式
position:fixed;
z-index:999999;
overflow:hidden;;
bottom:50px;
cursor:pointer;
}
.d2{//灰色部分的样式
position:fixed;
left:0;
bottom:0;
width:100%;
height:220px;
z-index:999998;
}
#close{//关闭的样式
display:inline-block;
position:absolute;
bottom:160px;
right:270px;
width:60px;
height:55px;
cursor:pointer;
font: normal 50px Simsun;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<!--让d1先在左边-150px,其实就等于隐藏-->
<div class="d1" style="width:150px;height:80px;background-color:red;left:-150px;">15551
</div>
<div class="d2" style="width:1903px;height:220px;background-color:grey;left:0px;">
<a id="close">×</a>
</div>
</div>
<script>
$(document).ready(function(){
$("#close").click(function(){
$(".d2").animate({left:'-1920px'});//让d2左移-1920px,就等于隐藏d2
$(".d1").animate({display:'block',left:'0px'});//让d1距离左边0px就是等于让d1显示
});
$(".d1").click(function(){
$(".d1").animate({display:'block',left:'-150px'});
$(".d2").animate({left:'0px',display:'block'});
});
});
</script>
</body>
</html>
红色隐藏,灰色出现时,效果如图所示:
点击x灰色隐藏,红色出现时:
更多推荐
已为社区贡献1条内容
所有评论(0)