一. 基本方法
1、获取和设置元素的尺寸 width()、height() 获取元素width和height innerWidth()、innerHeight() 包括padding的width和height outerWidth()、outerHeight() 包括padding和border的width和height outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height
2、获取元素相对页面的绝对位置,相对于浏览器左上角 offset()
3、获取可视区高度,可视区就是一眼能看到的浏览器内容 $(window).height();
4、获取整个页面高度 $(document).height();
5、获取页面滚动距离 $(document).scrollTop(); //竖行滚动条位置,上方的网页内容 $(document).scrollLeft(); //正向滚动条左边的网页内容,不常用
6、页面滚动事件, $(window).scroll(function(){ ...... })
二. 例子
1. offset()绝对位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素绝对位置</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ var $pos = $('.pos'); //前面的$pos中,$没实际意义 var pos =$pos.offset(); var w = $pos.outerWidth(); var h = $pos.outerHeight(); //定义鼠标经过特殊盒子时,弹出框的样式在特殊盒子的旁边 $('.pop').css({left:pos.left+w,top:pos.top}); //绑定鼠标事件 $pos.mouseover(function(){ $('.pop').show(); }) $pos.mouseout(function(){ $('.pop').hide(); }) }) </script> <style type="text/css"> .con{ 600px; height:600px; margin:50px auto 0; } //定义盒子样式 .box{ 100px; height:100px; background-color:gold; margin-bottom:10px; } //定义特殊盒子的样式 .pos{ margin-left:500px; } //定义鼠标经过特殊盒子时,出来的弹出框 .pop{ 100px; height:100px; background-color:red; position:fixed; left:0; top:0; display:none; } </style> </head> <body> <div class="con"> <div class="box"></div> <div class="box"></div> <div class="box pos"></div> <div class="box"></div> </div> <div class="pop"> 提示信息! </div> </body> </html>
2. 置顶菜单例子,验证页面滚动事件这种方法
需求:网页上有一个菜单栏,位置在页面的200px处,想在拉动滚动条至200px时,固定这个菜单栏;当上拉小于200px时,这个菜单栏又回复自由。需要注意的是浏览器默认有8px的margin,所以实际是208px
关键点:
1. 使用scrollTop()来找到下拉距离,比如这里是200px, 当达到这个值时就固定这个菜单栏位置,可用样式中的position:fixed实现
2. jquery中的hide(),show()函数,当盒子样式中有display:none属性时,可以使用这两种函数来实现盒子的显示和隐藏。
3. 这里(.menu.pos)的作用是当置顶菜单盒子自由时,它表示的盒子隐藏;否则它就显示。作用是当置顶菜单固定时,会跳出原先的布局,使下面的盒子自动顶上去,会出现突然跳动的视觉效果。而(.menu.pos)的作用就是顶替原先置顶盒子元素的位置,解决突然跳动的问题。
4. totop类是为了在页面底部添加一个返回页面开头的链接,实现动画的慢慢移动到页面头部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>置顶菜单</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ $(window).scroll(function() { var nowTop = $(document).scrollTop(); if(nowTop>200){ $('.menu').css({ position:'fixed', left:'50%', top:0, marginLeft:-480 }); $('.menu_pos').show(); } else{ $('.menu').css({ position:'static', //static是默认值,表没定位 marginLeft:'auto' }); $('.menu_pos').hide(); } //这里控制什么时候出来回到页首的链接图片 if(nowTop>400){ $('.totop').fadeIn(); } else{ $('.totop').fadeOut(); } }); $('.totop').click(function() { $('html,body').animate({'scrollTop':0}); //固定写法,实现慢慢移动到页首 }); }) </script> <style type="text/css"> body{margin:0px;} .logo_bar{ 960px; height:200px; background-color:#f0f0f0; margin:0 auto; } .menu,.menu_pos{ 960px; height:50px; margin:0 auto; background-color:gold; text-align:center; line-height:50px; } .menu_pos{ display:none; } .down_con{ 960px; height:1800px; margin:0 auto; } .down_con p{ margin-top:100px; text-align:center; } .totop{ 50px; height:50px; background:url(images/up.png) center center no-repeat #000; border-radius:50%; position:fixed; right:50px; bottom:50px; display:none; //滚动条在页面上部时,链接箭头不显示 } </style> </head> <body> <div class="logo_bar">顶部logo</div> <div class="menu">置顶菜单</div> <div class="menu_pos"></div> <div class="down_con"> <p style="color:red">网站主内容</p> <p>网站主内容</p> <p>网站主内容</p> <p>网站主内容</p> <p>网站主内容</p> </div> <a href="javascript:;" class="totop"></a> </body> </html>