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>