JQuery滑动
在JavaScript的流行框架JQuery之中,有一个滑动类型的效果,这个效果是经常用到的,比如在360浏览器或者火狐浏览器之中,关于换肤或者天气的更改地址时候都需要用到这个滑动效果。
在这里有三种情况,第一种是点击后显示出来一个页面,但是缩不回去,第二个是可以缩回去,但是点击不能打开,我们用的经常都是第三种,就是点击按钮的时候可以打开,不需要的时候点击又可以缩回去。
第一种情况slideDown:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#open").click(function(){ $("#page").slideDown(2000); }); }); </script>
<style type="text/css"> #page,#open { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px green; } #page { height:100px; display:none; line-height:100px; opacity:0.7; } </style> </head> <body> <div id="open">点我打开</div> <div id="page">欢迎打开页面</div> </body> </html>
第二种情况slideUp:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#open").click(function(){ $("#page").slideUp("2000"); }); }); </script> <style type="text/css"> #page,#open { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px green; } #page { height:100px; line-height:100px; opacity:0.7; } </style> </head> <body> <div id="open">点我收回页面</div> <div id="page">如果你点击了我就要回去了!</div> </body> </html>
第三种情况slideToggle:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#open").click(function(){ $("#page").slideToggle("2000"); }); }); </script> <style type="text/css"> #page,#open { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px green; } #page { height:100px; line-height:100px; display:none; } </style> </head> <body> <div id="open">点击,显示/隐藏</div> <div id="page">Hello world!</div> </body> </html>