• 
       
       
       
        
       
       
       


          


    1. 狗万官网酒店 > 狗万官网下载 > JS落实简单的文字无缝上下滚动功能示例_javascript艺术

      JS落实简单的文字无缝上下滚动功能示例_javascript艺术

      来源: 2019-08-04 19:43 我来投稿 参与评论
      这篇文章主要介绍了JS落实简单的文字无缝上下滚动功能,构成实例形式分析了JavaScript构成时间函数动态操作页面元素属性变换实现文字滚动功能相关操作技能,要求的爱人可以参考下

      本文实例讲述了JS落实简单的文字无缝上下滚动功能。分享给大家供大家参考,实际如下:

      <!DOCTYPE html>
      <html>
      <head>
       <meta charset="utf-8">
       <meta name="author" content="" />
       <title>文字列表无缝滚动代码</title>
       <style type="text/css">
        *{
         margin:0px;
         padding:0px;
         border:0px;
        }
        body{font-size:12px}
        #demo{
         overflow:hidden;
         height:80px;
         width:280px;
         margin:90px auto;
         position:relative;
        }
        #demo1{
         height:auto;
         text-align:left;
        }
        #demo2{
         height:auto;
         text-align:left;
        }
        #demo1 li{
         list-style-type:none;
         height:22px;
         text-align:left;
         text-indent:15px;
        }
        #demo2 li{
         list-style-type:none;
         height:22px;
         text-align:left;
         text-indent:15px;
        }
       </style>
      </head>
      <body>
      <div id="demo">
       <ul id="demo1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
       </ul>
       <div id="demo2"></div>
      </div>
      <script type="text/javascript">
       var speed=40
        // 提高滚动
        var demo=document.getElementById("demo");
        var demo2=document.getElementById("demo2");
        var demo1=document.getElementById("demo1");
        demo2.innerHTML=demo1.innerHTML
        function Marquee(){
         if(demo.scrollTop>=demo1.offsetHeight){
          demo.scrollTop=0;
         }
         else{
          demo.scrollTop=demo.scrollTop+1;
         }
        }
        var MyMar=setInterval(Marquee,speed)
        demo.onmouseover=function(){clearInterval(MyMar)}
        demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
       //落后滚动
       // demo2.innerHTML=demo1.innerHTML
       // demo.scrollTop=demo.scrollHeight
       // function Marquee2(){
       //  if(demo1.offsetTop-demo.scrollTop>=0)
       //   demo.scrollTop+=demo2.offsetHeight
       //  else{
       //   demo.scrollTop--
       //  }
       // }
       // var MyMar2=setInterval(Marquee2,speed)
       // demo.onmouseover=function() {clearInterval(MyMar2)}
       // demo.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
      </script>
      </body>
      </html>
      
      

      感兴趣的爱人可以利用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun面试上述代码运行效果。

      更多关于JavaScript相关内容可查看本站专题:《JavaScript改装特效与艺术总结》、《JavaScript追寻算法技巧总结》、《JavaScript错误与调整技巧总结》、《JavaScript多少结构与做法技巧总结》、《JavaScript遍历算法与艺术总结》及《JavaScript和合学运算用法总结》

      瞩望本文所述对大学者JavaScript程序设计有所帮助。

      义务编辑:狗万官网酒店
       
       
      0% (0)
       
       
      0% (0)
      机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
      地名: 匿名?