suchen

Heim >Web-Frontend >js-Tutorial >JavaScript ermöglicht nahtloses Scrollen mit linken und rechten Control_Javascript-Fähigkeiten

JavaScript ermöglicht nahtloses Scrollen mit linken und rechten Control_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 16:22:431386Durchsuche

Nahtloses Scrollen ist ein Spezialeffekt, der häufig in Projekten verwendet wird. Was ich hier teile, ist ein relativ einfacher und praktischer Code mit guter Kompatibilität .

HTML-Code:

Code kopieren Der Code lautet wie folgt:

<html>
<head lang="en">
<meta charset="UTF-8">
<title>Nahtloses Scrollentitle>
<script src="js/0010.js">script>
<link rel="stylesheet" type="text/css" href="css/0010.css" />
head>
<body>
<a href="javascript:">Gehe nach linksa>
<a href="javascript:">Gehe nach rechtsa>
<div id="div1">
                                                                                                                                                                                                                                                                                                                                                                                                                                                           div>
body>
html>



CSS-Code


Code kopieren

Der Code lautet wie folgt: *{ Marge:0; Polsterung: 0; }
#div1{
Überlauf: versteckt;
Hintergrund: blau;
Position: relativ;
Breite: 600px;
Höhe: 150px;
Rand: 100 Pixel automatisch;
}
#div1 ul{
Position: absolut;
Links: 0px;
oben: 0px;
Listenstil: keiner;
}
#div1 ul li{
float: links;
}
#div1 ul li img{
Breite: 150 Pixel;
Höhe:150px;
}



js: Code


Code kopieren

Der Code lautet wie folgt:

window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var timer=null;
var speed=2;//Contrôler la vitesse et la direction du défilement
oUl.innerHTML=oUl.innerHTML oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length 'px';
Timer=setInterval(move,30);
oDiv.onmouseover=function(){//mouseover provisoire
         clearInterval(timer);
};
oDiv.onmouseout=function(){//Retirez la souris et continuez à faire défiler
        timer=setInterval(move,30);
>
Document.getElementsByTagName('a')[0].onclick=function(){
Vitesse=-2;
>
Document.getElementsByTagName('a')[1].onclick=function(){
Vitesse=2;
>
Fonction move(){//Défilement d'image
Si(oUl.offsetLeft<-oUl.offsetWidth/2){
              oUl.style.left=0;
>
Si(oUl.offsetLeft>0){
              oUl.style.left=-oUl.offsetWidth/2 'px';
>
oUl.style.left=oUl.offsetLeft vitesse 'px';
>
>

L'effet n'est-il pas génial ?

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：Javascript implementiert unendliche Select-Linkage-Menu_Javascript-FähigkeitenNächster Artikel：Javascript implementiert unendliche Select-Linkage-Menu_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen