js实现文字跑马灯效果


Posted in Javascript onFebruary 23, 2017

本示例将实现文字跑马灯效果:文字超过显示宽度每间隔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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript date格式化示例
Sep 25 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
前端js中的事件循环eventloop机制详解
May 15 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
基于js实现逐步显示文字输出代码实例
Apr 02 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 #Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 #Javascript
js模拟微博发布消息
Feb 23 #Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 #Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 #Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 #Javascript
js实现简单的选项卡效果
Feb 23 #Javascript
You might like
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
我的群发邮件程序
2006/10/09 PHP
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
php删除数组元素示例分享
2014/02/17 PHP
php统计数组元素个数的方法
2015/07/02 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
vue动态子组件的两种实现方式
2019/09/01 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
python插入排序算法实例分析
2015/07/03 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
Python实现数字的格式化输出
2020/08/01 Python
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
银行青年文明号事迹材料
2014/05/31 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
代领毕业证委托书
2014/08/02 职场文书
保密工作承诺书
2014/08/29 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
二婚主持词
2015/06/30 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
python爬虫selenium模块详解
2021/03/30 Python
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL