重要的一点，就是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. PHP文件操作的经典案例

    <?php /* 遍历目录函数,只读取目录的最外层的内容 */ function readDirectory($path){ $handle = opendir($path); while(($ ...

  2. 微信小程序中时间戳和日期的相互转换

    在微信开发小程序时,后台传入的诗句可能是 时间戳 而不是日期  或者需要把日期转换成时间戳来做出相应的处理时我们将用到时间戳和日期的相互转换微信小程序里, 时间戳转化为日期格式,支持自定义.拷贝至项目 ...

  3. art-template在项目中的应用

    art-template 是一个简约.超快的模板引擎.它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器. 下面介绍在 ...

  4. WPF 设置 Label.MouseDoubleClickEvent

    facLabel.AddHandler(Label.MouseDoubleClickEvent, new MouseButtonEventHandler((o, a) => { facLabel ...

  5. 51nod1416(dfs)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1416 题意:中文题诶- 思路:dfs 搜索同一颜色的点.. 只 ...

  6. __setitem__,__getitem,__delitem__

    目录 __setitem__ __getitem__ __delitem__与__delattr__ class Foo: def __init__(self, name): self.name = ...

  7. shell chpasswd 命令 修改用户密码

    使用useradd 命令增加一个用户后,它默认是没有设置密码的.如果需要给用户设置或者修改密码,一般会使用passwd命名. 但是passwd命令有一个缺陷,它需要人工交互操作. 如果你是一名系统管理 ...

  8. kuangbin大佬的高斯消元模板

    dalao解释的博客 #include <bits/stdc++.h> using namespace std; ; int a[MAXN][MAXN];//增广矩阵 int x[MAXN ...

  9. iOS开发 - 多线程实现方案之NSThread篇

    NSThread API //类方法:创建一个线程 + (void)detachNewThreadWithBlock:(void (^)(void))block API_AVAILABLE(macos ...

  10. 自动化脚本- 安装更换Python3.5

    本脚本所有信息: 1:判断是不是root用户,是则继续不是则退出脚本输出信息2:定义自己的版本3:根据用户输入的版本号,来下载对应的版本包4:使用系统命令wget来下载,注意wet后面有一个空格5:o ...