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的parseInt 进制问题
May 07 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
微信小程序实现图片上传
May 23 Javascript
详解JSON.stringify()的5个秘密特性
May 26 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 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
全国FM电台频率大全 - 25 云南省
2020/03/11 无线电
PHP脚本的10个技巧(6)
2006/10/09 PHP
PHP中for循环语句的几种变型
2006/11/26 PHP
PHP函数超时处理方法
2016/02/14 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
使用Python绘制图表大全总结
2017/02/11 Python
Python中functools模块函数解析
2017/03/12 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
python中对数据进行各种排序的方法
2019/07/02 Python
Python如何绘制日历图和热力图
2020/08/07 Python
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
金蝶的一道SQL笔试题
2012/12/18 面试题
中秋节国旗下演讲稿
2014/09/05 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
公司财务管理制度
2015/08/04 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
HTML中的表单元素介绍
2022/02/28 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS