jQuery層動(dòng)畫(huà)定位滑動(dòng)效果的方法
本文實(shí)例講述了jQuery層動(dòng)畫(huà)定位滑動(dòng)效果的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery層動(dòng)畫(huà)定位滑動(dòng)</title> <style type="text/css"> <!-- body { font-family: 'Signika Negative', sans-serif; } #head { z-index:10; position:absolute; top:0; left:0; width:100%; height:30px; border-color:#0055ff; border-width:0 0 10px 0; border-style:solid; background:#0088ff; } #head li{ list-style:none; float:left; display:block; height:30px; padding:0 10px; 0 10px; cursor:pointer; font-size:26px; } #head li:hover{ color:#ffffff; background:#0055ff; border-color:#0011ff; border-width:0 0 10px 0; border-style:solid; } #box { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; } #bg { position:absolute; top:0; left:0; width:100%; height:100%; overflow:visible; background:; } .cell { width:100%; height:100%; overflow:auto; } .list { position:absolute; top:50%; left:50%; width:800px; height:600px; margin:-300px 0 0 -400px; background:#0088ff; } #class_1 { position:absolute; top:0; left:0; background:; } #class_2 { position:absolute; top:0; left:100%; background:; } #class_3 { position:absolute; top:0; left:200%; background:; } #class_4 { position:absolute; top:100%; left:0; background:; } #class_5 { position:absolute; top:100%; left:100%; background:; } #class_6 { position:absolute; top:100%; left:200%; background:; } #class_7 { position:absolute; top:200%; left:0; background:; } #class_8 { position:absolute; top:200%; left:100%; background:; } #class_9 { position:absolute; top:200%; left:200%; background:; } --> </style> <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#l_01").click(function(){ $("#bg").stop().animate({top:0+"%",left:0+"%"},"slow"); }); $("#l_02").click(function(){ $("#bg").stop().animate({top:0+"%",left:-100+"%"},"slow"); }); $("#l_03").click(function(){ $("#bg").stop().animate({top:0+"%",left:-200+"%"},"slow"); }); $("#l_04").click(function(){ $("#bg").stop().animate({top:-100+"%",left:0+"%"},"slow"); }); $("#l_05").click(function(){ $("#bg").stop().animate({top:-100+"%",left:-100+"%"},"slow"); }); $("#l_06").click(function(){ $("#bg").stop().animate({top:-100+"%",left:-200+"%"},"slow"); }); $("#l_07").click(function(){ $("#bg").stop().animate({top:-200+"%",left:0+"%"},"slow"); }); $("#l_08").click(function(){ $("#bg").stop().animate({top:-200+"%",left:-100+"%"},"slow"); }); $("#l_09").click(function(){ $("#bg").stop().animate({top:-200+"%",left:-200+"%"},"slow"); }); }); </script> </head> <body> <div id="head"> <li id="l_01">1</li> <li id="l_02">2</li> <li id="l_03">3</li> <li id="l_04">4</li> <li id="l_05">5</li> <li id="l_06">6</li> <li id="l_07">7</li> <li id="l_08">8</li> <li id="l_09">9</li> </div> <div id="box"> <div id="bg"> <div class="cell" id="class_1"> <div class="list"></div> </div> <div class="cell" id="class_2"> <div class="list"></div> </div> <div class="cell" id="class_3"> <div class="list"></div> </div> <div class="cell" id="class_4"> <div class="list"></div> </div> <div class="cell" id="class_5"> <div class="list"></div> </div> <div class="cell" id="class_6"> <div class="list"></div> </div> <div class="cell" id="class_7"> <div class="list"></div> </div> <div class="cell" id="class_8"> <div class="list"></div> </div> <div class="cell" id="class_9"> <div class="list"></div> </div> </div> </div> </body> </html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- 用jQuery實(shí)現(xiàn)的智能隱藏、滑動(dòng)效果的返回頂部代碼
- jQuery animate(滑塊滑動(dòng)效果代碼)
- Jquery+CSS3實(shí)現(xiàn)一款簡(jiǎn)潔大氣帶滑動(dòng)效果的彈出層
- jQuery AnythingSlider滑動(dòng)效果插件
- jquery實(shí)現(xiàn)鼠標(biāo)拖拽滑動(dòng)效果來(lái)選擇數(shù)字的方法
- jquery左右全屏大尺寸多圖滑動(dòng)效果代碼分享
- jQuery實(shí)現(xiàn)圖片滑動(dòng)效果
- jQuery實(shí)現(xiàn)彈窗下底部頁(yè)面禁止滑動(dòng)效果
- jQuery滑動(dòng)效果實(shí)現(xiàn)方法分析
相關(guān)文章
jQuery判斷網(wǎng)頁(yè)是否已經(jīng)滾動(dòng)到瀏覽器底部的實(shí)現(xiàn)方法
最近做項(xiàng)目遇到這樣的需求,要求基于jq判斷網(wǎng)頁(yè)是否已經(jīng)滾動(dòng)到瀏覽器底部了,下面小編給大家分享實(shí)例代碼,需要的朋友參考下吧2017-10-10Jquery仿淘寶京東多條件篩選可自行結(jié)合ajax加載示例
仿淘寶京東多條件篩選可自行結(jié)合ajax加載,使用Jquery簡(jiǎn)單實(shí)現(xiàn),具體如下,喜歡的朋友可以參考下2013-08-08JQuery 網(wǎng)站換膚功能實(shí)現(xiàn)代碼
我第一次看到樣式表切換器是在A List Apart或者Simple Bits,那是兩個(gè)設(shè)計(jì)師最應(yīng)該去的網(wǎng)站。2009-11-11jQuery使用$.ajax進(jìn)行即時(shí)驗(yàn)證的方法
這篇文章主要介紹了jQuery使用$.ajax進(jìn)行即時(shí)驗(yàn)證的方法,較為詳細(xì)的分析了jQuery基于ajax實(shí)現(xiàn)前臺(tái)驗(yàn)證與后臺(tái)數(shù)據(jù)交互的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-12-12jquery讀寫(xiě)cookie操作實(shí)例分析
這篇文章主要介紹了jquery讀寫(xiě)cookie操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)cookie的常用讀寫(xiě)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12jQuery+CSS3實(shí)現(xiàn)點(diǎn)贊功能
本篇文章主要介紹了jQuery+CSS3實(shí)現(xiàn)點(diǎn)贊功能的示例代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03jQuery實(shí)現(xiàn)簡(jiǎn)單聊天室
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單聊天室,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02ui組件之input多選下拉實(shí)現(xiàn)方法(帶有搜索功能)
這篇文章主要介紹了ui組件之input多選下拉實(shí)現(xiàn)方法(帶有搜索功能)的相關(guān)資料,需要的朋友可以參考下2016-07-07