Heim  >  Artikel  >  Web-Frontend  >  Ausführliche Erläuterung der durch natives JavaScript implementierten Vollbild-Bildlauffunktion

Ausführliche Erläuterung der durch natives JavaScript implementierten Vollbild-Bildlauffunktion

巴扎黑
巴扎黑Original
2017-09-20 09:20:571594Durchsuche

In diesem Artikel wird hauptsächlich die von nativem Javascript implementierte Vollbild-Bildlauffunktion vorgestellt, einschließlich Implementierungstechniken im Zusammenhang mit der Reaktion auf Javascript-Ereignisse und dem dynamischen Betrieb von Seitenelementattributen.

Dieser Artikel beschreibt die Implementierung von nativem Javascript mit Beispielen für die Vollbild-Bildlauffunktion. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Prinzip:

1. Berechnen Sie die aktuelle Browser-Bildschirmhöhe und -Anzeige es jedes Mal, wenn Sie die Seite umblättern. Die Inhaltshöhe entspricht der Bildschirmhöhe

2. Überwachen Sie das Mausrad-Ereignis und achten Sie auf die Browserkompatibilitätsprobleme des Rad-Ereignisses.

Kommen wir ohne weitere Umschweife direkt zum Code

HTML-Code:


<p id="wrap">
  <p id="main" style="top: 0;">
    <p class="content num1">
      <img src="https://www.bing.com/az/hprichbg/rb/SingingRingingTree_ZH-CN12497946624_1920x1080.jpg" width="100%" height="100%">
    </p>
    <p class="content num2">
      <img src="https://www.bing.com/az/hprichbg/rb/ShenandoahNP_ZH-CN9981989975_1920x1080.jpg" width="100%" height="100%">
    </p>
    <p class="content num3">
      <img src="https://www.bing.com/az/hprichbg/rb/GareSaintLazare_ZH-CN6611772290_1920x1080.jpg" width="100%" height="100%">
    </p>
    <p class="content num4">
      <img src="https://www.bing.com/az/hprichbg/rb/FriendshipSquare_ZH-CN8820626148_1920x1080.jpg" width="100%" height="100%">
    </p>
  </p>
</p>

CSS-Code:


#wrap{overflow: hidden;width: 100%;}
#main{top: 0;position: relative;}
.content{width: 100%;margin: 0;height: 100%;}
.num1{background: #e8e8e8;}
.num2{background: pink;}
.num3{background: yellow;}
.num4{background: orange;}

JS-Code:


<script type="text/javascript">
  var wrap = document.getElementById("wrap");
  var pHeight = window.innerHeight;
  wrap.style.height = pHeight + "px";
  var content = $(".content");//懒得写获取类的原生js代码了,直接用了jquery,=。=
  content.height(pHeight);
  var startTime = 0, //开始翻屏时间
    endTime = 0,
    now = 0;
  if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){
    //for firefox;
    document.addEventListener("DOMMouseScroll",scrollFun,false);
  }
  else if (document.addEventListener) {
    document.addEventListener("mousewheel",scrollFun,false);
  }
  else if (document.attachEvent) {
    document.attachEvent("onmousewheel",scrollFun);
  }
  else{
    document.onmousewheel = scrollFun;
  }
  //滚动事件处理函数
  function scrollFun(event){
      startTime = new Date().getTime();
      var delta = event.detail || (-event.wheelDelta);
      if ((endTime - startTime) < -1000) {
        //1秒内执行一次翻页
        if (delta > 0 && parseInt(main.style.top) > -pHeight * ( content.length - 1)) { //向下翻页
          now += pHeight ;
          turnPage(now);
        }
        if (delta < 0 && parseInt(main.style.top) < 0) { //向上翻页
          now -= pHeight ;
          turnPage(now);
        }
        endTime = new Date().getTime();
      }
      else{
        event.preventDefault();
      }
  }
  //翻页函数
  function turnPage(now){
    $("#main").animate({top:(-now+&#39;px&#39;)},1000);
    //懒得写动画代码了,直接用了jquery,=。=
  }
</script>

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der durch natives JavaScript implementierten Vollbild-Bildlauffunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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