您的位置：首页 > 其它

点击按钮向左侧滑动效果

2017-12-27 15:19 127 查看

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>向左侧滑动效果</title>

<-- 需引入手册 -->

<script src="jquery-1.8.3.min.js"></script>

<style>
*{
margin: 0;
padding: 0;
}
img{
border: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}

.btn{
width: 100px;
height: 30px;
line-height: 30px;
border: 1px solid;
margin: 0 auto;
margin-top: 100px;
text-align: center;
cursor: pointer;
border-radius: 6px;
}
.btn_show{
width: 100%;
height: 100%;
display: none;
}

.btn_show_bg{
width: 100%;
height: 100%;
background: #000;
position: fixed;
top: 0;
left: 0;
opacity: 0.5;
}
.btn_show_main{
width: 300px;
height: 100%;
background: #fff;
position: fixed;
top: 0;
right: -300px;
}
.btn_show_main_close{
font-size: 14px;
width: 100px;
height: 20px;
line-height: 20px;
text-align: center;
cursor: pointer;

}

.div_right0{
animation:myfirstss 2s;
-moz-animation:myfirstss 2s; /* Firefox */
-webkit-animation:myfirstss 2s; /* Safari and Chrome */
-o-animation:myfirstss 2s; /* Opera */
animation-fill-mode: forwards;
}
@keyframes myfirstss{
100% {background:red; right:0px; top:0px;}
}
.div_right{
animation:myfirsts 2s;
-moz-animation:myfirsts 2s; /* Firefox */
-webkit-animation:myfirsts 2s; /* Safari and Chrome */
-o-animation:myfirsts 2s; /* Opera */
animation-fill-mode: forwards;
right: 0px;
}
@keyframes myfirsts{
100% {background:blue; right:-300px; top:0px;}
}
.btn_show_main ul li{
width: 100%;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 14px;
margin-bottom: 10px;
cursor: pointer;
}
</style>

</head>

<body>
<div class="btn">按钮</div>

<div class="btn_show">
<div class="btn_show_bg"></div>
<div class="btn_show_main">
<div class="btn_show_main_close">我是关闭</div>
<ul>
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
<li>我是4</li>
<li>我是5</li>
<li>我是6</li>
<li>我是7</li>
<li>我是8</li>
<li>我是9</li>
<li>我是10</li>
</ul>
</div>
</div>

</body>

<script>
window.onload = function(){
$(".btn").click(function(){
$(".btn_show").show();
$(".btn_show_bg").show();
$(".btn_show_main").addClass('div_right0');
$(".btn_show_main").removeClass('div_right')
});

$(".btn_show_main_close").click(function(){
$(".btn_show_main").addClass('div_right');
$(".btn_show_main").removeClass('div_right0');
$(".btn_show_bg").hide(2000);
});
};

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航