重要的一点，就是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. win7 win8 快捷键直接调出任务管理器

    问:windos7如何设置按ctrl+alt +delete三个键就直接出现任务管理器. 答:你应该这样按Ctrl+shift+esc,这样就可以直接调出任务管理器,而且一只手就可以完成,大拇指按Ct ...

  2. 【原创】Gitbook使用

    [常用命令] 1.gitbook install 安装依赖模块 2.gitbook build 编译,结果输出在_book文件夹下 3.gitbook serve 本机预览,默认端口为4000 [注意 ...

  3. js 调用栈机制与ES6尾调用优化介绍

    调用栈的英文名叫做Call Stack,大家或多或少是有听过的,但是对于js调用栈的工作方式以及如何在工作中利用这一特性,大部分人可能没有进行过更深入的研究,这块内容可以说对我们前端来说就是所谓的基础 ...

  4. spring基于注解的IOC

    曾经的XML配置: <bean id="accountService" class="com.itheima.service.impl.AccountService ...

  5. IntelliJ IDEA 激活

    方法1 进入ide主页面,help-register-license server,然后输入 http://idea.iteblog.com/key.php   或者   http://idea.la ...

  6. [Xcode 实际操作]九、实用进阶-(19)重写父类的绘图方法，使用图形上下文绘制自定义图形

    目录:[Swift]Xcode实际操作 本文将演示如何使用图形上下文,绘制自定义图形. 使用快捷键[Command]+[N]创建一个新的类文件. (在项目文件夹[DemoApp]上点击鼠标右键[New ...

  7. eclipse添加tomcat运行环境

  8. JDBC连接池一 自定义连接池

    package com.mozq.jdbc; import java.io.IOException; import java.io.InputStream; import java.sql.Conne ...

  9. Excel - 使用公式将秒转换为分+秒

    场景 现在有个需求:将Excel里的时间转换为分+秒的格式,如下: time(second) time(min+second) 482.712 XXmin,XXs 480.737 XXmin,XXs ...

  10. 转 JS 中的 this

    转载至:https://segmentfault.com/a/1190000009215974 this的指向问题应该是让每一个前端er都头疼的问题,我也一样,曾经遇到甚至都是一顿乱猜.最近在研读一些 ...