jQuery层动画定位滑动效果的方法
更新时间:2015年04月30日 09:32:11 作者:休闲生活文化
这篇文章主要介绍了jQuery层动画定位滑动效果的方法,涉及jQuery中animate方法的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
多个datatable共存造成多个表格的checkbox都被选中
所以当有多个datatable 引用到一个页面中的时候,全选事件会匹配全部的datatable,所以造成全部多个表格的checkbox被都被选中2013-07-07jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
这篇文章主要介绍了jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可,文中通过实例代码给大家详细介绍,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件FusionCharts绘制的2D帕累托图效果,结合实例形式分析了jQuery使用FusionCharts插件载入xml数据及绘制2D帕累托图的具体实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
这篇文章主要介绍了jQuery绑定事件监听bind和移除事件监听unbind用法,结合实例形式详细分析了绑定事件监听bind和移除事件监听unbind的具体使用技巧与相关注意事项,需要的朋友可以参考下2016-01-01
最新评论