js实现文字跑马灯效果

<!doctype html>
<html><head><meta charset="UTF-8"><meta name="viewport"content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /><title>文字滚动</title><style type="text/css">* {margin: 0;padding: 0;}body {font: 12px/1 '微软雅黑';}.wrap {border: 1px solid #000;font-size: 14px;color: #333;padding: 5px;white-space: nowrap;overflow: hidden;width: 300px;}.box {width: 1000px;overflow: hidden;}.box p {display: inline-block;}</style>
</head><body><!-- 滚动容器 --><div id="wrap" class="wrap"><div class="box"><p class="txt">高先生的猫，高先生的猫，高先生的猫，高先生的猫，高先生的猫，高先生的猫，高先生的猫，高先生的猫，高先生的猫，高先生的猫，</p></div></div><script>let wrap = document.getElementById('wrap');let box = wrap.getElementsByTagName('div')[0];let p = document.getElementsByTagName('p')[0];let p_w = p.offsetWidth;let wrap_w = wrap.offsetWidth;window.onload = function fun() {if (wrap_w > p_w) { return false; }box.innerHTML += box.innerHTML;setTimeout("fun1()", 50);}function fun1() {if (p_w > wrap.scrollLeft) {wrap.scrollLeft++;setTimeout("fun1()", 15); // 越小越快}else {setTimeout("fun2()", 50);}}function fun2() {wrap.scrollLeft = 0;fun1();}</script>
</body></html>

js实现文字跑马灯效果相关推荐

跑马灯抽奖js php,文字跑马灯效果的完成
文字跑马灯效果的完成发表于2019-06-09 21:14| 次阅读| 来源网络整理| 作者session 摘要:跑马灯效果在很多页面上也常常出现,本文次要为大家具体引见微信小程序完成文字跑马灯效果 ...
php实现文字向左跑马灯,js实现文字跑马灯效果
js实现文字超过显示宽度每间隔1s自动向左滚动显示 *{ margin:0; padding:0;} body{font:12px/1 '微软雅黑';} .wrapper{font-size: 0.8 ...
c语言小程序跑马灯,微信小程序实现文字跑马灯效果
本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 wxml 1 显示完后再显示 Box"> 2 出现白边后即显示 Box"> {{tex ...
微信小程序教程：文字跑马灯效果
当你的微信小程序内容中出现文字跑马灯效果,会不会觉得很拉风,接下来大家详细讲解下如何操作实现这效果. 效果: wxml <view>1 显示完后再显示</view> <v ...
CSS实现文字跑马灯效果
CSS实现文字跑马灯效果在完成一个任务的时候,要求在表格中固定宽度的其中一个item文字过长需要滚动显示,然后经过多次效果的尝试,实现代码如下所示: 它需要一个外层包围盒,设置定宽.文字不换行以及超 ...
python中的字符串详解（附实现文字跑马灯效果）
python中的字符串详解 1.什么是字符串相信大家对字符串应该是再熟悉不过了吧,因为日常生活中的一句话,或是路边的一则广告,其实它都相当于一个字符串,而顾名思义,字符串也就是一串串的由零个或多 ...
微信小程序文字跑马灯效果
1.样式 /*首页跑马灯效果开始*/ .container_marquee {display: flex;flex-direction: column;justify-content: space-b ...
js实现横向跑马灯效果
首先我们需要一个html代码的框架如下: <div style="position: absolute; top: 0px; left: 168px; width: 100%; mar ...
html 文字跑马灯效果,CSS3 长文字跑马灯效果
raw js + css3 transition 跑马灯测试.跑马灯测试.跑马灯测试. @keyframes kf-marque-animation { 0% { transform: transla ...
android 字体跑马灯,Android中使用TextView实现文字跑马灯效果
通常情况下我们想实现文字的走马灯效果需要在xml文件中这样设置 android:layout_width="wrap_content" android:layout_height= ...

js实现文字跑马灯效果

js实现文字跑马灯效果相关推荐

最新文章

热门文章