suchen

Heim >Web-Frontend >js-Tutorial >Benutzerdefinierter Bildlaufleisteneffekt der Seite, implementiert durch JS_javascript-Kenntnisse

Benutzerdefinierter Bildlaufleisteneffekt der Seite, implementiert durch JS_javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:35:051914Durchsuche

Das Beispiel in diesem Artikel beschreibt den von JS implementierten benutzerdefinierten Bildlaufleisteneffekt der Seite. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier ist eine Demonstration des Bildlaufleisteneffekts, der auf einer Webseite verwendet wird. Mit Ausnahme der Aufwärts- und Abwärtspfeile ist die Bildlaufleiste im Grunde die gleiche wie bei einem normalen Browser und die Bildlaufleiste scrollt. Die HTML-Struktur ist sehr einfach: MainBox ist das äußere Div, Inhalt ist der Inhalt und das Bildlaufleisten-Div wird dynamisch von js generiert.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-web-zdy-scroll-style-codes/

Der spezifische Code lautet wie folgt: 

<!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 type="text/css">
*{ margin:0; padding:0;}
p{ height:1000px;}
#mainBox{ width:400px; height:500px; border:1px #bbb solid; position:relative; overflow:hidden; margin:50px auto;}
#content{ height:2500px; position:absolute; left:0; top:0; background:url(http://files.jb51.net/file_images/article/201510/20151026113716032.jpg) }
.scrollDiv{ width:18px; position:absolute; top:0; background:#666; border-radius:10px;}
</style>
</head>
<body>
<div id="mainBox">
 <div id="content"></div>
</div>
<p></p>
<script type="text/javascript">
var doc=document;
var _wheelData=-1;
var mainBox=doc.getElementById('mainBox');
function bind(obj,type,handler){
 var node=typeof obj=="string"&#63;$(obj):obj;
 if(node.addEventListener){
  node.addEventListener(type,handler,false);
 }else if(node.attachEvent){
  node.attachEvent('on'+type,handler);
 }else{
  node['on'+type]=handler;
 }
}
function mouseWheel(obj,handler){
 var node=typeof obj=="string"&#63;$(obj):obj;
  bind(node,'mousewheel',function(event){
   var data=-getWheelData(event);
   handler(data);
   if(document.all){
    window.event.returnValue=false;
   }else{
    event.preventDefault();
   }
  });
  //火狐
  bind(node,'DOMMouseScroll',function(event){
   var data=getWheelData(event);
   handler(data);
   event.preventDefault();
  });
  function getWheelData(event){
   var e=event||window.event;
   return e.wheelDelta&#63;e.wheelDelta:e.detail*40;
  }
}
function addScroll(){
 this.init.apply(this,arguments);
}
addScroll.prototype={
 init:function(mainBox,contentBox,className){
  var mainBox=doc.getElementById(mainBox);
  var contentBox=doc.getElementById(contentBox);
  var scrollDiv=this._createScroll(mainBox,className);
  this._resizeScorll(scrollDiv,mainBox,contentBox);
  this._tragScroll(scrollDiv,mainBox,contentBox);
  this._wheelChange(scrollDiv,mainBox,contentBox);
  this._clickScroll(scrollDiv,mainBox,contentBox);
 },
 //创建滚动条
 _createScroll:function(mainBox,className){
  var _scrollBox=doc.createElement('div')
  var _scroll=doc.createElement('div');
  var span=doc.createElement('span');
  _scrollBox.appendChild(_scroll);
  _scroll.appendChild(span);
  _scroll.className=className;
  mainBox.appendChild(_scrollBox);
  return _scroll;
 },
 //调整滚动条
 _resizeScorll:function(element,mainBox,contentBox){
  var p=element.parentNode;
  var conHeight=contentBox.offsetHeight;
  var _width=mainBox.clientWidth;
  var _height=mainBox.clientHeight;
  var _scrollWidth=element.offsetWidth;
  var _left=_width-_scrollWidth;
  p.style.width=_scrollWidth+"px";
  p.style.height=_height+"px";
  p.style.left=_left+"px";
  p.style.position="absolute";
  p.style.background="#ccc";
  contentBox.style.width=(mainBox.offsetWidth-_scrollWidth)+"px";
  var _scrollHeight=parseInt(_height*(_height/conHeight));
  if(_scrollHeight>=mainBox.clientHeight){
   element.parentNode.style.display="none";
  }
  element.style.height=_scrollHeight+"px";
 },
 //拖动滚动条
 _tragScroll:function(element,mainBox,contentBox){
  var mainHeight=mainBox.clientHeight;
  element.onmousedown=function(event){
   var _this=this;
   var _scrollTop=element.offsetTop;
   var e=event||window.event;
   var top=e.clientY;
   //this.onmousemove=scrollGo;
   document.onmousemove=scrollGo;
   document.onmouseup=function(event){
    this.onmousemove=null;
   }
   function scrollGo(event){
    var e=event||window.event;
    var _top=e.clientY;
    var _t=_top-top+_scrollTop;
    if(_t>(mainHeight-element.offsetHeight)){
     _t=mainHeight-element.offsetHeight;
    }
    if(_t<=0){
     _t=0;
    }
    element.style.top=_t+"px";
    contentBox.style.top=-_t*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";
    _wheelData=_t;
   }
  }
  element.onmouseover=function(){
   this.style.background="#444"; 
  }
  element.onmouseout=function(){
   this.style.background="#666"; 
  }
 },
 //鼠标滚轮滚动，滚动条滚动
 _wheelChange:function(element,mainBox,contentBox){
  var node=typeof mainBox=="string"&#63;$(mainBox):mainBox;
  var flag=0,rate=0,wheelFlag=0;
  if(node){
   mouseWheel(node,function(data){
    wheelFlag+=data;
    if(_wheelData>=0){
     flag=_wheelData;
     element.style.top=flag+"px";
     wheelFlag=_wheelData*12;
     _wheelData=-1;
    }else{
     flag=wheelFlag/12;
    }
    if(flag<=0){
     flag=0;
     wheelFlag=0;
    }
    if(flag>=(mainBox.offsetHeight-element.offsetHeight)){
     flag=(mainBox.clientHeight-element.offsetHeight);
     wheelFlag=(mainBox.clientHeight-element.offsetHeight)*12;
    }
    element.style.top=flag+"px";
    contentBox.style.top=-flag*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";
   });
  }
 },
 _clickScroll:function(element,mainBox,contentBox){
  var p=element.parentNode;
  p.onclick=function(event){
   var e=event||window.event;
   var t=e.target||e.srcElement;
   var sTop=document.documentElement.scrollTop>0&#63;document.documentElement.scrollTop:document.body.scrollTop;
   var top=mainBox.offsetTop;
   var _top=e.clientY+sTop-top-element.offsetHeight/2;
   if(_top<=0){
    _top=0;
   }
   if(_top>=(mainBox.clientHeight-element.offsetHeight)){
    _top=mainBox.clientHeight-element.offsetHeight;
   }
   if(t!=element){
    element.style.top=_top+"px";
    contentBox.style.top=-_top*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";
    _wheelData=_top;
   }
  }
 }
}
new addScroll('mainBox','content','scrollDiv');
</script>
</body>
</html>

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Grundlegende Verwendung boolescher Objekte in der JavaScript-Programmierung_GrundkenntnisseNächster Artikel：Grundlegende Verwendung boolescher Objekte in der JavaScript-Programmierung_Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen