<!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 green;

            white-space: nowrap;

            overflow: hidden;

            padding: 10px;

            color: rgb(110, 244, 216);

            background: #1c1c51;

        }

        #wrap div {

            display: inline-block;

            font-size: 20px;

        }

        #wrap span {

            font-size: 20px;

            color: red;

        }

    </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>

JS实现跑马灯效果(鼠标滑入可暂停，离开继续跑)的更多相关文章

  1. android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习

    跑马灯效果 1.用过属性的方式实现跑马灯效果 属性:                  android:singleLine="true" 这个属性是设置TextView文本中文字 ...

  2. Android使用TextView实现跑马灯效果(自定义控件)

    对于一个长的TetxView 折行显示是一个很好的办法,另一种方法就是跑马灯显示(单行滚动) 1.折行显示的长TextView <LinearLayout xmlns:android=" ...

  3. JS实现跑马灯效果(向左，向上)

    <html> <head> <title>JS实现跑马灯效果</title> <style> * { font-size:12px; fon ...

  4. 微信小程序跑马灯效果--基于CSS3 animation 及 基于JS

    如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 基于CSS3主要代码实现 效果图: 视图模板wxml中: <view class=&qu ...

  5. JS写一个列表跑马灯效果--基于touchslide.js

    先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...

  6. js实现横向跑马灯效果

    首先我们需要一个html代码的框架如下: <div style="position: absolute; top: 0px; left: 168px; width: 100%; mar ...

  7. WPF 简易的跑马灯效果

    最近项目上要用到跑马灯的效果,和网上不太相同的是,网上大部分都是连续的,而我们要求的是不连续的. 也就是是,界面上就展示4项(展示项数可变),如果有7项要展示的话,则不断的在4个空格里左跳,当然,衔接 ...

  8. marquee标签实现跑马灯效果--无缝滚动

    今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果.但无意中发现了一个html标签——<marquee> ...

  9. android:ellipsize实现跑马灯效果总结（转）

      最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说 ...

随机推荐

  1. 大型情感类电视连续剧--Android高德之旅（2）地图类型

    总要说两句 今天继续我们的Android高德之旅,上一篇已经能够显示最主要的地图了.有主要的放大缩小功能.还有最后做的点击3D旋转.倾斜视角的效果.今天这篇文章来记录一下高德地图的5种地图类型. (其 ...

  2. vue -- config index.js 配置文件详解

    此文章介绍vue-cli脚手架config目录下index.js配置文件 此配置文件是用来定义开发环境和生产环境中所需要的参数 关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单 ...

  3. 怎么成为合格的WEB前端开发工程师

    web前端开发工程师目前来讲是一个热门职位,但是要成为一个合格的web前端开发工程师,需要掌握的知识可不少,零度就简单的为大家讲讲. 大致的来讲,web前端开发工程师需要掌握的知识有:HTML.CSS ...

  4. npm更新方法

    今天npm的版本更新发现小于3.0 尝试了npm install npm -g 安装么有成功换成了 cnpm install npm -g安装之后就可以

  5. node搭建服务器

    创建简单的服务器,可以简单连接 var http = require("http"); var server = http.createServer(); server.on(&q ...

  6. Linux之lldptool命令

    1. 描述 当我们想在操作系统里面查看网口和交换机连接的状态信息,我们可以使用lldptool这个工具. 2.LLDP协议 LLDP是一个数据链路层发现协议,LLDP协议使得接入网络的一台设备可以将其 ...

  7. halt---关闭正在运行的Linux操作系统。

    halt命令用来关闭正在运行的Linux操作系统.halt命令会先检测系统的runlevel,若runlevel为0或6,则关闭系统,否则即调用shutdown来关闭系统. 语法 halt(选项) 选 ...

  8. 微信小程序从零开始开发步骤（八）引入框架WeUI

    首先来看下WeUI的官方介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.在微信小程序的开发过程中,涉及到的前端 ...

  9. 32款iOS开发插件和工具介绍[效率]

    插件和工具介绍内容均收集于网络,太多了就不一一注明了,在此谢过!   1.Charles 为了调试与server端的网络通讯协议.经常须要截取网络封包来分析. Charles通过将自己设置成系统的网络 ...

  10. postgresql 查看单个表大小

    3中方法,不论什么一个都行 方法一 ,查一个表 select pg_size_pretty(pg_relation_size('table_name')); 方法二 ,查出全部表并按大小排序 SELE ...