javascript实现文字跑马灯效果
本文实例为大家分享了js实现文字跑马灯效果的具体代码，供大家参考，具体内容如下
思路：
1.判断文字的长度和容器的长度，如果文字长度大于容器长度，则开始滚动，否则不滚动。
2.获取滚动条到元素左边的距离,递归滚动,直到滚动后的距离等于文字的长度退出递归。
判断文字和容器的长度可以通过offsetWidth来判断。如果文字长度大于容器长度，则开始滚动。
window.onload = function(){
//比较文字与盒子长度的大小
if(boxWidth>textWidth){
return false;
}
content.innerHTML += content.innerHTML;
document.querySelector('.text').classList.add('padding');
//刷新textwidth
textWidth = document.querySelector('.text').offsetWidth;
scroll_left();
}
判断滚动的结束根据滚动条到元素左边的距离和文字的长度判断，如果滚动条到元素左边的距离等于文字的长度，则结束滚动。
function scroll_left(){
if(textWidth>boxWidth){
//文字长度大于盒子长度，开始滚动
box.scrollLeft++;
setTimeout('scroll_left()',1);
}
}
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: auto;
padding: 0;
}
.box{
margin-top: 150px;
margin-left: 150px;
color: red;
white-space: nowrap;
width: 200px;
background: rosybrown;
overflow: hidden;
}
.content p{
display: inline-block;
}
.content p.padding{
padding-right: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<p class="text">实现文字的跑马灯效果，超出容器的长度则开始向左滚动</p>
</div>
</div>
<script>
let box = document.querySelector('.box');
let content = document.querySelector('.content');
let text = document.querySelector('.text');
//文本宽度
let textWidth = text.offsetWidth;
//盒子宽度
let boxWidth = text.offsetWidth;
window.onload = function(){
//比较文字与盒子长度的大小
if(boxWidth>textWidth){
return false;
}
content.innerHTML += content.innerHTML;
document.querySelector('.text').classList.add('padding');
//刷新textwidth
textWidth = document.querySelector('.text').offsetWidth;
scroll_left();
}
function scroll_left(){
if(textWidth>boxWidth){
//文字长度大于盒子长度，开始滚动
box.scrollLeft++;
setTimeout('scroll_left()',1);
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Js和VUE实现跑马灯效果
本文实例为大家分享了Js和VUE分别实现跑马灯效果的具体代码,供大家参考,具体内容如下 一.js实现跑马灯 1.效果图 视频上传不了,只能看图片了 2. 设计思路 使用截取字符串的方法,首先获取文本的值,再分别截取文本的第一个字符串和剩余的字符串,然后重新拼接一个新的字符串,最后把这个新字符串赋值给文本,代码如下: var value=cont.innerHTML; var start=value.substring(0,1);//截取第一个字符串 var end=value.substring
-
javascript新闻跑马灯实例代码
本文实例为大家分享了javascript实现的跑马灯效果代码,实现了新闻公告之类的功能,下面提供了一段跑马灯实例供大家参考之用,希望能够对需要的朋友有所帮助. 运行效果图: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>javascript新闻跑马灯效果</title> </head> <script ty
-
javascript 单行文字向上跑马灯滚动显示
代码如下: =sh/2) o.style.marginTop=0; }else{ clearInterval(t); setTimeout(start,delay); } } setTimeout(start,delay); } // --> 我们 服务器常用软件 百度 浏览器 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
js文本框走动跑马灯效果代码分享
本文实例讲述了js实现文本框走动跑马灯效果.分享给大家供大家参考.具体如下: 运行效果图: 小提示:直接复制下面分享的代码即可运行,大家可以自定义文字. 为大家分享的js实现文本框走动跑马灯效果代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>文本框走动跑马灯代码</title> </
-
JS实现字体背景跑马灯
本文实例为大家分享了JS实现字体背景跑马灯的具体代码,供大家参考,具体内容如下 知识点 1.通过 @keyframes 规则,创建动画. 2.背景作用域: background-clip: text; -webkit-background-clip: text; 3.background-position定位背景图像 4.color: transparent 全透明 运行效果 代码 <!DOCTYPE html> <html lang="en"> <hea
-
JS实现状态栏跑马灯文字效果代码
本文实例讲述了JS实现状态栏跑马灯文字效果代码.分享给大家供大家参考,具体如下: 这款状态栏跑马灯,文字跑动的定义在数组内,自己可修改内容.现在的IE8貌似不兼容,有缺憾的代码,欢迎JS爱好者修正,修正请发回一份.状态栏为效果显示区. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ztlpmd-txt-style-codes/ 具体代码如下: <HTML> <HEAD> <TITLE>间隔状态栏跑马灯</T
-
Javascript实现跑马灯效果的简单实例
页面html: <div> <div id="imgShows" runat="server" style="padding-bottom: 10px;"> <div id="demo" style="overflow: hidden; width: 100%; height: 190px"> <table cellspacing="0" cel
-
原生JS实现跑马灯效果
效果如下:(动态效果可复制代码查看,案例中的图片可自行选择添加) 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; list-style: none; } div{ position: relative
-
js跑马灯代码(自写)
复制代码 代码如下: function cls_marquee(id,id1,id2,sp){ this.obj_id=id; this.obj_id1=id1; this.obj_id2=id2; this.speed=sp; eval(this.obj_id2+".innerHTML="+this.obj_id1+".innerHTML"); function Marquee(){ if(eval(id2).offsetTop-eval(id).scrollTo
-
javascript跑马灯抽奖实例讲解
本文实例讲解了javascript跑马灯抽奖特效,特别适合用于抽奖活动,分享给大家供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>抽奖游戏</title> <style> #box{ width:720px; margin:0 auto; margin-top:20p