<!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. Html学习总结(1)——理解Html的head

    HTML文档的head部分,通常包括指定页面标题,为搜索引擎提供关于页面本身的信息,加载样式表,以及加载JavaScript文件(出于性能考虑,多数时候放在页面底部</body>标签结束前 ...

  2. 这是一套Java菜鸟到大牛的学习路线之高级教程,由工作了10年的资深Java架构师整理。

    这是一套Java菜鸟到大牛的学习路线之高级教程,由工作了10年的资深Java架构师整理.        01-java高级架构师设计-基础深入        J2SE深入讲解        Java多 ...

  3. 讲的好,php后端模式,php-fpm以及php-cgi, fast-cgi,以及与nginx的关系

    关于cgi是什么,fast-cgi是什么,php-cgi是什么,fast-cgi是什么,下面这篇讲的很清楚: https://segmentfault.com/q/1010000000256516 另 ...

  4. Transport Tablespace Set(三) ----transport single tablespace

    源端字符集与endian查看: SQL> select userenv('language') from dual; USERENV('LANGUAGE') SIMPLIFIED CHINESE ...

  5. QT就是别人好心帮你做一些枯燥,并且很重复的代码编写工作,让你更好的把精力投入到你界面的逻辑和功能的实现的功能库(否则写了上万行代码了,才写出个BUG一大堆的毛坯)

    好了,现在开始记录我学习QT的学习历程 . 本人也不是计算机专业出来的,自学了一点,但还是不好找工作,于是参加了培训,虽然感觉没多学到什么 编程的学习生涯就是不断的看别人的源码,然后自己参考着写写自己 ...

  6. 项目: 基于Python socket模块实现的简单 ftp 项目:

    需要 自己创建一个 info 文件 用来存储用户信息 服务器: import socket import pickle import struct import os import time ''.s ...

  7. ajax起步 (二)

    Ajax的关键在于XMLHttpRequest对象,如下基本用法: <!DOCTYPE html> <html> <head> <meta charset=& ...

  8. ubuntu 进入临时客户会话页面 转入用户自己页面

    1.点击右上角的按钮 2.选择要登录的客户名字 点击进入 3.输入账号密码 进入指定的账号

  9. 使用pandas导出PostgreSQL 模式下的所有表数据并保存

    PostgreSQL PostgreSQL 是一个非常强大的数据库,它是一个免费的对象-关系数据库服务器(数据库管理系统).PostgreSQL支持大部分 SQL 标准, 在语句上也有很大的相似的地方 ...

  10. PatentTips - Control register access virtualization performance improvement

    BACKGROUND OF THE INVENTION A conventional virtual-machine monitor (VMM) typically runs on a compute ...