jquery實現(xiàn)上下左右滑動的方法
本文實例講述了jquery實現(xiàn)上下左右滑動的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</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;一定要加上，否則不會出現(xiàn)效果。
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了JQuery EasyUI 數(shù)字格式化處理方法,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了jQuery實現(xiàn)checkbox全選的方法,涉及jQuery操作頁面元素屬性及鼠標(biāo)事件響應(yīng)的相關(guān)技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了JQuery中使文本框獲得焦點的方法,實例分析了jQuery針對文本框獲得焦點的技巧,需要的朋友可以參考下2015-02-02
用Jquery重寫windows.alert方法實現(xiàn)思路
本文將介紹下用Jquery重寫windows.alert方法，已經(jīng)在 IE8 , firefox3.0.11下面測試通過，喜歡的朋友可以放心使用2013-04-04
jQuery 底層 AJAX 實現(xiàn)。簡單易用的高層實現(xiàn)見 $.get, $.post 等。$.ajax() 返回其創(chuàng)建的 XMLHttpRequest 對象。大多數(shù)情況下你無需直接操作該函數(shù)，除非你需要操作不常用的選項，以獲得更多的靈活性，本文給大家介紹jquery ajax用法詳解，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
精心挑選的15款優(yōu)秀jQuery 本特效插件和教程
今天這篇文章向大家分享15款精心挑選的優(yōu)秀 jQuery 文本特效插件，都帶有詳細(xì)的使用教程。jQuery 是最流行和使用最廣泛的 JavaScript 框架，它簡化了 HTML 文檔遍歷，事件處理，動畫以及Ajax交互，幫助 Web 開發(fā)人員更快速的實現(xiàn)各種精美的界面效果2012-08-08
jQuery的流行已經(jīng)成為了事實，它極大地減少了執(zhí)行異步任務(wù)和操作DOM所需要的代碼數(shù)量。新項目AQuery想要為Android開發(fā)者提供同樣的功能2014-05-05
最近做一個報表頁面顯示位置配置的界面,剛開始時用的是多個checkbox,選擇其中需要的報表即可。后來隨著業(yè)務(wù)變復(fù)雜，需要使用兩個select,選擇其中需要的到右邊select，然后提交到數(shù)據(jù)庫2013-10-10
通過jquery獲取ul中第一個li的屬性，當(dāng)加載列表時，默認(rèn)希望選中第一條，下面是具體的實現(xiàn)代碼2014-11-11
Juqery Html(),append()等方法的Bug解決方法
標(biāo)題中說是jquery中的Bug，只是個人這么認(rèn)為，先申明一下！2010-12-12