jquery实现上下左右滑动的方法
本文实例讲述了jquery实现上下左右滑动的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<scripttype="text/javascript"src="jquery-1.11.2.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#btn").unbind().click(function(){
$("#first").hide();
$("#sec").css("left","-200px").animate({"left":"0px"},500).show(); });
$("#btn2").unbind().click(function(){ $("#sec").hide();
$("#first").css("left","200px").animate({"left":"0px"},500).show(); });
$("#btn3").unbind().click(function(){ $("#first").hide(); $("#sec").css("top","200px").animate({"top":"0px"},500).show(); });
$("#btn4").unbind().click(function(){ $("#sec").hide(); $("#first").css("top","-200px").animate({"top":"0px"},500).show(); }); }); </script> </head>
<body> <divstyle="width:200px;height:200px;"> <divid="first"style="text-align:center;width:200px;height:200px;position:absolute;"> <p>第一页</p> <p>第一页</p> <p>第一页</p> <p>第一页</p> <p>第一页</p> </div> <divid="sec"style="text-align:center;width:200px;height:200px;display:none;position:absolute;"> <p>第二页</p> <p>第二页</p> <p>第二页</p> <p>第二页</p> <p>第二页</p> </div> </div> <divstyle="width:200px;height:50px;"> <inputtype="button"value="向右滚动"id="btn"/> <inputtype="button"value="向左滚动"id="btn2"/> <inputtype="button"value="向上滚动"id="btn3"/> <inputtype="button"value="向下滚动"id="btn4"/> </div> </body> </html>