文字滚动效果

喜欢ヅ旅行 2024-04-20 10:50 80阅读 0赞

效果图：

![1136726-20190727135750286-484066540.png][]

代码如下：

<style style="text/css">
    .qimo8 {
          width: 730px; /*height:30px;*/ line-height: 30px; font-size: 14px; float:left; display:inline; overflow:hidden; }
    .qimo8 .qimo {
         /*width: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>

转载于:https://www.cnblogs.com/hool/p/11254811.html

[1136726-20190727135750286-484066540.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8274c4e001424589bced65e14b63d1c8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，80人围观）

还没有评论，来说两句吧...

相关阅读

相关文字滚动效果

果图： ![1136726-20190727135750286-484066540.png][] 代码如下： <style style="text/...

喜欢ヅ旅行/ 2024年04月20日 10:50/ 0 赞/ 81 阅读

相关动画效果之文字显示效果（逐行显示和滚动显示）

文字逐行显示效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

谁借莪１个温暖的怀抱￠/ 2024年04月19日 15:41/ 0 赞/ 58 阅读

相关 vue实现文字滚动播放效果

[原博地址][Link 1]，亲测此方法有效！！！效果图： ![在这里插入图片描述][2021042615573066.gif_pic_center] 实现方式：

忘是亡心i/ 2023年01月17日 02:26/ 0 赞/ 220 阅读

相关 Android TextView失去焦点后仍然实现文字滚动效果

一、前言有些时候`TextView`显示的长度不够需要实现滚动效果，有时候`layout`布局文件设置了一些属性后，能够实现滚动效果。但是`TextView`一旦失去焦

Bertha 。/ 2022年11月09日 11:21/ 0 赞/ 309 阅读

相关实现文字滚动效果

需求：滚动文字：每隔200ms 更新一次实现步骤： 1 、将第一个p标签的文字存储下来txt

浅浅的花香味﹌/ 2022年09月11日 13:14/ 0 赞/ 268 阅读

相关滚动触发的翻转式文字引用效果

[![f9a5d1cf-d90d-481f-bd03-b04b46ab4539.jpg][]][f9a5d1cf-d90d-481f-bd03-b04b46ab4539.jpg

左手的ㄟ右手/ 2022年08月12日 01:11/ 0 赞/ 157 阅读

相关 java多线程介绍及动画效果、文字滚动

多线程进程是资源分配的最小单位线程是cpu调度的最小单位 1、继承Thread 创建： A extends Thread 在A中实现run() 启动：利

港控/mmm°/ 2022年06月18日 01:50/ 0 赞/ 198 阅读

相关文字滚动

页面代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"

秒速五厘米/ 2022年04月03日 13:00/ 0 赞/ 270 阅读

相关文字滚动标签

Marquee是html的标签，所有的主流浏览器都能兼容，用于创建文字滚动。来介绍下标签的属性滚动方向 direction <!--滚动方向 directi

叁歲伎倆/ 2021年11月29日 16:08/ 0 赞/ 376 阅读

相关小程序文字循环滚动效果

> .js文件 Page({ data:{ text: null, marqueePace:

水深无声/ 2021年09月10日 08:22/ 0 赞/ 460 阅读