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 中介者模式实例
Dec 16 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
Sep 12 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
Sep 18 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 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实现用户在线时间统计详解
2011/10/08 PHP
php汉字转拼音的示例
2014/02/27 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
python算法学习之基数排序实例
2013/12/18 Python
用实例解释Python中的继承和多态的概念
2015/04/27 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
python绘制多个子图的实例
2019/07/07 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
python怎么对数字进行过滤
2020/07/05 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
电子专业毕业生自我鉴定
2014/01/22 职场文书
个人承诺书怎么写
2014/05/24 职场文书
学生吸烟检讨书
2014/09/14 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL
vue elementUI批量上传文件
2022/04/26 Vue.js
利用Apache Common将java对象池化的问题
2022/06/16 Servers
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS