Heim >Web-Frontend >js-Tutorial >JavaScript implementiert eine Vollbild-Bildlauffunktion
In diesem Artikel wird hauptsächlich die durch natives Javascript implementierte Vollbild-Bildlauffunktion vorgestellt, die Implementierungstechniken im Zusammenhang mit der Reaktion auf Javascript-Ereignisse und den dynamischen Betrieb von Seitenelementattributen umfasst. Ich hoffe, dass sie allen helfen können 🎜>
Prinzip:
1. Berechnen Sie die Höhe des aktuellen Browserbildschirms und die Höhe des Inhalts, der bei jedem Umblättern angezeigt wird die Bildschirmhöhe 2. Für die Maus Überwachen Sie das Scrollrad-Ereignis und achten Sie auf die Browserkompatibilitätsprobleme des Scrollrad-Ereignisses. Kommen wir ohne weitere Umschweife direkt zum CodeHTML-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>Verwandte Empfehlungen:
jQuery-Plug-in fullPage.js, um einen Vollbild-Scrolleffekt zu erzielen
Erzielen Sie einen Vollbild-Scrolling-Effekt basierend auf jquery_javascript-Fähigkeiten
jquery, um einen Vollbild-Scrolling_jquery zu erzielen
Das obige ist der detaillierte Inhalt vonJavaScript implementiert eine Vollbild-Bildlauffunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!