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:
<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 ?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
