您的位置：首页 > 其它

实现页面从右往左侧滑入效果

2015-11-11 17:43 591 查看

<!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>

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

标签： 页面从右侧滑入效果

相关文章推荐

新的分享

章节导航