js实现文字跑马灯效果
更新时间：2017年02月23日 16:28:54 作者：missFanny
本文主要介绍了js实现文字超过显示宽度每间隔1s自动向左滚动显示的跑马灯效果，具有很好的参考价值，下面跟着小编一起来看下吧
本示例将实现文字跑马灯效果：文字超过显示宽度每间隔1s自动向左滚动显示，话不多说，请看代码
<!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"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>js实现文字超过显示宽度每间隔1s自动向左滚动显示</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{font:12px/1 '微软雅黑';}
.wrapper{font-size: 0.85rem; color: #333; padding-top: 0.75rem; margin: 0 0.75rem; white-space: nowrap; overflow: hidden;width: 300px;}
.inner{ width:1000px;overflow:hidden;}
.inner p{ display:inline-block;}
</style>
</head>
<body>
<div id="wrapper" class="wrapper">
<div class="inner">
<p class="txt">文字如果超出了宽度自动向左滚动文字如果超出了宽度自动向左滚动。</p>
</div>
</div>
<script>
var wrapper = document.getElementById('wrapper');
var inner = wrapper.getElementsByTagName('div')[0];
var p = document.getElementsByTagName('p')[0];
var p_w = p.offsetWidth;
var wrapper_w = wrapper.offsetWidth;
window.onload=function fun(){
if(wrapper_w > p_w){ return false;}
inner.innerHTML+=inner.innerHTML;
setTimeout("fun1()",2000);
}
function fun1(){
if(p_w > wrapper.scrollLeft){
wrapper.scrollLeft++;
setTimeout("fun1()",30);
}
else{
setTimeout("fun2()",2000);
}
}
function fun2(){
wrapper.scrollLeft=0;
fun1();
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
很多情况下我们需要去掉重复的内容，一般我们都是将很多内容放到一个数组里面，然后再去重复，这里简单为大家整理一下2016-12-12
在本篇文章里小编给各位整理的是关于原生js实现文件上传、下载、封装等实例方法，需要的朋友们可以参考学习下。2020-01-01
这篇文章主要为大家详细介绍了js图片轮播插件的封装代码，只需要获取到图片和按钮，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了弱类型语言javascript中 a,b 的运算,结合实例形式总结分析了js闭包函数中布尔值与字符串的a，b运算相关操作技巧,需要的朋友可以参考下2019-08-08
这篇文章主要为大家介绍了webpack5的loader配置非常适合webpack入门的小白学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
iview date-picker options只可选当前日期之前的(当前之后的禁用)
如果日期对象date的时间戳大于当前时间的时间戳,则该日期在当前日期之后,会被禁用,下面通过实例代码给大家介绍iview date-picker options只可选当前日期之前的,感兴趣的朋友跟随小编一起看看吧2024-12-12
事件是将JavaScript脚本与网页联系在一起的主要方式，是JavaScript中最重要的主题之一。本文将详细探讨JavaScript的事件机制，并对比分析了浏览器之间的不同，具体内容包括事件流、事件处理程序绑定方式、事件对象等。2017-01-01
JS Angular 服务器端渲染应用设置渲染超时时间
这篇文章主要介绍了JS Angular服务器端渲染应用设置渲染超时时间,通过setTimeout模拟一个需要5秒钟才能完成调用的API展开详情，需要的小伙伴可以参考一下2022-06-06
回顾头来看看那些Javascript脚本，有写得不太理想，过于复杂。现抽取出来，重构它们,想学习javascript重构的朋友可以参考下啊，网本文可以帮助你的2013-01-01
这篇文章主要介绍了关于js内存泄露的一个好例子。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
最新评论