我们常常能看到显示屏上字体的滚动以及手机弹幕等，下面所示代码就是一个简易的文字跑马灯的效果：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>跑马灯效果</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

            font-size: 16px;

        }

        #wrap {

            width: 1000px;

            margin: 20px auto;

            border: 2px solid #51C9F1;

            white-space: nowrap;

            overflow: hidden;

            padding: 10px;

            color: gold;

            background: mediumpurple;

        }

        #wrap div {

            display: inline-block;

            font-size: 20px;

        }

        #wrap span {

            font-size: 20px;

            color: yellow;

        }

    </style>

</head>

<body>

<div id="wrap">

    <div id="first">

        <span>华晨宇</span>—— 没有人规定，一定要在什么年龄干什么事情，只要你想，随时都可以，不用太在意别人的看法！

    </div>

    <div id="last">

        <span>华晨宇</span>—— 就是我为什么说孤独的人是强大的，孤独的人是不会去在意外面的世界的。

        就是你自己想的什么东西，就直接说。 但是我还是一个前提，就是你说出来的东西一定要是建立

        在一个善良的基础上的。说什么的时候你可以去想一想，这句话说完之后会不会伤害到他。但如果

        你觉得说完这句话是在帮助这个人，你可以说。如果你只是凭自己的意气用事，就觉得我现在很不爽，

        我说出来了。但是说完这句话是纯只是伤害他的话，其实你跟他们就没区别了。

    </div>

</div>

<script type="text/javascript">

    (function () {

        var wrap = document.getElementById('wrap'), first = document.getElementById('first'); //获取标签

        var timer = window.setInterval(move, 5);

        wrap.onmouseover = function () {

            window.clearInterval(timer);

        };

        wrap.onmouseout = function () {

            timer = window.setInterval(move, 5);

        };

        function move() {

            wrap.scrollLeft++;

            if (wrap.scrollLeft >= first.scrollWidth) {

                wrap.scrollLeft = 0;

            }

        }

    })();

</script>

</body>

</html>

JavaScript小实例-文字跑马灯效果的更多相关文章

  1. Android开发：文本控件详解——TextView（二）文字跑马灯效果实现

    一.需要使用的属性: 1.android:ellipsize 作用:若文字过长,控制该控件如何显示. 对于同样的文字“Android开发:文本控件详解——TextView(二)文字跑马灯效果实现”,不 ...

  2. 用jQuery实现参数自定义的文字跑马灯效果

    一,明确需求 基本需求:最近在工作中接到一个新需求,简单来说就是实现一行文字从右到左跑马灯的效果,并且以固定的时间间隔进行循环. 原本这是一个很容易实现的需求,但是难点是要求很多参数得是用户可自行设置 ...

  3. 实现一个微信小程序组件：文字跑马灯效果

    marquee.json { "component": true, "usingComponents": {} } marquee.wxml <!--co ...

  4. JavaScript小实例-文本循环变色效果

    在现实生活中我们常常看到文字循环变色的效果,此效果不仅能让人们印象深刻,还提高了美观度,代码及注释如下: <!DOCTYPE html> <html> <head> ...

  5. vue文字跑马灯效果

    https://cdn.bootcss.com/jQuery.Marquee/1.5.0/jquery.marquee.js 兼容vue $("#demo4").marquee({ ...

  6. VUE之文字跑马灯效果

    VUE之文字跑马灯效果 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. [转]实现文字跑马灯效果，scrolling text from right to left

    <div> <marquee direction="left" behavior="scroll" scrollamount="10 ...

  8. VUE小案例--跑马灯效果

    自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...

  9. js文字跑马灯

    实现文字跑马灯效果,主要控制scrollLeft. 效果图如下 代码如下 <html> <head> <script type="text/javascript ...

随机推荐

  1. Pytest---yield

    场景:你已经可以将测试方法前要执行的或依赖的解决了,测试 方法后销毁清除数据的要如何进行呢?范围是模块级别的.类似 setupClass 解决:通过在同一模块中加入 yield关键字,yield是调用 ...

  2. opensns的URL模式

    URL模式 如果我们直接访问入口文件的话,由于URL中没有模块.控制器和操作,因此系统会访问默认模块(Home)下面的默认控制器(Index)的默认操作(index),因此下面的访问是等效的: htt ...

  3. swat - 基于web的samba管理工具

    总览 swat [ -s smb config file ] [ -a ] 描述 此程序是 samba 套件的一部分. swat 允许 samba 管理员通过web浏览器配置复杂的 smb.conf ...

  4. Stm32CubeMX5 配置 STM32的串口DMA接受方式 --- 基于 stm32f051k8u6

     实现的功能: 使用MDA方式把串口接受的数据在发送给串口(当然也可以做其他解析控制使用) 1. 先初始化 时钟使用外部的晶振配置系统时钟为48Mhz 2. 串口参数配置 3. 使能中断 4. 配置串 ...

  5. Spring Cloud服务保护

    微服务虽然解决了传统单体式应用各个模块之间强耦合的缺点,但同时也引出了新问题,由于微服务各个服务之间是独立部署的,并且一般情况下一个服务往往会依赖多个其他服务,并且服务之间的调用更多的是依赖不稳定的网 ...

  6. java反射技术主要实现类有哪些，作用分别是什么

    Java反射技术主要实现类有哪些,作用分别是什么? 在JDK中,主要由以下类来实现Java反射机制,这些类都位于java.lang.reflect包中 1)Class类:代表一个类 2)Field 类 ...

  7. QList和QVector等容器的区别：(转)

    源地址:https://blog.csdn.net/qq_33266987/article/details/53333373 Qlist.QVector 与 list.vector似乎不太类似: li ...

  8. springBoot框架在idea中创建流程 同时存在一个项目中

    1.新建普通maven工程 2.在父级pom中按需修改 3.删除父级src目录 4.创建公共模块common,里面只有service接口和实体类 5.构建微服务模块,provider 6.引用Zook ...

  9. leetcood学习笔记-20

    python字符串与列表的相互转换   学习内容: 1.字符串转列表 2.列表转字符串 1. 字符串转列表 str1 = "hi hello world" print(str1.s ...

  10. SQL SELECT TOP, LIMIT, ROWNUM

    SQL SELECT TOP, LIMIT, ROWNUM SQL SELECT TOP 子句 SELECT TOP 子句用于指定要返回的记录数量. SELECT TOP子句在包含数千条记录的大型表上 ...