집 > 기사 > 웹 프론트엔드 > JS는 웹페이지에서 스크롤바로 스크롤되는 레이어효과 코드를 구현합니다_javascript 기술

JS는 웹페이지에서 스크롤바로 스크롤되는 레이어효과 코드를 구현합니다_javascript 기술

WBOY원래의: 2016-05-16 15:33:531159검색

이 기사의 예에서는 웹페이지의 스크롤 바와 함께 스크롤되는 레이어 효과 코드의 JS 구현을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

이 웹페이지의 스크롤 레이어 코드는 스크롤 막대를 드래그하여 효과를 확인하는 데 사용됩니다. 오른쪽에 있는 플로팅 레이어도 약간의 처리를 통해 닫힐 수 있습니다. . 플로팅 광고용 코드를 구현하고 실행한 후 먼저 효과를 확인하세요.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

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>随滚动条滚动的层</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>素材、书籍教程、设计模板、<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>
<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">关闭</span><br />
<span id="btn_gotop">返回顶部</span>
</div>
<script type="text/javascript">
var Bianyuan = {
 //添加事件2(DOM-保证this指向对象是obj)
 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);
 },
 //取得浏览器可视区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滚动条宽度
  if(!window.ActiveXObject){
   pageWidth -= 17;
  }
  return {
   width : pageWidth,
   height : pageHeight
  }
 },
 //获取滚动条高度
 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){
 //滚动框宽高
 var scrollBar = Bianyuan.$(scrollId),
  barWidth = scrollBar.offsetWidth,
  barHeight = scrollBar.offsetHeight;
 //可视区宽高
 var pageWidth = Bianyuan.getBrowserSize().width,
  pageHeight = Bianyuan.getBrowserSize().height;
 //内容宽高
 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';
 //设置top--假设滚动框高度小于整个页面高度，如果大于直接将其隐藏
 if (maxHeight < (barHeight + footHeight + footHeight + 4)){
  scrollBar.style.display = 'none';
 }else{
  //不挡顶部---如果想改距顶高度，改下边的第一个2值
  scrollBar.style.top = Bianyuan.getPageScroll() + headHeight + 2 + 'px';
  //不挡底部
  if ((heightMore - Bianyuan.getPageScroll() - barHeight) <= footHeight){
   scrollBar.style.top = heightMore - footHeight - barHeight - 2 + 'px';
  }
 }
 //无视主体内容-左右
 if (dir == 'left' && areaWidth == 1){
  scrollBar.style.left = 2 + 'px';
 }else if (dir == 'right' && areaWidth == 1){
  scrollBar.style.left = maxWidth - barWidth - 2 + 'px';
 //根据主体内容宽-左右
 }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';
  }
 }
 //关闭和返回顶部
 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;
   })
  }
 }
 //改变窗口大小或滚动条滚动
 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 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：jQuery는 QQ 아바타 깜박임을 모방하는 텍스트 깜박임 프롬프트 코드를 구현합니다.다음 기사：jQuery는 QQ 아바타 깜박임을 모방하는 텍스트 깜박임 프롬프트 코드를 구현합니다.

JS는 웹페이지에서 스크롤바로 스크롤되는 레이어효과 코드를 구현합니다_javascript 기술

관련 기사