JS实现跑马灯效果(鼠标滑入可暂停，离开继续跑)
<!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实现跑马灯效果(鼠标滑入可暂停，离开继续跑)的更多相关文章
- android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习
跑马灯效果 1.用过属性的方式实现跑马灯效果 属性: android:singleLine="true" 这个属性是设置TextView文本中文字 ...
- Android使用TextView实现跑马灯效果(自定义控件)
对于一个长的TetxView 折行显示是一个很好的办法,另一种方法就是跑马灯显示(单行滚动) 1.折行显示的长TextView <LinearLayout xmlns:android=" ...
- JS实现跑马灯效果(向左，向上)
<html> <head> <title>JS实现跑马灯效果</title> <style> * { font-size:12px; fon ...
- 微信小程序跑马灯效果--基于CSS3 animation 及 基于JS
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 基于CSS3主要代码实现 效果图: 视图模板wxml中: <view class=&qu ...
- JS写一个列表跑马灯效果--基于touchslide.js
先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...
- js实现横向跑马灯效果
首先我们需要一个html代码的框架如下: <div style="position: absolute; top: 0px; left: 168px; width: 100%; mar ...
- WPF 简易的跑马灯效果
最近项目上要用到跑马灯的效果,和网上不太相同的是,网上大部分都是连续的,而我们要求的是不连续的. 也就是是,界面上就展示4项(展示项数可变),如果有7项要展示的话,则不断的在4个空格里左跳,当然,衔接 ...
- marquee标签实现跑马灯效果--无缝滚动
今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果.但无意中发现了一个html标签——<marquee> ...
- android:ellipsize实现跑马灯效果总结（转）
最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说 ...
随机推荐
- 安装成功的nginx，如何添加未编译安装模块（非覆盖安装http_image_filter_module）
背景:1.做了图片上传小项目.2.图片上传,需要多图管理.3.图片上传,需要存储到Fastdfs.4.Fastdfs上的图片,和Nginx结合.5.Nginx从Fastdfs获得的图片,需要使用缩略图 ...
- cogs 1430. [UVa 11300]分金币
1430. [UVa 11300]分金币 ★☆ 输入文件:Wealth.in 输出文件:Wealth.out 简单对比时间限制:1 s 内存限制:256 MB [题目描述] 圆桌旁坐着 ...
- OR1200处理器中Wishbone总线接口模块WB_BIU介绍
下面内容摘自<步步惊芯--软核处理器内部设计分析>一书 WB_BIU模块是OR1200处理器与外部Wishbone总线连接的接口模块.15.1节给出了WB_BIU模块的对外连接关系,并指出 ...
- HH生病了（hpu1136）
HH生病了 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 324 Solved: 90 [Submit][Status][Web Board] De ...
- 46.Express框架 GET 方法和POST 方法
转自:http://www.runoob.com/nodejs/nodejs-express-framework.html GET 方法 以下实例演示了在表单中通过 GET 方法提交两个参数,我们可以 ...
- （转）OpenCV 基本知识框架
以下是对<学习OpenCV>一书知识框架的简单梳理 转自:http://blog.chinaunix.net/uid-8402201-id-2899695.html 一.基础操作 ...
- Linux网卡驱动框架及制作虚拟网卡
1.概述 网卡驱动与硬件相关,主要负责收发网络的数据包,将上层协议传递下来的数据包以特定的媒介访问控制方式进行发送,并将接收到的数据包传递给上层协议. 网卡设备与字符设备,块设备不同,网络设备驱动程序 ...
- mkfs---创建Linux文件系统
[root@xiaolizi ~]# mkfsmkfs mkfs.btrfs mkfs.cramfs mkfs.ext2 mkfs.ext3 mkfs.ext4 mkfs.minix mkfs.xfs ...
- CSUOJ 1554 SG Value
1554: SG Value Time Limit: 5 Sec Memory Limit: 256 MBSubmit: 140 Solved: 35 Description The SG val ...
- 算法导论——lec 12 平摊分析与优先队列
在平摊分析中,运行一系列数据结构操作所须要的时间是通过对运行的全部操作求平均得出.反映在不论什么情况下(即最坏情况下),每一个操作具有平均性能.掌握了平摊分析主要有三种方法,聚集分析.记账方法.势能方 ...