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实现跑马灯效果总结（转）
最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说 ...
随机推荐
- Swift vs C# Go OC
Swift vs C# mod=view&aid=21" target="_blank">http://www.swifthumb.com/porta ...
- c++笔试题：不使用第三个变量来交换俩个变量的数值
题目:将a 与 b的值互换. 通常我们的做法是(尤其是在学习阶段):定义一个新的变量,借助它完成交换.代码如下: int a,b; a; b: int t; t ...
- vue 引入第三方字体包
1.创建 style_css 文件夹,在当前文件夹下 新建 index.css 和 引入字体包. 2. 在build 目录下,设置 webpack.base.cong.js , 在module ...
- Think Pad笔记本分区解决思路及方法
Think pad笔记本分区解决思路及方法 近日好友拿着新买的Thinkpad X300过来找我,说这个笔记本只有一个分区,所有的东西不得放在C盘,希望再多分出几个分区.抱怨原先在wind ...
- Entity Framework的原理及使用方式
ADO.NET Entity Framework操作数据库的过程对用户是透明的(当然我们可以通过一些工具或方法了解发送到数据库的SQL语句等).我们唯一能做的是操作EDM,EDM会将这个操作请求发往数 ...
- JOISC 2018 Day 2 最差记者3
JOISC 2018 Day 2 最差记者3 题意: 数轴上有\(N\)个选手和一个旗手,旗手在位置\(0\)<第\(i\)人的位置为\(-i\),每个选手有一个参数\(D_i\).旗手每单 ...
- node内容
什么是node? node是一门技术,并不是一门新的语言.是JavaScript运行环境. node在解析JavaScript,依靠的是什么? 依靠的是谷歌浏览器中的v8引擎,所以不需要考虑兼容性,n ...
- 小米开源文件管理器MiCodeFileExplorer-源码研究(7)-Favorite收藏管理和SQLite数据库CRUD
FavoriteDatabaseHelper,存储favorite数据,到SQLite数据库.SQLiteOpenHelper是一个帮助管理数据库和版本的工具类.通过继承并重载方法,快速实现了我们自己 ...
- 【2017 Multi-University Training Contest - Team 3】RXD and math
[Link]: [Description] [Solution] 发现1010mod(109+7)=999999937; 猜测答案是nk 写个快速幂; 注意对底数先取模; [NumberOf WA] ...
- 开机显示 invalid partition table
解决方法:进入你的BIOS, 然后设置你装系统的盘(SSD,或者磁盘)为第一启动位置处即可. 具体可参考文章电脑开机出现Invalid Partition Table怎么修复?解决