jQuery实现滑动方式上下左右滚动效果代码示例
介绍一下使用jQuery实现的div块上下左右以动画方式实现移动效果。
代码实例如下:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.gaodaima.com/" /> <title>搞代码</title> <style> #box{ width:200px; height:200px; } #first{ text-align:center; width:200px; height:200px; position:absolute; } #sec{ text-align:center; width:200px; height:200px; display:none; position:absolute; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.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 id="box"> <div id="first"> <p>搞代码一</p> <p>搞代码二</p> <p>搞代码三</p> <p>搞代码四</p> <p>搞代码五</p> </div> <div id="sec"> <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> |
上面的代码实现了动画移动效果，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(document).ready(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
（2）. $("#btn").unbind().click(function(){}）,首先解绑所有的事件处理函数（这里没有此操作），然后再注册click事件处理函数。
（3）.$("#first").hide()，先将不需要的元素隐藏。
（4）.$("#sec").css("left","-200px").animate({"left":"0px"},500).show(),首先瞬间将元素的left属性值设置为-200px，这个时候元素就看不到了，被左边缘隐藏，然后以动画的方式设置此元素显示出来。
原创文章，转载请注明： 转载自搞代码
本文链接地址: jQuery实现滑动方式上下左右滚动效果代码示例
微信 赏一包辣条吧~
支付宝 赏一听可乐吧~
发表评论