suchen

Heim  >  Artikel  >  Web-Frontend  >  JS implementiert einen bildschirmbasierten Scrolleffekt mit guten Javascript-Kompatibilitätskenntnissen

JS implementiert einen bildschirmbasierten Scrolleffekt mit guten Javascript-Kompatibilitätskenntnissen

WBOY
WBOYOriginal
2016-05-16 15:33:251034Durchsuche

Das Beispiel in diesem Artikel beschreibt die JS-Implementierung eines bildschirmbasierten Scrolleffekts mit guter Kompatibilität. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Die Parameter im Code werden wie folgt erklärt:

id Die ID des Inhalts, durch den Sie scrollen möchten
l Die Position der Abszisse wird nicht so weit rechts geschrieben
t Die Position, die Sie auf der Seite platzieren möchten, ist standardmäßig der untere Rand. 0 bedeutet der obere Rand
f 1 bedeutet fest, nicht geschrieben oder 0 bedeutet rollend.

Dieser Code wackelt beim Scrollen nicht und ändert sich mit der Bildschirmgröße

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-scroll-follow-src-style-codes/

Der spezifische Code lautet wie folgt: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>随屏滚动</title>
<style>
 html,body{
  padding:0;
  margin:0;
 }
</style>
</head>
<body>
 <div id="aa" style="width:200px;height:200px;background:#c0c0c0;" >我在随屏滚</div>
 <div id="bb" style="width:200px;height:200px;background:#c0c0c0;" >我静止不动</div>
 <div style="width:100%;height:500px;background:#000"></div>
 <div style="width:100%;height:500px;background:green"></div>
 <div style="width:100%;height:500px;background:red"></div>
</body>
</html>
<script>
function scroll(p){
 var d = document,dd = d.documentElement,db = d.body,w = window,o = d.getElementById(p.id),ie = /msie/i.test(navigator.userAgent),style;
  if(o){
  o.style.cssText +=";position:"+(p.f&&!ie&#63;'fixed':'absolute')+";"+(p.l==undefined&#63;'right:0;':'left:'+p.l+'px;')+(p.t!=undefined&#63;'top:'+p.t+'px':'bottom:0');
   if(p.f&&ie){
   o.style.cssText +=';left:expression(body.scrollLeft + '+(p.l==undefined&#63;db.clientWidth-o.offsetWidth:p.l)+' + "px");top:expression(body.scrollTop +'+(p.t==undefined&#63;db.clientHeight-o.offsetHeight:p.t)+'+ "px" );'
    db.style.cssText +=";background-image:url(about:blank);background-attachment:fixed;"
   }else{
    if(!p.f){
     w.onresize = w.onscroll = function(){
      var timer,timer1;
      return function(){
       if(timer)
        clearTimeout(timer);
       timer = setTimeout(function(){
        timer1 = setInterval(function(){
         var st = db.scrollTop,c;
         c = st - o.offsetTop + (p.t!=undefined&#63;p.t:(w.innerHeight||db.clientHeight)-o.offsetHeight);
         if(c!=0){
          o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0&#63;-1:1) + 'px';
         }else{
          clearInterval(timer1);  
         }
        },10)
       },100)//控制滚动的频率越大频率越慢
      }
     }()
    }
   }
  } 
 }
 scroll({
  id:'aa'
 })
  scroll({
  id:'bb',
  l:0,
  t:200,
  f:1
  })
</script>

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：Detaillierte Erläuterung der Ereignisbehandlung in Javascript_Javascript-KenntnissenNächster Artikel：Detaillierte Erläuterung der Ereignisbehandlung in Javascript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen