重要的一点，就是scrollLeft一直在变化。对象一直在移动，参照物没有动。

代码：

css：

#div1{display:black;width:110px;height:50px;line-height:50px;white-space:nowrap;overflow:hidden;background-color:#a2a2a2;margin:15px;padding:5px 15px;}

span{display:inline-block;color:#fff;padding-right:20px;}

html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta charset="utf-8"/>

<title>mq</title>

 </head>

 <body>

    <div id="div1">

        <span id="span1">天天币专享项</span><span id="span2"></span>

    </div><span id="span1">天天币专享项目A</span>

 </body>

</html>

js:

var div,span,span2,i,timer;

        function init(){

            setInterval(ttb,50);

        }

        function ttb(){

            div = getId('div1');

            span = getId('span1');

            span2 = getId('span2');

            span2.innerHTML = span.innerHTML;

            if(span.offsetWidth <= div.scrollLeft){

                div.scrollLeft -= span.offsetWidth;

            }

            else {

                div.scrollLeft++;

            }

        }

        function getId(Id){

            return document.getElementById(Id);

        }

        window.onload = init();

文字自动自左向右滚动的js代码的更多相关文章

  1. jQuery + css 公告从左往右滚动

    $(function() { // 公告滚动 $(".notice-content").textScroll(); }); /** * 从右往左滚动文字 * @returns {u ...

  2. 实现公告栏无缝滚动的js代码（转）

    <!DOCTYPE HTML> <html> <head> <meta charset="gb2312" /> <title& ...

  3. 滚动条响应鼠标滑轮事件实现上下滚动的js代码

    <script type="text/javascript"> var scrollFunc=function(e){ e=e || window.event; if( ...

  4. 360自动抢票还不够，几行js代码设置无人值守

    360就是牛逼哄哄的...... 但是最近在使用360浏览器抢票的时候还是发现了一些体验不好的地方,比如搞着搞着就退出了登录,有时候能帮你自动登录进去,但是自动登录之后又不会帮你自动开始抢.然后验证码 ...

  5. 图片左右滚动的js代码

    html代码 <div class="demo" id="demo" style="overflow:hidden; width:660px; ...

  6. 【Android】Android开发可以手动进行控制的跑马灯效果，包括从左到右，以及从右到左，

    作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现 ...

  7. 可以左右移动横向无缝滚动的JS图片展示代码

    在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...

  8. 图片滚动（UP）的JS代码详解（offsetTop、scrollTop、offsetHeigh）【转】

    源地址 信息技术教材配套的光盘里有一段设置图片滚动的JS代码,与网络上差不多,实现思路:一个设定高度并且隐藏超出它高度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,dem ...

  9. Ueditor增加文字竖排显示和从右向左输入（支持蒙古文和维吾尔文）

    平时我们在ueditor中都是输入的中文,排版都是从左向右输入.但是当输入一些少数民民族言时,ueditor却不能正常显示. 例如蒙古文字,传统蒙文是竖排书写.如下图:传统蒙古文排文方式,<蒙古 ...

随机推荐

  1. 3.11-3.14 Hive 企业使用优化2

    一.查看HQL执行计划explain 1.explain hive在执行的时候会把所对应的SQL语句都会转换成mapreduce代码执行,但是具体的MR执行信息我们怎样才能看出来呢? 这里就用到了ex ...

  2. java集合框架之ArrayList与LinkedList的区别

    参考http://how2j.cn/k/collection/collection-arraylist-vs-linkedlist/690.html#nowhere ArrayList和LinkedL ...

  3. Cocos2d-x 屏幕适配新解(比较全面比较详细)

    本文出自 [无间落叶]原文地址:http://blog.leafsoar.com/archives/2013/05-10-19.html 为了适应移动终端的各种分辨率大小,各种屏幕宽高比,在 coco ...

  4. Winform禁止程序多开 &&禁止多开且第二次激活第一次窗口

    一.禁止多开问题,运用Mutex锁 在Program.cs中运用Mutex锁 bool createNew;using (System.Threading.Mutex mutex = new Syst ...

  5. Linux系统调用及其效率

    操作系统相关概念: 操作系统---管理计算机硬件与软件资源的软件,是用户与系统操作交互的接口,为在它上面运行的程序提供服务. 操作系统内核 ----操作系统的核心.负责管理系统的进程.内核.设备驱动程 ...

  6. shell初级-----更多结构化命令

    for命令 bash shell提供了for命令,允许你创建一个遍历一系列的循环. for var in list do commands done 1.读取列表中的值 for命令最基本的用法就是遍历 ...

  7. vue中引入公共方法并使用

    test.js文件(公共js文件) function myFun() { console.log('this is my function') } export { myfun } // 2 expo ...

  8. SCUT - 114 - 作业之数学篇 - 杜教筛

    https://scut.online/p/114 \(A(n)=\sum\limits_{i=1}^{n} \frac{lcm(i,n)}{gcd(i,n)}\) \(=\sum\limits_{i ...

  9. PyInstaller 库

    将.py 源代码转换成无需源代码的可执行文件 首先,PyInstaller是第三方库,需要下载额外安装(安装第三方库需要使用pip工具) 步骤: 1.用管理员运行cmd命令行 "pip in ...

  10. web.xml中一个filter配置多个url-pattern

    需要在filter标签后添加多个filter-mapping标签,一个url-pattern就对应一个filter-mapping标签,不能直接把多个url-pattern配置到同一个filter-m ...