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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了微信小程序自定义头部导航栏，胶囊按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
这篇文章主要介绍了JavaScript返回网页中超链接数量的方法,使用javascript中的document.links实现这一功能,需要的朋友可以参考下2015-04-04
在Javascript里，函数被调用的时候，除了接受声明是定义的形式参数，每一个函数还接受两个附加的参数：this和arguments。2011-09-09
这篇文章主要为大家详细介绍了js开发插件实现tab选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
从此例子中发现，js对"" 与 " " ，注意中间还有一空格，解析是非常严格的。在java与net中还有待于研究。2009-12-12
本文主要介绍了nestjs实现图形校验和单点登录的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
链表是一种物理存储单元上非连续、非顺序的存储结构,本文主要介绍了TypeScript实现单链表的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-08-08
这篇文章主要为大家详细介绍了微信小程序实现顶部普通选项卡效果，非swiper，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
webpack中的filename 和 chunkFilename 的区别实例解析
filename 指列在 entry 中,打包后输出的文件的名称,chunkFilename 指未列在 entry 中,却又需要被打包出来的文件的名称,这篇文章主要介绍了webpack中的filename 和 chunkFilename 的区别实例解析,需要的朋友可以参考下2023-11-11
本篇文章主要是对js将数值转换为3位逗号分隔的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
最新评论