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