So implementieren Sie horizontales Scrollen und schwebende Navigation in js

Dieses Mal zeige ich Ihnen, wie Sie horizontales Scrollen und schwebende Navigation in js implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung von horizontalem Scrollen und schwebender Navigation in js, wie folgt Dies ist ein praktischer Fall, schauen wir uns ihn an.

Scrollen Sie horizontal, diese Methode ist die einfachste, die ich je gesehen habe.

#demo {
 background: #FFF;
 overflow: hidden;
 border: 1px dashed #CCC;
 width: 1170px;border: 1px solid red;
    margin-left: 10px;
}#demo img {border: 3px solid #F2F2F2;
}#indemo {float: left;width: 800%;
}#demo1 {float: left;
}#demo2 {float: left;
}

Code anzeigen

 <p id="demo" ><p id="indemo"><p id="demo1"><a href="#"><img src="../Images/jiameng/1.png" border="0" /></a><a href="#"><img src="../Images/jiameng/2.png" border="0" /></a><a href="#"><img src="../Images/jiameng/3.png" border="0" /></a><a href="#"><img src="../Images/jiameng/4.png" border="0" /></a><a href="#"><img src="../Images/jiameng/5.png" border="0" /></a><a href="#"><img src="../Images/jiameng/6.png" border="0" /></a><a href="#"><img src="../Images/jiameng/7.png" border="0" /></a><a href="#"><img src="../Images/jiameng/8.png" border="0" /></a></p><p id="demo2"></p>

Code anzeigen

<script>                var speed = 10;                var tab = document.getElementById("demo");                var tab1 = document.getElementById("demo1");                var tab2 = document.getElementById("demo2");
                tab2.innerHTML = tab1.innerHTML;                function Marquee() {                    if (tab2.offsetWidth - tab.scrollLeft <= 0) {
                        tab.scrollLeft -= tab1.offsetWidth;
                       
                    } else {
                        tab.scrollLeft += 2;
                     
                    }
                }                var MyMar = setInterval(Marquee, speed);
                tab.onmouseover = function () { clearInterval(MyMar); };
                tab.onmouseout = function () { MyMar = setInterval(Marquee, speed); };</script>

Reibungsloses Scrollen. Warum hat es nicht gescrollt, als ich es gestern verwendet habe? Dann habe ich den erhöhten Wert von tab.srollLeft geändert und es war in Ordnung.

2. Floating-Navigation:

<script type="text/javascript" src="http://misc.jjcdn.com/resource/js/waypoints.js"></script> 
<script type="text/javascript"> 
//浮动导航 waypoints.js $('#main-nav-holder').waypoint(function (event, direction) { 
$(this).parent().toggleClass('sticky', direction === "down"); 
event.stopPropagation(); 
}); 
</script>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf PHP Chinesische Website!

Empfohlene Lektüre:

HTML5-Animation zur Realisierung tanzender Regenschirme

Entwicklung von Nodejs-Ansichten und -Modellen

CSS3-Chat-Blasenstil

Das obige ist der detaillierte Inhalt vonSo implementieren Sie horizontales Scrollen und schwebende Navigation in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!