JS remplace le chapiteau pour réaliser un défilement transparent des images
Peut-être que tout le monde a rencontré cela. Lorsque l'image fait défiler en marquee, lorsqu'elle est défilée jusqu'à la fin, elle revient au point de départ, plutôt que de faire défiler le texte de manière transparente. Ce qui suit est de réaliser un défilement transparent des images via JS.
Comprenons d'abord les attributs suivants:
InnerHTML: Définissez ou obtenez HTML situé dans les balises de démarrage et de fin de l'objet
ScrollHeight: obtient la hauteur de défilement de l'objet.
Scrollleft: définissez ou obtenez la distance entre la limite gauche de l'objet et l'extrémité la plus à gauche du contenu actuellement visible dans la fenêtre
ScrollTop: définit ou obtient la distance entre le haut de l'objet et le haut du contenu visible dans la fenêtre
ScrollWidth: Obtenez la largeur de défilement de l'objet
Offsetheight: obtient la hauteur de l'objet par rapport à la disposition ou à la coordonnée parent spécifiée par la propriété OffsetParent coordonnée parentale
Offsetleft: obtient la position gauche calculée de l'objet par rapport à la disposition ou aux coordonnées parentales spécifiées par la propriété offsetparent
Offsettop: obtient la position supérieure calculée de l'objet par rapport à la disposition ou aux coordonnées parentales spécifiées par la propriété Offsetop
OffsetWidth: obtient la largeur de l'objet par rapport à la disposition ou à la coordonnée parent spécifiée par la propriété OffsetParent coordonnée des parents.
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Les images font défiler haut de manière transparente
<style type = "text / css"> <! - # Demo {background: #fff; overflow: caché; bordure: 1px en pointillé #ccc; hauteur: 100px; text-adign: Center; float: Left;} # démo img {border: 3px solide # f2f2f2; affiche: bloc;} -> </ style> recrol id = "Demo1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif" /> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif" /> </a> href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif" /> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/ClEar_logo.gif" /> </a> <a href = "" "> <img" src = "// www.vevb.com/other/link/clear_logo.gif" /> </a> </ div> <div id = "Demo2"> </div> </div> <cript> <! - var speed = 10; // Plus le nombre est grand, plus la vitesse var var tab = document.getElementByidx_x ("Demo"); var tab1 = document.getElementByIdx_X ("Demo1"); var tab2 = document.getElementByIdx_X ("Demo2"); Tab2.InnerHtml = tab1.innerHtml; // Clone Demo1 en tant que Marquee de Démo2 MyMar = setInterval (Marquee, Speed); tab.OnMouseOver = function () {ClearInterval (MyMar)}; // Lorsque la souris est déplacée, le temporisateur est effacé pour atteindre le but de défiler l'onglet.Images défilent parfaitement vers le bas
<style type = "text / css"> <! - # Demo {background: #fff; overflow: caché; bordure: 1px en pointillé #ccc; hauteur: 100px; text-adign: Center; float: Left;} # démo img {border: 3px solid # f2f2f2; affiche: block;} -> </ style> scroll bowl id = "Demo1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif" /> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif" /> </a> href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif" /> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/ClEar_logo.gif" /> </a> <a href = "" "> <img" src = "// www.vevb.com/other/link/clear_logo.gif" /> </a> </ div> <div id = "Demo2"> </div> </div> <cript> <! - var speed = 10; // Plus le nombre est grand, plus la vitesse var var tab = document.getElementByidx_x ("Demo"); var tab1 = document.getElementByIdx_X ("Demo1"); var tab2 = document.getElementByIdx_X ("Demo2"); Tab2.InnerHtml = tab1.innerHtml; // Clone Demo1 est Demo2Tab.ScrollTop = Tab.ScrollHeightFunction Marquee () {if (tab1.offsettop-tab.scrolltop> = 0) // lors du défilement de la jonction de Demo1 et DeMo2 Tab.Scrolltop + = tab2 MyMar = setInterval (Marquee, Speed); tab.OnMouseOver = function () {ClearInterval (MyMar)}; // Lorsque la souris est déplacée, effacez le chronomètre pour atteindre le but de défiler l'onglet.Images défilent parfaitement à gauche
<style type = "text / css"> <! - # Demo {background: #fff; overflow: Hidden; border: 1px en pointillé #ccc; width: 500px;} # démo img {border: 3px solide # f2f2f2;} # indemo {float: Left; width: 800%;} # demo1 {float: float;} # # # demo2 {float:} # démo1 {float: fluth Left;} -> </ style> Scroll Left <div id = "Demo"> <div id = "indemo"> <div id = "Demo1"> <a href = "#"> <img src = "// www.vevb.com/other/link/ClEAR_LOGO.gif" /> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif" /> </a> <a href = "#"> <img src = "// www.vevb.com/others src = "// www.vevb.com/other/link/clear_logo.gif" /> </a> <a href = "#"> <img src = "// www.vevb.com/others src = "// www.vevb.com/other/link/clear_logo.gif" /> </a> <a href = "#"> <img src = "// www.vevb.com/others src = "// www.vevb.com/other/link/clear_logo.gif" /> </a> </ div> <div id = "Demo2"> </div> </div> <cript> <! - var speed = 10; // Plus le nombre est grand, plus la vitesse var var tab = document.getElementByIdx_X ("Demo"); var tab1 = document.getElementByIdx_X ("Demo1"); var tab1 = document.getElementByIdx_X ("Demo1"); var tab2 = document.getElementByidx_x; Marquee () {if (tab2.offsetwidth-tab.scrollleft <= 0) tab.scrollleft- = tab1.offsetwidthelse {tab.scrollleft ++;}} var mymar = setInterval (Marquee, Speed); tab.onMouseOver = function () {clearInterval) {MyMar = setInterval (Marquee, Speed)}; -> </ Script>Les images font défiler parfaitement vers la droite
<style type = "text / css"> <! - # Demo {background: #fff; overflow: Hidden; border: 1px en pointillé #ccc; width: 500px;} # démo img {border: 3px solide # f2f2f2;} # indemo {float: Left; width: 800%;} # demo1 {float: float;} # # # demo2 {float:} # démo1 {float: fluth Left;} -> </ style> Scroll à droite <div id = "Demo"> <div id = "indemo"> <div id = "Demo1"> <a href = "#"> <img src = "// www.vevb.com/others src = "// www.vevb.com/other/link/clear_logo.gif" /> </a> <a href = "#"> <img src = "// www.vevb.com/others src = "// www.vevb.com/other/link/clear_logo.gif" /> </a> <a href = "#"> <img src = "// www.vevb.com/others src = "// www.vevb.com/other/link/clear_logo.gif" /> </a> <a href = "#"> <img src = "// www.vevb.com/others src = "// www.vevb.com/other/link/clear_logo.gif" /> </a> </ div> <div id = "Demo2"> </div> </div> <cript> <! - var speed = 10; // Plus le nombre est grand, plus la vitesse var var tab = document.getElementByIdx_X ("Demo"); var tab1 = document.getElementByIdx_X ("Demo1"); var tab1 = document.getElementByIdx_X ("Demo1"); var tab2 = document.getElementByidx_x; Marquee () {if (tab.scrollleft <= 0) tab.scrollleft + = tab2.offsetwidthelSe {tab.scrollleft -;}} var myMar = setInterval (Marquee, Speed); Tab.onMouseOver = function () {ClearInterval (MyMar)}; Tab.onMououseOut = fonction () {MyMar = setInterval (Marquee, Speed)}; -> </ Script>Enfin, si quelqu'un veut avoir deux ensembles d'images de défilement sur une page, l'un à gauche et l'autre à droite, alors celui ci-dessous peut être utilisé. J'ai ajouté tout js à moi, et css
Faites défiler vers la droite
<div id = "Demoi"> <div id = "indemoi"> <div id = "Demoi1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clar_logo.gif" /> </a> <a href = "#"> <imgg " src = "// www.vevb.com/other/link/clear_logo.gif" /> </a> <a href = "#"> <img src = "// www.vevb.com/others src = "// www.vevb.com/other/link/clear_logo.gif" /> </a> <a href = "#"> <img src = "// www.vevb.com/others src = "// www.vevb.com/other/link/clear_logo.gif" /> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/cLear_logo.gif" /> </a> </ div> <div id = "Demoi2"> </ div> speedi = 10; // Plus le nombre est grand, plus la vitesse var var tabi = document.getElementByIdx_X ("Demoi"); var tabi1 = document.getElementByIdx_X ("Demoi1"); Marqueei () {if (tabi.scrollleft <= 0) tabi.scrollleft + = tabi2.offsetwidthelse {tabi.scrollleft -;}} var myMari = setInterval (Marqueei, Speedi); {MyMari = setInterval (marqueei, speedi)}; -> </ script>L'exemple simple ci-dessus de JS réalisant un défilement continu ininterrompu des images est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.