zoukankan      html  css  js  c++  java
  • 文字滚动效果

    效果图:

     

    代码如下:

    <style style="text/css">
    .qimo8 { width: 730px; /*height:30px;*/ line-height: 30px; font-size: 14px; float:left; display:inline; overflow:hidden; }
    .qimo8 .qimo {/*99999999px;*/ width:8000%; height:30px; }
    .qimo8 .qimo div { float:left; }
    .qimo8 .qimo ul { float:left; height:36px; overflow:hidden; zoom:1; }
    .qimo8 .qimo ul li { float:left; line-height:30px; list-style:none; }
    .qimo8 li a { margin-right:10px; color:#444444; }
    .mod02_ul li.gundong { height:360px; float:left; }
    .mod02_ul li.gundong a { height:30px; }
    .da_qydj {widht:244px;margin-bottom:10px;margin-top:10px;}
    .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
    .rdgz { font-size:14px; font-weight:bold; margin:0px 8px 0px 8px; padding-left:10px; }
    </style>
    <div id="demo" class="qimo8"> 
     <div class="qimo"> 
      <div id="demo1"> 
       <ul class="mod02_ul"> 
        <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
        <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
        <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
        <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
        <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
        <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
       </ul> 
      </div> 
      <div id="demo2"> 
       <ul class="mod02_ul"> 
        <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
        <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
        <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
        <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
        <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
        <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
       </ul> 
      </div> 
     </div> 
    </div>
    
    <script type="text/javascript">
    var demo = document.getElementById("demo");
    var demo1 = document.getElementById("demo1");
    var demo2 = document.getElementById("demo2");
    demo2.innerHTML=document.getElementById("demo1").innerHTML;
    function Marquee(){
    if(demo.scrollLeft-demo2.offsetWidth>=0){
     demo.scrollLeft-=demo1.offsetWidth;
    }
    else{
     demo.scrollLeft++;
    }
    }
    var myvar=setInterval(Marquee,30);
    demo.onmouseout=function (){myvar=setInterval(Marquee,30);}
    demo.onmouseover=function(){clearInterval(myvar);}
    </script>
  • 相关阅读:
    centos7安装sshd
    Linux搭建redist-cluster集群
    nginx离线安装,反向代理,负载均衡
    2017/12/31Java基础学习——数组输出の通过Arrays.toString()方法
    Java代码编写规范
    2017/12/27java基础学习——遇到的不懂问题
    2017/12/23Java基础学习——如何通过记事本编写代码,并通过dos界面运行Java源文件
    ZOJ3880 Demacia of the Ancients【序列处理+水题】
    ZOJ3869 Ace of Aces【序列处理】
    ZOJ3872 Beauty of Array【DP】
  • 原文地址:https://www.cnblogs.com/hool/p/11254811.html
Copyright © 2011-2022 走看看