javascript实现文字跑马灯效果

本文实例为大家分享了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>

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

时间: 2020-06-17

Javascript实现跑马灯效果的简单实例

页面html: <div> <div id="imgShows" runat="server" style="padding-bottom: 10px;"> <div id="demo" style="overflow: hidden; width: 100%; height: 190px"> <table cellspacing="0" cel

Js和VUE实现跑马灯效果

本文实例为大家分享了Js和VUE分别实现跑马灯效果的具体代码,供大家参考,具体内容如下 一.js实现跑马灯 1.效果图 视频上传不了,只能看图片了 2. 设计思路 使用截取字符串的方法,首先获取文本的值,再分别截取文本的第一个字符串和剩余的字符串,然后重新拼接一个新的字符串,最后把这个新字符串赋值给文本,代码如下: var value=cont.innerHTML; var start=value.substring(0,1);//截取第一个字符串 var end=value.substring

javascript新闻跑马灯实例代码

本文实例为大家分享了javascript实现的跑马灯效果代码,实现了新闻公告之类的功能,下面提供了一段跑马灯实例供大家参考之用,希望能够对需要的朋友有所帮助. 运行效果图: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>javascript新闻跑马灯效果</title> </head> <script ty

js跑马灯代码(自写)

复制代码 代码如下: function cls_marquee(id,id1,id2,sp){ this.obj_id=id; this.obj_id1=id1; this.obj_id2=id2; this.speed=sp; eval(this.obj_id2+".innerHTML="+this.obj_id1+".innerHTML"); function Marquee(){ if(eval(id2).offsetTop-eval(id).scrollTo

javascript跑马灯抽奖实例讲解

本文实例讲解了javascript跑马灯抽奖特效,特别适合用于抽奖活动,分享给大家供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>抽奖游戏</title> <style> #box{ width:720px; margin:0 auto; margin-top:20p

原生JS实现跑马灯效果

效果如下:(动态效果可复制代码查看,案例中的图片可自行选择添加) 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; list-style: none; } div{ position: relative

JS实现字体背景跑马灯

本文实例为大家分享了JS实现字体背景跑马灯的具体代码,供大家参考,具体内容如下 知识点 1.通过 @keyframes 规则,创建动画. 2.背景作用域: background-clip: text; -webkit-background-clip: text; 3.background-position定位背景图像 4.color: transparent 全透明 运行效果 代码 <!DOCTYPE html> <html lang="en"> <hea

JS实现状态栏跑马灯文字效果代码

本文实例讲述了JS实现状态栏跑马灯文字效果代码.分享给大家供大家参考,具体如下: 这款状态栏跑马灯,文字跑动的定义在数组内,自己可修改内容.现在的IE8貌似不兼容,有缺憾的代码,欢迎JS爱好者修正,修正请发回一份.状态栏为效果显示区. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ztlpmd-txt-style-codes/ 具体代码如下: <HTML> <HEAD> <TITLE>间隔状态栏跑马灯</T

js文本框走动跑马灯效果代码分享

本文实例讲述了js实现文本框走动跑马灯效果.分享给大家供大家参考.具体如下: 运行效果图: 小提示:直接复制下面分享的代码即可运行,大家可以自定义文字. 为大家分享的js实现文本框走动跑马灯效果代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>文本框走动跑马灯代码</title> </

javascript 单行文字向上跑马灯滚动显示

代码如下: =sh/2) o.style.marginTop=0; }else{ clearInterval(t); setTimeout(start,delay); } } setTimeout(start,delay); } // --> 我们 服务器常用软件 百度 浏览器 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

jquery单行文字向上滚动效果的实现代码

<body> <div id="title" style="width:100%;height:40px;">看看间断滚动文字</div> <div id="content" class="infocontent"> <div id="top" class="infolist"> <ul> <li>央视3

jquery单行文字向上滚动效果示例

复制代码 代码如下: <body> <div id="title" style="width:100%;height:40px;">看看间断滚动文字</div> <div id="content" class="infocontent"> <div id="top" class="infolist"> <ul> &l

jQuery实现单行文字间歇向上滚动源代码

使用jQuery实现单行文字间歇向上滚动 效果网址:http://www.keleyi.com/keleyi/phtml/textscroll.htm 本效果加强版:http://www.keleyi.com/a/bjac/532bedbffca1affa.htm 主要增加了光标悬停效果 以下是源代码: 复制代码 代码如下: <script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/j

微信小程序实现跑马灯效果完整代码(附效果图)

一:功能介绍及讲解 实现的跑马灯(跑马灯里面显示文章的title)的效果,并在右侧有个查看文章的按钮,按钮绑定当前的跑马灯信息的id,点击按钮后根据id跳转到相应的文章详情页: 这里值得注意的点是我用了swiper组件的 bindchange 事件来获取到当前信息的数组下标,实现了动态改变查看按钮绑定信息id值的效果: 如果还有不懂的地方欢迎加入(173683895)微信小程序开发交流群. 二:效果图: 三:完整源码 1.封装成一个组件: <!-- //滚动 --> <template

Android自定义图文跑马灯效果

之前的需求是用FlipperView来实现上下翻动效果,但是发现数据有点长会造成一屏幕放不下三条数据,后来改为跑马灯,但是只有文字的跑马灯TextView自己就有,但是要求文字后面带一个小图标怎们办呢? (1).MainActivity.java: public class HomeFragment extends BaseFragment { private MarqueeScroll mMarqueeScroll; private int[] name_tv = {R.id.name_tv1

JS实现单行文字不间断向上滚动的方法

本文实例讲述了JS实现单行文字不间断向上滚动的方法.分享给大家供大家参考.具体分析如下: 前几天帮一个朋友写了一个单行文字不间断向上滚动的JS效果,现在分享给需要的weber.先看HTML和CSS代码: CSS: 复制代码 代码如下: .wrap{padding:10px;border:1px #ccc solid; width:500px;margin:20px auto;} .roll-wrap{height:130px;overflow:hidden;} HTML: 复制代码 代码如下:

基于jquery的文字向上跑动类似跑马灯的效果

想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用jquery写了个 页面代码 <div class="recordList"> <ul class="tpl-rotate-recordList" style="margin-top: 0px;"> <li class="tpl-rotate-recordList-item"> 恭喜187****5204获得1000RBM &

基于jquery实现的文字向上跑动类似跑马灯的效果

想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用jquery写了个 页面代码 复制代码 代码如下: <div class="recordList"> <ul class="tpl-rotate-recordList" style="margin-top: 0px;"> <li class="tpl-rotate-recordList-item"> 恭喜187****5204

移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)

在ionic App中遇到一个文字上下循环滚动的效果实现,网上查了之后才知道有个通俗的名字-跑马灯. 这里借助了jQuery库的选择器和动画函数,并且把jquery的操作封装到指令里.先看指令代码: angular.module('starter') .directive('slideScroll', function ($window, $timeout) { return { restrict: 'AE', link: function (scope, element, attr) { va