Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der durch natives JavaScript implementierten Vollbild-Bildlauffunktion
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+'px')},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!