JS 从屏幕上下左右滑入滑出效果

  • JS 从屏幕上下左右滑入滑出效果已关闭评论
  • 129 次浏览
  • A+
所属分类:Web前端
摘要

从屏幕上下左右滑入滑出效果,代码比较粗糙,但是效果已实现需要注意的是,从屏幕右边和下边滑入的时候,需要给滑动的容器外面再加一个容器,加样式 position: fixed; 让它 固定定位,否则页面右边和底部会出现滚动条 

从屏幕上下左右滑入滑出效果,代码比较粗糙,但是效果已实现

需要注意的是,从屏幕右边和下边滑入的时候,需要给滑动的容器外面再加一个容器,加样式 position: fixed; 让它 固定定位,否则页面右边和底部会出现滚动条 

主要使用了 css animate 属性

 

<!DOCTYPE html> <html> <head>     <meta charset="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>     <script src="js/jquery.min.js"></script> </head> <body>     <input type="button" value="滑出" style=" width: 85px; height: 33px;" onclick="btnOut();" />     <input type="button" value="滑入" style=" width: 85px; height: 33px;" onclick="btnIn();" />      <div class="Left">         <ul>             <li>左边列表</li>             <li>左边列表</li>             <li>左边列表</li>             <li>左边列表</li>         </ul>         <span onclick="btnIn();">关闭</span>     </div>      <div id="main">         <div class="Right">             <ul>                 <li>右边列表</li>                 <li>右边列表</li>                 <li>右边列表</li>                 <li>右边列表</li>             </ul>             <span onclick="btnIn();">关闭</span>         </div>     </div>      <div id="up">         <ul>             <li>上边列表</li>             <li>上边列表</li>             <li>上边列表</li>             <li>上边列表</li>         </ul>         <span onclick="btnIn();">关闭</span>     </div>      <div id="mainDown">         <div id="down">             <ul>                 <li>下边列表</li>                 <li>下边列表</li>                 <li>下边列表</li>                 <li>下边列表</li>             </ul>             <span onclick="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>