Le défilement transparent est un effet spécial qui est souvent utilisé dans les projets. Il existe également de nombreux exemples de codes sur Internet. Ici, je partage avec vous un code relativement simple et pratique avec une bonne compatibilité. Veuillez l'étudier attentivement.
Code html:
La copie de code est la suivante:
<< / span> html>
<< / span> head lang = "en">
<< / span> meta charset = "utf-8">
<< / span> Title> Scroll sans couture </ </span> Title>
<< / span> script src = "js / 0010.js"> </ </span> script>
<< / span> lien rel = "Stylesheet" type = "text / css" href = "css / 0010.css" />
</ </pan> tête>
<< / span> corps>
<< / span> a href = "javascript:"> marcher à gauche </ </span> a>
<< / span> a href = "javascript:"> marcher à droite </ </span> a>
<< / span> div id = "div1">
<< / span> ul>
<< / span> li> << / span> img src = "image / 1.jpg"> </ </span> li>
<< / span> li> << / span> img src = "image / 2.jpg"> </ </span> li>
<< / span> li> << / span> img src = "image / 3.jpg"> </ </span> li>
<< / span> li> << / span> img src = "image / 4.jpg"> </ </span> li>
</ </pan> ul>
</ </pan> div>
</ </pan> corps>
</ </pan> html>
Code CSS
La copie de code est la suivante:
* {
marge: 0;
rembourrage: 0;
}
# div1 {
débordement: caché;
Contexte: bleu;
Position: relative;
Largeur: 600px;
hauteur: 150px;
marge: 100px auto;
}
# div1 ul {
Position: absolue;
gauche: 0px;
En haut: 0px;
Style de liste: aucun;
}
# div1 ul li {
flottant: à gauche;
}
# div1 ul li img {
Largeur: 150px;
hauteur: 150px;
}
js: code
La copie de code est la suivante:
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ôlez la vitesse et la direction de défilement
oul.innerhtml = oul.innerhtml + oul.innerhtml;
oul.style.width = ali [0] .offsetWidth * ali.length + 'px';
timer = setInterval (move, 30);
odiv.onmouseOver = function () {// souris en provisoire
ClearInterval (temporisateur);
};
odiv.onmouseout = function () {// 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 () {// Picture de défilement
if (oul.offsetleft <-oul.offsetwidth / 2) {
oul.style.left = 0;
}
if (oul.offsetleft> 0) {
oul.style.left = -oul.offsetwidth / 2 + 'px';
}
oul.style.left = oul.offsetleft + vitesse + 'px';
}
}
L'effet n'est-il pas très bon?