Effet de défilement intermittent et transparent (l'effet de l'enregistrement avec GIF n'est pas très bon, si vous êtes intéressé, vous pouvez baisser le code), le contenu spécifique est le suivant
Code:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tight> Scroll sans couture </title> <style> * {margin: 0; padding: 0;} .box {width: 500px; height: 400px; margin: 40px auto; background: #ccc; overflow: cachet;};} .block {position: relatif; largeur: 500px; hauteur: 400px; débordement: caché;} .Item {hauteur: 40px; fond: rouge; couleur: #fff; line-height: 40px; text-align: Center;} .Item: nth-child (2n) {background: # 000} </yled> </cript> function (json) {var objscroll = document.getElementyId (json.id); objscroll.scrolltop = 0;} else {objscroll.scrolltop ++; setInterval (function () {Scrolling (), 30);}} else {var timer; ClearInterval (Timer); window.onload = function () {// on: intermittent Scroll / Hauteur de défilement sans couture: Scrollup intermittent ({on: true, id: 'block'}); Scrollup ({id: 'Block2', hauteur: 120}); } </script></head><body> <div> <div id="block"> <div>1 Seamless scroll</div> <div>2 Seamless scroll</div> <div>3 Seamless scroll</div> <div>4 Seamless scroll</div> <div>5 Seamless scroll</div> <div>6 Seamless scroll</div> <div>7 Seamless scroll</div> <div> 8 Scroll sans couture </ div> <div> 9 Scroll sans couture </div> <div> 10 Scroll sans couture </div> <div> 11 Scroll sans couture </div> <div> 12 Scroll sans couture </div> <v> 13 Scroll sans couture </ Div> </ Div> </ Div> <Div> 15 Seamless Scroll </ Div> </ Div> <Div> 15 Seamless Scroll </ Div> </ Div> <Div> 15 Scroll SAVEL </ Div> </ Div> 15 Seamless Scroll </ Div> </ Div> 15 Seamless Scroll </ Div> </ Div> 15 Seamless Scroll </ Div> </ Div> 15 Seamless Scroll </ Div> </ Div> <Div> 15 Scroll SAVER id="block2"> <div>1 intermittent scroll</div> <div>1 intermittent scroll</div> <div>2 intermittent scroll</div> <div>3 intermittent scroll</div> <div>4 intermittent scroll</div> <div>5 intermittent scroll</div> <div>6 intermittent scroll</div> <div>7 intermittent scroll</div> <div>8 intermittent scroll</div> <div>9 intermittent scroll</div> <div>10 intermittent scroll</div> <div>11 intermittent scroll</div> <div>12 intermittent scroll</div> <div>13 intermittent scroll</div> <div>14 intermittent scroll</div> <div>15 intermittent scroll</div> </div> </div> </div> </ body> </html>Note:
1. Le bloc de boîte doit être le débordement et la masque de CSS: débordement: caché
2. Il existe deux fonctions: défilement intermittent / défilement sans couture
3. Copiez d'abord un morceau du même code et faites défiler parfaitement: le minuteur d'exécution continue d'augmenter la valeur de défilement. Lorsque la valeur de défilement est supérieure à la hauteur de la boîte, définissez ScrollTop sur 0 et recommencez. Un défilement intermittent est ajouté sur cette base, Settimeout est exécuté par intermittence et la hauteur spécifiée s'arrête lorsque ScrollTop arrive.
4. Question: setInterval (function () {Scrolling ()}, 30); Dans le code, il peut être exécuté en écrivant de cette façon, setInterval ('Scrolling ()', 30); Cela ne fonctionnera pas. Y a-t-il des conseils de grand maître? Quelle est la différence entre les deux? Quel est le mécanisme?
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.