本文實例講述了jQuery層動畫定位滑動效果的方法。分享給大家供大家參考。具體實現方法如下：
<!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層動畫定位滑動</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>希望本文所述對大家的jQuery程序設計有所幫助。
新聞熱點
疑難解答
