js具有跟随弹性效果的网页右下角窗口代码
本章节分享一段代码实例,它实现了网页右下角窗口弹性跟随作用。
下面就给出代码,并且进行以下详细的分析,代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> html,body{ height:2000px; } #antzone{ width:200px; height:150px; background:#c0c0c0; } </style> <script> function scroll(p){ var d = document, w = window, o = d.getElementById(p.id), ie6 = /msie 6/i.test(navigator.userAgent); if(o){ o.style.cssText +=";position:" +(p.f&&!ie6?'fixed':'absolute') +";"+(p.l?'left':"right")+":0;" +(p.t!=undefined?'top:'+p.t+'px':'bottom:0'); if(!p.f||ie6){ -function(){ var t = 500, st = d.documentElement.scrollTop||d.body.scrollTop, c; c = st - o.offsetTop + (p.t!=undefined?p.t:(w.innerHeight||d.documentElement.clientHeight)-o.offsetHeight); c!=0&&(o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0?-1:1) + 'px',t=10); setTimeout(arguments.callee,t) }() } } } window.onload=function(){ scroll({ id:'antzone' }) } </script> </head> <body> <div id="antzone"></div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).function scroll(p){},此函数实现了各种准备工作,参数是一个对象,根据下面的代码可以推断这个对象具有多个属性:
id:浮动对象的id。
r:右边距(窗口右边距,不写为靠左浮动)。
l:左边距(距离父级对象的左边距) “r”和“l”只能有其中一个参数。
t:上边距(默认贴着底边,0是贴着顶边)。
f:1表示固定(不写或者0表示滚动)。
(2).var d = document,将document对象引用赋值给变量d,是不是可以减少很多代码量。
(3).w = window,和上面是同样的道理。
(4).o = d.getElementById(p.id),获取指定id值的元素对象。
(5).ie6 = /msie 6/i.test(navigator.userAgent),返回一个布尔值,用来说明当前浏览器是不是IE6浏览器。
(6).if(o){},判断对象是否存在。
(7).o.style.cssText +=";position:"
+(p.f&&!ie6?'fixed':'absolute')
+";"+(p.l?'left':"right")+":0;"
+(p.t!=undefined?'top:'+p.t+'px':'bottom:0');上面的代码是根据条件组合成一个css语句。
;position前面加分好是为了防止css+o.style.cssText这样形式连接的时候会导致错误的情况。
(p.f&&!ie6?'fixed':'absolute')这一句表示,如果要将窗口固定且不是ie6浏览器,那么定位方式是fixed,否则就使用absolute.(p.l?'left':"right")+":0;"判断窗口是在左边还是右边,并设置left或者right值为0
(p.t!=undefined?'top:'+p.t+'px':'bottom:0'),是否规定窗口的top属性值,并进行相应的设置。
(8).if(!p.f||ie6),判断是否不是或者或者是IE6.
(9).-function(){}(),这是一个匿名自执行函数,我们最为常见的是(function(){})()这种形式,具体参阅相关阅读。
(10).var t = 500,生命一个变量并赋值为500,作为定时器函数延迟执行的时间。
(11).st = d.documentElement.scrollTop||d.body.scrollTop,获取向上滚动的尺寸,这么写是为了兼容性。
(12).c = st - o.offsetTop+ (p.t!=undefined?p.t : (w.innerHeight||d.documentElement.clientHeight)-o.offsetHeight),此段代码获取的最终结果就是元素底部距离窗口底部的距离。
(13).c!=0&&(o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0?-1:1) + 'px',t=10),这个语句其实使用&&运算符实现一个条件判断,如果c!=0,也就是div还没有滑到窗口底部,那么执行&&后面的代码,不断的调整top属性值,最终能够实现div能够滑到窗口的底部。并且将t的值设置为10,至于为什么后面会介绍。
(14).setTimeout(arguments.callee,t),整个代码是效率不够高的,因为定时器函数始终执行,当div元素滑到底部的时候,t的值为500,也就是时间间隔边长,能够那么定时器函数的执行频率也就降低了,那么浏览器压力就降低了,当拖动滚动条的时候,那么就将其调整为10,开始真正的滑动操作。
二.相关阅读:
(1).test()可以参阅正则表达式test()函数一章节。
(2).cssText可以参阅style.cssText一章节。
(3).d.documentElement.scrollTop||d.body.scrollTop可以参阅document.documentElement.scrollTop浏览器兼容一章节。
(4).offsetTop可以参阅js offsetTop一章节。
(5).小括号的作用可以参阅js中小括号()的用法详解一章节。
(6).innerHeight可以参阅innerheight一章节。
(7).clientHeight可以参阅clientHeight一章节。
(8).offsetHeight可以参阅js offsetHeight一章节。
(9).Math.abs()可以参阅javascript Math.abs()一章节。
(10).Math.ceil()可以参阅javascript Math.ceil()一章节。
(11).setTimeout()可以参阅setTimeout()一章节。