Maison  >  Article  >  interface Web  >  Comment obtenir un défilement transparent de la liste de textes en js ?

Comment obtenir un défilement transparent de la liste de textes en js ?

零下一度
零下一度original
2017-06-27 15:36:101628parcourir

Cet article présente principalement js pour réaliser l'effet de défilement transparent de la liste de textes, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple de cet article partage avec tout le monde l'effet de défilement transparent de js. liste de textes. Le code spécifique pour le défilement est pour votre référence. Le contenu spécifique est le suivant

Code HTML :


<p id="rule">
        <p class="list" id="list">
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
        </p>
   <p class="list2" id="list2"></p>
</p>

JavaScript. code


var speed=50;
var list=document.getElementById(&#39;list&#39;);
var list2=document.getElementById(&#39;list2&#39;);
var rule=document.getElementById(&#39;rule&#39;);
list2.innerHTML=list.innerHTML;
function Marquee(){
  if(list2.offsetTop-rule.scrollTop<=0)
    rule.scrollTop-=list.offsetHeight;
  else{
    rule.scrollTop++;
  }
}
var MyMar=setInterval(Marquee,speed);
rule.onmouseover=function() {clearInterval(MyMar)}
rule.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn