扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
从屏幕上下左右滑入滑出效果，代码比较粗糙，但是效果已实现
专注于为中小企业提供成都网站设计、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业汕头免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
需要注意的是，从屏幕右边和下边滑入的时候，需要给滑动的容器外面再加一个容器，加样式position: fixed;让它固定定位，否则页面右边和底部会出现滚动条
主要使用了 cssanimate 属性
DOCTYPE html>
<html>
<head>
<metacharset="utf-8" />
<title>JS 屏幕滑入滑出title>
<style>
.Left{
width: 250px;
border: 1px dashed red;
background-color: aquamarine;
position: absolute;
transition: all 1s;
left: -260px;
top: 400px;
}
.Right{
width: 250px;
border: 1px dashed red;
background-color: aquamarine;
position: absolute;
transition: all 1s;
right: -260px;
top: 400px;
}
#main{
width: 100%;
position: fixed;
}
#up{
width: 250px;
border: 1px dashed red;
background-color: aquamarine;
position: absolute;
transition: all 1s;
top: -144px;
left: 600px;
}
#down{
width: 250px;
border: 1px dashed red;
background-color: aquamarine;
position: absolute;
transition: all 1s;
bottom: -173px;
left: 600px;
}
#mainDown{
position: fixed;
bottom: 0;
}
style>
<scriptsrc="js/jquery.min.js">script>
head>
<body>
<inputtype="button" value="滑出" style=" width: 85px; height: 33px;" onclick="btnOut();" />
<inputtype="button" value="滑入" style=" width: 85px; height: 33px;" onclick="btnIn();" />
<divclass="Left">
<ul>
<li>左边列表li>
<li>左边列表li>
<li>左边列表li>
<li>左边列表li>
ul>
<spanonclick="btnIn();">关闭span>
div>
<divid="main">
<divclass="Right">
<ul>
<li>右边列表li>
<li>右边列表li>
<li>右边列表li>
<li>右边列表li>
ul>
<spanonclick="btnIn();">关闭span>
div>
div>
<divid="up">
<ul>
<li>上边列表li>
<li>上边列表li>
<li>上边列表li>
<li>上边列表li>
ul>
<spanonclick="btnIn();">关闭span>
div>
<divid="mainDown">
<divid="down">
<ul>
<li>下边列表li>
<li>下边列表li>
<li>下边列表li>
<li>下边列表li>
ul>
<spanonclick="btnIn();">关闭span>
div>
div>
<script>
function btnOut() {
$(".Left").animate({},1500,function () {
$(".Left").css({"left":"100px" });
});
$(".Right").animate({},1500,function () {
$(".Right").css({"right":"100px" });
})
$("#up").animate({},1500,function () {
$("#up").css({"top":"50px" });
});
$("#down").animate({},1500,function () {
$("#down").css({"bottom":"50px" });
});
}
function btnIn() {
$(".Left").animate({},1500,function () {
$(".Left").css({"left":"-260px" });
});
$(".Right").animate({},1500,function () {
$(".Right").css({"right":"-260px" });
})
$("#up").animate({},1500,function () {
$("#up").css({"top":"-144px" });
});
$("#down").animate({},1500,function () {
$("#down").css({"bottom":"-144px" });
});
}
script>
body>
html>
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网