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 读取和设置文档元素的样式属性
Apr 14 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
限制上传文件大小和格式的jQuery插件实例
Jan 24 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
bootstrap响应式工具使用详解
Nov 29 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
代码解析React中setState同步和异步问题
Jun 03 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
PHP反射学习入门示例
2019/06/14 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
Prototype的Class.create函数解析
2011/09/22 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
Python饼状图的绘制实例
2019/01/15 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
美国宠物商店:Wag.com
2016/10/25 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
应聘医药代表职位求职信
2013/10/21 职场文书
入党申请自荐书范文
2014/02/11 职场文书
工程管理英文求职信
2014/03/18 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
2014年工会工作总结
2014/11/12 职场文书
会计岗位职责
2015/02/03 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android