Heim > Web-Frontend > js-Tutorial > js, um Text-Scrolling-Effekte zu erlangen_Javascript-Fähigkeiten

js, um Text-Scrolling-Effekte zu erlangen_Javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 15:12:21
Original
1727 Leute haben es durchsucht

Schauen Sie sich zunächst die grobe Darstellung an, da sie dynamisch ist und nicht auf der Seite angezeigt werden kann.

Der spezifische Implementierungscode lautet wie folgt:

1. Zuerst der CSS-Code:

<style type="text/css">
body,ul,li,a,p,div{padding:0px; margin:0px; font-size:14px;}
ul,li{list-style:none;}
a{ text-decoration:none; color:#333;}
 #demo{
    overflow:hidden; /*溢出的部分不显示*/
    width:290px;
    height:228px;/*一定要确切,避免demo1与demo2之间的距离过大*/
    padding:5px;
    margin:50px auto;
    }
#express li{
      list-style:none;
      font-size:14px;
      height:25px;
      margin:0px 5px;
      line-height:180%;/*行与行之间的距离*/
      letter-spacing:2px;/*字与字之间的距离*/
      border-bottom:1px dashed #ccc;
      cursor:pointer;
      }
</style>
Nach dem Login kopieren

2. Der Inhaltscode lautet wie folgt:

<div id="demo" >
  <div id="demo1" >
    <ul id="express">
      <li><a href="#">召开背街小巷综合整治工作调度会</a></li>
      <li><a href="#">平原街道加大出店经营整治</a></li>
      <li><a href="#">平原街道召开计生业务培训会</a></li>
       <li><a href="#">平原街道:干部进村入户宣传促征迁</a></li>
       <li><a href="#">平原街道:为返乡群众免费孕检</a></li>
      <li><a href="#">平原街道:狠抓春运道路交通安全</a></li>      
    </ul>
  </div>
  <div id="demo2"></div>
</div>
Nach dem Login kopieren

3. Der letzte ist der kritischste js-Code:

<script type="text/javascript">
  //获取id=demo,id=demo1,id=demo2的元素对象,并把id=demo1的内容赋值给id=demo2
  var demo=document.getElementById("demo");
  var demo1=document.getElementById("demo1");
  var demo2=document.getElementById("demo2");
  demo2.innerHTML=demo1.innerHTML;
  //给demo1,demo2加相同的高度
  demo1.style.height=demo.offsetHeight+"px";
  demo2.style.height=demo.offsetHeight+"px";
  //定时器,每隔50毫秒调用一次scrollup()函数,来实现文字的滚动
  var timer=window.setInterval("scrollup()",50);
  //定义函数
  function scrollup()
  {
    //如果demo滚上去的高度大于demo的高度,重新给demo赋值从0再开始滑动
    if(demo.scrollTop>=demo.offsetHeight)
    {
      demo.scrollTop=0;
    }else
    {
      demo.scrollTop++;
    }
  }
  //鼠标放上停止滚动,鼠标离开继续滚动
    demo.onmouseover=function(){
                  //清除定时器
                  clearInterval(timer);
                  }
    demo.onmouseout=function(){
                  //添加定时器
                  timer=window.setInterval("scrollup()",50);
                  }

</script>
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage