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()一章节。

回复

我来回复
  • 暂无回复内容