jquery實現上下左右滑動的方法
本文實例講述了jquery實現上下左右滑動的方法。分享給大家供大家參考。具體實現方法如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="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>
<div style="width:200px; height:200px;">
<div id="first" style="text-align:center; width:200px; height:200px;position:absolute;">
<p>第一頁</p>
<p>第一頁</p>
<p>第一頁</p>
<p>第一頁</p>
<p>第一頁</p>
</div>
<div id="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>
<div style="width:200px; height:50px;">
<input type="button" value="向右滾動" id="btn"/>
<input type="button" value="向左滾動" id="btn2"/>
<input type="button" value="向上滾動" id="btn3"/>
<input type="button" value="向下滾動" id="btn4"/>
</div>
</body>
</html>
特別要注意：代碼中的position:absolute;一定要加上，否則不會出現效果。
希望本文所述對大家的jQuery程序設計有所幫助。
相關文章
這篇文章主要深入介紹了提高jQuery性能優(yōu)化的技巧，有需要的小伙可以來參考下2015-08-08
控制圖片的伸縮想必大家都有看到過吧，不過同時控制四張圖片的伸縮卻不是那么的常見吧，接下來為大家詳細介紹下jQuery同時控制四張圖片的伸縮2013-04-04
之前做項目的時候，一直都想著做一個上下滾動的公告欄，作為展示網站的最新公告信息，給用戶帶來極好的用戶體驗，下面小編通過實例代碼給大家分享基于jQuery實現上下滾動公告欄，感興趣的朋友一起看看吧2018-11-11
在網頁上只有一個小區(qū)域，但是說明性的文字又很長，下面這段腳本實現的是長文字的部分顯示，有類似需求的朋友可以參考下哈，希望對你有所幫助2015-06-06
本文僅供參考，如有不足或錯誤，請不吝賜教，這里以一個彈出層的jQuery插件制作實例為基礎，進行插件制作的說明。2010-04-04
本篇文章主要介紹了jQuery實現多張圖片上傳預覽（不經過后端處理）的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
jquery和javascript中如何將一元素的內容賦給另一元素
將一元素的內容賦給另一元素，在某些情況下還是比較實用的，下面為大家講解下jquery和javascript中是如何實現的2014-01-01
本人也是JQuery初學者，寫了個用戶名無刷新驗證的簡單例子，拿來分享，共同學習一下吧。2013-03-03
在網上找到了jquery.Jcrop,基本滿足了我的需求,但它只是簡單的切割而已,還有縮略圖沒有生成.或許有很多人都需要這類東西吧,于是我把它封裝起來了,方便其它朋友直接使用.2010-03-03
本文給大家介紹jquery選擇器的相關知識，并通過案例給大家介紹jquery知識，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起學習吧2016-05-05