javascript实现文字跑马灯效果


Posted in Javascript onJune 18, 2020

本文实例为大家分享了js实现文字跑马灯效果的具体代码,供大家参考,具体内容如下

思路:

1.判断文字的长度和容器的长度,如果文字长度大于容器长度,则开始滚动,否则不滚动。

2.获取滚动条到元素左边的距离,递归滚动,直到滚动后的距离等于文字的长度退出递归。

判断文字和容器的长度可以通过offsetWidth来判断。如果文字长度大于容器长度,则开始滚动。

window.onload = function(){
       //比较文字与盒子长度的大小
       if(boxWidth>textWidth){
        return false;
       }
       content.innerHTML += content.innerHTML;
       document.querySelector('.text').classList.add('padding');
       //刷新textwidth
       textWidth = document.querySelector('.text').offsetWidth;
       scroll_left();
     }

判断滚动的结束根据滚动条到元素左边的距离和文字的长度判断,如果滚动条到元素左边的距离等于文字的长度,则结束滚动。

function scroll_left(){
    if(textWidth>boxWidth){
     //文字长度大于盒子长度,开始滚动
       box.scrollLeft++;
      setTimeout('scroll_left()',1);
   }
}

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: auto;
      padding: 0;
    }
    .box{
      margin-top: 150px;
      margin-left: 150px;
      color: red;
      white-space: nowrap;
      width: 200px;
      background: rosybrown;
      overflow: hidden;
    }
    .content p{
      display: inline-block;
    }
    .content p.padding{
      padding-right: 200px;
    }
  </style>
  


</head>
<body>
  <div class="box">
    <div class="content">
      <p class="text">实现文字的跑马灯效果,超出容器的长度则开始向左滚动</p>
    </div>
  </div>


  <script>
    
     let box = document.querySelector('.box');
     let content = document.querySelector('.content');
     let text = document.querySelector('.text');

    //文本宽度
    let textWidth = text.offsetWidth;
    //盒子宽度
    let boxWidth = text.offsetWidth;


     window.onload = function(){
       //比较文字与盒子长度的大小
       if(boxWidth>textWidth){
        return false;
       }
       content.innerHTML += content.innerHTML;
       document.querySelector('.text').classList.add('padding');
       //刷新textwidth
       textWidth = document.querySelector('.text').offsetWidth;
       scroll_left();
     }

     function scroll_left(){
       if(textWidth>boxWidth){
         //文字长度大于盒子长度,开始滚动
         box.scrollLeft++;
         setTimeout('scroll_left()',1);
       }
     }
  </script>

</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript获取网页宽高方法汇总
Jul 19 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
JS中对Cookie的操作详解
Aug 05 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
关于vue面试题汇总
Mar 20 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
node.js +mongdb实现登录功能
Jun 18 #Javascript
VSCode launch.json配置详细教程
Jun 18 #Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 #Javascript
通过实例了解JS执行上下文运行原理
Jun 17 #Javascript
从0搭建vue-cli4脚手架
Jun 17 #Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 #Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 #Javascript
You might like
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
php字符串函数学习之substr()
2015/03/27 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
js实现内置计时器
2019/12/16 Javascript
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
通过cmd进入python的实例操作
2019/06/26 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
python生成requirements.txt的两种方法
2019/09/18 Python
python getopt模块使用实例解析
2019/12/18 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
《称象》教学反思
2014/04/25 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
南湾猴岛导游词
2015/02/09 职场文书
老人院义工活动感想
2015/08/07 职场文书
小学教代会开幕词
2016/03/04 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript