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

<!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. [已解决]报错: twisted 18.7.0 requires PyHamcrest>=1.9.0

    1.下载对应的Twisted,下载地址:https://www.lfd.uci.edu/~gohlke/pythonlibs/#twisted 2.通过Anaconda3的Anaconda Promp ...

  2. position: relative 和 position: absoution 的详解

    position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型 relative:生成相对定位的元素,相对于其正常位置进行定位. 对应下图的偏移 absolute: 生成绝对定位的元素 ...

  3. vue-cli 中多个组件共用一个mt-checklist

    // html <div v-if="dataList"> <mt-popup v-model="popupVisible" position ...

  4. Python之字符串搜索和替换

    简单直接使用 str.replace() text="zzy is a beautiful boy" print(text.replace("boy",&quo ...

  5. Ubuntu 14.04 Sublime Text3 Java编译运行(最简单的方法)

    Sublime,结果发现只能编译,无法直接运行,于是就在网上搜解决方法,发现大部分方法都是告诉你要进入Java.sublime-packag这个文件,然后再修改JavaC.sublime-build, ...

  6. pickle模块 和json模块

    pickle和json序列号 json模块是所有语言通用的,可以用来把一些数据转成字符串存储在文件中 import json l=[,,] with open('t3',mode='w',encodi ...

  7. linux php5.6 安装

    如果之前有安装其他版本PHP,请先卸载干净   配置yum源 追加CentOS 6.5的epel及remi源. # rpm -Uvh http://ftp.iij.ad.jp/pub/linux/fe ...

  8. 设置overflow:auto无效的解决办法

    做项目中经常要用到滚动条,有时候给div设置overflow无效. 遇到这样的问题,只需要在 F12 Elements面板检查一下要设置overflow的元素的宽高是否大于父级元素宽高. (overf ...

  9. 启动AutoCAD时自动加载.NET开发的DLL

    程序组织,建立名为*.bundle的文件夹,创建Contents子文件夹,并将dll,ico等文件放进Contents中,在*.bundle中创建PackageContents.xml文件,内容如下: ...

  10. Add cast to是什么意思

    eclipse中是强制类型转换的意思.