Les exemples de cet article partagent le code pour l'implémentation de l'effet de défilement transparent JS pour votre référence. Le contenu spécifique est le suivant
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tight> Scroll sans couture </title> <style> #warp {width: 1200px; hauteur: 300px; débordement: caché; marge: 100px auto 0; } #warp #con {width: 4000px; hauteur: 300px; débordement: caché; } #warp #con # box1 {float: Left; débordement: caché; } #warp #con # box2 {float: gauche; débordement: caché; } #warp img {float: Left; Largeur: 200px; hauteur: 300px; } </ style> </ head> <body> <div id = "warp"> <div id = "con"> <div id = "box1"> <img src = "images / meinv1.jpg"> <img src = "images / meinv2.jpg"> <img src = "images / meinv3.jpg"> <img src = "images / meinv3" <img src = "images / meinv5.jpg"> <img src = "images / meinv6.jpg"> </ div> <div id = "box2"> </div> </div> </div> <script> var warp = document.getElementById ('warp'); var con = document.getElementById ('con'); var box1 = document.getElementById ('box1'); var box2 = document.getElementById ('box2'); // box2.InnerHtml = box1.innerhtml; var timer1 = null, x = 0; fonction Scroll () {// Scroll Fonction Box2.InnerHtml = box1.innerhtml; timer1 = setInterval (function () {x ++; if (x> = box1.clientwidth) {x = 0; warp.scrollleft = x;} warp.scrollleft = x;}, 10)} scroll (); warp.onmouseEsenter = function () {ClearInterval (TIMER1); } warp.onMouseLeave = function () {Scroll (); } </ script> </ body> </html>L'idée principale de cet effet est que la largeur de la partie de contenu de l'image doit être beaucoup plus grande que la largeur de la zone à afficher, de sorte que la barre de défilement apparaît. Copiez le contenu du groupe précédent d'images pour le rendre sans couture sans couture dans l'effet. Veuillez vous référer au code pour plus de détails.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.