JavaScript小实例-文字跑马灯效果
我们常常能看到显示屏上字体的滚动以及手机弹幕等，下面所示代码就是一个简易的文字跑马灯的效果：
<!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 #51C9F1;
white-space: nowrap;
overflow: hidden;
padding: 10px;
color: gold;
background: mediumpurple;
} #wrap div {
display: inline-block;
font-size: 20px;
} #wrap span {
font-size: 20px;
color: yellow;
} </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>
JavaScript小实例-文字跑马灯效果的更多相关文章
- Android开发：文本控件详解——TextView（二）文字跑马灯效果实现
一.需要使用的属性: 1.android:ellipsize 作用:若文字过长,控制该控件如何显示. 对于同样的文字“Android开发:文本控件详解——TextView(二)文字跑马灯效果实现”,不 ...
- 用jQuery实现参数自定义的文字跑马灯效果
一,明确需求 基本需求:最近在工作中接到一个新需求,简单来说就是实现一行文字从右到左跑马灯的效果,并且以固定的时间间隔进行循环. 原本这是一个很容易实现的需求,但是难点是要求很多参数得是用户可自行设置 ...
- 实现一个微信小程序组件：文字跑马灯效果
marquee.json { "component": true, "usingComponents": {} } marquee.wxml <!--co ...
- JavaScript小实例-文本循环变色效果
在现实生活中我们常常看到文字循环变色的效果,此效果不仅能让人们印象深刻,还提高了美观度,代码及注释如下: <!DOCTYPE html> <html> <head> ...
- vue文字跑马灯效果
https://cdn.bootcss.com/jQuery.Marquee/1.5.0/jquery.marquee.js 兼容vue $("#demo4").marquee({ ...
- VUE之文字跑马灯效果
VUE之文字跑马灯效果 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> <me ...
- [转]实现文字跑马灯效果，scrolling text from right to left
<div> <marquee direction="left" behavior="scroll" scrollamount="10 ...
- VUE小案例--跑马灯效果
自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...
- js文字跑马灯
实现文字跑马灯效果,主要控制scrollLeft. 效果图如下 代码如下 <html> <head> <script type="text/javascript ...
随机推荐
- js中函数的创建和调用都发生了什么？执行环境,函数作用域链,变量对象
博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/26/js%E4%B8%AD%E5%87%BD%E6%95%B0%E7%9A%84%E ...
- [Java Performance] 线程及同步的性能之线程池/ThreadPoolExecutors/ForkJoinPool
线程池和ThreadPoolExecutors 虽然在程序中可以直接使用Thread类型来进行线程操作,但是更多的情况是使用线程池,尤其是在Java EE应用服务器中,一般会使用若干个线程池来处理 ...
- LeetCode Array Easy 66. Plus One
Description Given a non-empty array of digits representing a non-negative integer, plus one to the i ...
- ajax请求的原生js实现
我们使用ajax请求一般都用的jQuery, axios封装好了的api, 那么如果只能用原生js, 我们该如何操作了? 上代码. 我们在同目录下写好一个json文件(data.json)用于请求测试 ...
- stylus 使用小技巧（1）
mixins.styl $pink_color = #fc566a $yellow_color = #fee246 add(a) a = unit(a, rem) pic_position($widt ...
- mysql的数据导出方法
mysql的数据导出几种方法 从网上找到一些问题是关于如何从MySQL中导出数据,以便用在本地或其它的数据库系统之上:以及 将现有数据导入MySQL数据库中. 数据导出 数据导出主要有以下几种方法 ...
- JavaIO流之File操作
IO流: File: File(文件/文件夹地址)构造函数: public File(String path); public File(String parentPath, String child ...
- 云原生数据库崛起，阿里云POLARDB当选世界互联网领先科技成果！
第六届世界互联网大会来了!千年水乡古镇乌镇又一次吸引了全世界的目光. 刚刚,阿里云自研数据库POLARDB在会上当选世界互联网领先科技成果.POLARDB解决了企业在云时代的数据库难题,帮助企业在数小 ...
- Shiro学习（15）单点登录
Shiro 1.2开始提供了Jasig CAS单点登录的支持,单点登录主要用于多系统集成,即在多个系统中,用户只需要到一个中央服务器登录一次即可访问这些系统中的任何一个,无须多次登录.此处我们使用Ja ...
- 构造——cf1213E
分情况讨论,构造很简单 #include<bits/stdc++.h> using namespace std; #define N 200005 ],t[]; int n,s1,s2,t ...