iTakeo

根据页面长度实现阅读进度条。

根据页面长度实现阅读进度条,具体看页面上的效果。

  1. ;(function(w,d){  
  2.     var dom = d.createElement(‘div’);  
  3.     dom.className = ‘scrollMove’;  
  4.     dom.style.cssText = ‘position: fixed; left: 0px; top: 0px; height: 7px; background: #f00808; z-index: 999999;box-shadow: 0px 0px 3px #999;width: 0;transition:width 0.3s ease-out;-moz-transition:width 0.3s ease-out;-webkit-transition:width 0.3s ease-out;’  
  5.     d.body.appendChild(dom);  
  6.     w.addEventListener(‘scroll’,function(){  
  7.         dom.style.width = Math.round((pageYOffset  / (d.body.offsetHeight – d.documentElement.clientHeight)) * 100) +’%’;  
  8.     },false);  
  9. })(window,document);  

2015/11/04 0 / /
标签:  暂无标签

验证码: 5 + 7 =

回到顶部