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实现跑马灯效果总结（转）
最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说 ...
随机推荐
- Eclipse怎么导入外来项目
从File中点击------>import----->General------>然后按下面的图片显示
- 简单说一下 JSON和JSONP
JSON和JSONP,但从缩写看,可能会以为他们是很相似的两个名词,但他们除了缩写相似外,他们是两种类型的概念. 首先: JSON(JavaScript Object Notation)即JavaSc ...
- Kinect 开发 —— 用户交互设计的若干思考
Metro 风格 windows 8 Kinect Hub 手势原型设计 悬停选择 翻页控制 关节点重叠的处理方法 将箭靶设置在画面的边缘,这样玩家持弓的角度与屏幕保持一个大约45度的锐角,这 ...
- Datatable foeach 遍历
//1.创建 datatable DataTable dt = new DataTable("dtDemo");//可以给表创建一个名字,datatable //2.给表加个列名: ...
- Python修改文件内容
工作中要写个脚本来修改文件的内容,然后就写了一个刷子: #coding:utf8 import os def modify_file(old_file, new_version, old_versio ...
- csdn课堂学习
http://edu.csdn.net/course/detail/2495?ref=blog&loc=0 http://edu.csdn.net/course/detail/2140/336 ...
- ln用法
第一部分: 建立简单的硬连接: ln ./wwy.gif ./wwy_ln (第二个参数为新建的连接文件,建立前不存在),则任意一个文件变化,另一个也变化:大小为一个文件的大小:硬连接只能建在同一个分 ...
- WinRAR 5.40无弹窗广告注册版下载
WinRAR 5.40无弹窗广告注册版下载 资料来源 http://www.heminjie.com/network/6366.html WinRAR 5.40 下载安装后,打开压缩包文件会弹出广 ...
- Mahout是什么？（一）
不多说,直接上干货! http://mahout.apache.org/ Mahout是Apache Software Foundation(ASF)旗下的一个开源项目. 提供一些可扩展的机器学习领域 ...
- BZOJ3514: Codechef MARCH14 GERALD07加强版(LCT，主席树)
Description N个点M条边的无向图,询问保留图中编号在[l,r]的边的时候图中的联通块个数. Input 第一行四个整数N.M.K.type,代表点数.边数.询问数以及询问是否加密.接下来M ...