快捷導(dǎo)航

JS實(shí)現(xiàn)網(wǎng)頁上隨滾動(dòng)條滾動(dòng)的層效果代碼

更新時(shí)間：2015年11月04日 09:59:19 作者：企鵝

這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁上隨滾動(dòng)條滾動(dòng)的層效果代碼,涉及JavaScript頁面元素屬性的獲取、運(yùn)算及設(shè)置等操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)網(wǎng)頁上隨滾動(dòng)條滾動(dòng)的層效果代碼。分享給大家供大家參考，具體如下：

這款網(wǎng)頁上隨滾動(dòng)條滾動(dòng)層代碼，拖動(dòng)滾動(dòng)條即可看到效果，對聯(lián)廣告的代碼也都是基于此的，右側(cè)的浮動(dòng)層同樣是可以關(guān)閉的稍微加工，便可實(shí)現(xiàn)一個(gè)浮動(dòng)廣告的代碼，運(yùn)行一下，先看效果吧。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-web-fixed-scroll-adv-codes/

具體代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隨滾動(dòng)條滾動(dòng)的層</title>
<style>
body{ margin:0; padding:0; font-size:12px; font-family:"宋體",Arial, Helvetica, sans-serif;}
div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,form{ margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
img{ border:0;}
ol,ul{list-style:none;}
a{ text-decoration:none; color:#fff;}
a:hover{ text-decoration:none;}
#scroll_div{ width:100px; height:400px; background:#990; }
#btn_close,#btn_gotop{ cursor:pointer;}
</style>
</head>
<body>
<div style=" width:1002px;height:42px;margin:0 auto; background-color:#060;">頭</div>
<div style="width:1002px; margin:0 auto; background-color:#f60;">
我們提供各類編程源碼、<br>素材、書籍教程、設(shè)計(jì)模板、<br>網(wǎng)頁特效代碼以及常用軟件下載等，<br>做有質(zhì)量的<br>學(xué)習(xí)型源碼下載站。
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div style=" width:1002px;height:95px;margin:0 auto; background-color:#060;">底</div>
<div id="scroll_div">
<span id="btn_close">關(guān)閉</span><br />
<span id="btn_gotop">返回頂部</span>
</div>
<script type="text/javascript">
var Bianyuan = {
 //添加事件2(DOM-保證this指向?qū)ο笫莖bj)
 addEvent : function(obj, type, fn){
  if (obj.attachEvent){
   obj['e'+type+fn] = fn;
   obj[type+fn] = function(){obj['e'+type+fn](window.event);}
   obj.attachEvent('on'+type, obj[type+fn]);
  }else{
   obj.addEventListener(type, fn, false);
  }
 },
 //獲取id元素
 $ : function(id){
  return document.getElementById(id);
 },
 //取得瀏覽器可視區(qū)size
 getBrowserSize : function(){
  var pageWidth = window.innerWidth,
   pageHeight = window.innerHeight;
  if (typeof pageWidth != "number"){
   if (document.compatMode == "CSS1Compat"){
    pageWidth = document.documentElement.clientWidth;
    pageHeight = document.documentElement.clientHeight;
   } else{
    pageWidth = document.body.clientWidth;
    pageWidth = document.body.clientHeight;
   }
  }
  //ie減去17滾動(dòng)條寬度
  if(!window.ActiveXObject){
   pageWidth -= 17;
  }
  return {
   width : pageWidth,
   height : pageHeight
  }
 },
 //獲取滾動(dòng)條高度
 getPageScroll : function(){ 
  var yScroll; 
  if (self.pageYOffset) { 
   yScroll = self.pageYOffset; 
  } else if (document.documentElement && document.documentElement.scrollTop){ 
   yScroll = document.documentElement.scrollTop; 
  } else if (document.body) { 
   yScroll = document.body.scrollTop; 
  } 
  return yScroll; 
 }
}
function scrollBar(scrollId, dir, headHeight, footHeight, areaWidth, o){
 //滾動(dòng)框?qū)捀?
 var scrollBar = Bianyuan.$(scrollId),
  barWidth = scrollBar.offsetWidth,
  barHeight = scrollBar.offsetHeight;
 //可視區(qū)寬高
 var pageWidth = Bianyuan.getBrowserSize().width,
  pageHeight = Bianyuan.getBrowserSize().height;
 //內(nèi)容寬高
 var widthMore = document.documentElement.scrollWidth,
  heightMore = document.body.scrollHeight||(document.documentElement.scrollHeight);  
 //最大寬高
 var maxWidth = Math.max(pageWidth, widthMore),
  maxHeight = Math.max(pageHeight, heightMore);
 scrollBar.style.position = 'absolute';
 //設(shè)置top--假設(shè)滾動(dòng)框高度小于整個(gè)頁面高度，如果大于直接將其隱藏
 if (maxHeight < (barHeight + footHeight + footHeight + 4)){
  scrollBar.style.display = 'none';
 }else{
  //不擋頂部---如果想改距頂高度，改下邊的第一個(gè)2值
  scrollBar.style.top = Bianyuan.getPageScroll() + headHeight + 2 + 'px';
  //不擋底部
  if ((heightMore - Bianyuan.getPageScroll() - barHeight) <= footHeight){
   scrollBar.style.top = heightMore - footHeight - barHeight - 2 + 'px';
  }
 }
 //無視主體內(nèi)容-左右
 if (dir == 'left' && areaWidth == 1){
  scrollBar.style.left = 2 + 'px';
 }else if (dir == 'right' && areaWidth == 1){
  scrollBar.style.left = maxWidth - barWidth - 2 + 'px';
 //根據(jù)主體內(nèi)容寬-左右
 }else if (dir == 'left' && areaWidth != 1){
  if (pageWidth >= (barWidth*2 + areaWidth + 4)){
   scrollBar.style.left = (pageWidth - areaWidth)/2 - barWidth - 2 + 'px';
  }else{
   scrollBar.style.left = 2 + 'px';
  }
 }else if (dir == 'right' && areaWidth != 1){
  if (pageWidth >= (barWidth*2 + areaWidth + 4)){
   scrollBar.style.left = (pageWidth - areaWidth)/2 + areaWidth + 2 + 'px';
  }else{
   scrollBar.style.left = maxWidth - barWidth - 2 + 'px';
  }
 }
 //關(guān)閉和返回頂部
 if (o){
  if (o.btnClose){
   var closeBtn = Bianyuan.$(o.btnClose);
   Bianyuan.addEvent(closeBtn, 'click', function(){
    scrollBar.style.display = 'none';
   })
  }
  if (o.goTop){
   var gotopBtn = Bianyuan.$(o.goTop);
   Bianyuan.addEvent(gotopBtn, 'click', function(){
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
   })
  }
 }
 //改變窗口大小或滾動(dòng)條滾動(dòng)
 resizeWindow(scrollId, dir, headHeight, footHeight, areaWidth, o);
}
function resizeWindow(scrollId, dir, headHeight, footHeight, areaWidth, o){
 window.onresize = function(){scrollBar(scrollId, dir, headHeight, footHeight, areaWidth, o);}
 window.onscroll = function(){scrollBar(scrollId, dir, headHeight, footHeight, areaWidth, o);}
}
</script>
<script type="text/javascript">
scrollBar("scroll_div", "right", 42, 95, 1002, {btnClose:"btn_close",goTop:"btn_gotop"});
</script>
</body>
</html>

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: