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 相关文章推荐
转一个日期输入控件,支持FF
Apr 27 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
js数组操作常用方法
May 08 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
基于打包工具Webpack进行项目开发实例
May 29 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
vue resource发送请求的几种方式
Sep 30 Javascript
JS实现音乐导航特效
Jan 06 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
php结合飞信 免费天气预报短信
2009/05/07 PHP
php gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
sae使用smarty模板的方法
2013/12/17 PHP
PHP 验证登陆类分享
2015/03/13 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
PHP7 新增功能
2021/03/09 PHP
JavaScript 原型学习总结
2010/10/29 Javascript
js中eval详解
2012/03/30 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
Python中List.index()方法的使用教程
2015/05/20 Python
python实现微信自动回复功能
2018/04/11 Python
Python发展史及网络爬虫
2019/06/19 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
经费申请报告范文
2015/05/18 职场文书
2016十一国庆节感言
2015/12/09 职场文书
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏