<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-2.1.4.js"></script> <style> html,body{ width:100%; height:100%; overflow-x: hidden;//水平方向不可滑动 } *{ margin:0px; padding:0px; } </style> </head> <body> <div id="redDiv" style="background-color:red;width:100%;height:100%;position:absolute;"> <button id="moveRightButton" type="button"> 点击向右侧移动 </button> </div> <div id="yellowDiv" style="background-color:yellow;width:100%;height:100%;position:absolute;top:100%;"> </div> <div id="greenDiv" style="display: none;background-color:green;width:100%;height:100%;position:absolute;left:100%;top:0px;"> <button id="moveLeftButton" type="button"> 点击向左侧移动 </button> </div> </body> <script> window.onload = function(){ $("#moveRightButton").click(function(){ $("#greenDiv").css("display","block"); $("#greenDiv").animate({left:'0px'},'slow'); $("#redDiv").animate({left:'-100%'},"slow",function(){ $(this).css("display","none"); }); }); $("#moveLeftButton").click(function(){ $("#redDiv").css("display","block"); $("#redDiv").animate({left:'0px'},"slow"); $("#greenDiv").animate({left:'100%'},'slow',function(){ $(this).css("display","none"); }); }); } </script> </html>
实现页面从右往左侧滑入效果
最新推荐文章于 2022-07-07 16:03:27 发布