重要的一点，就是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. nodejs 循环的陷阱

    Node.js 的异步机制由事件和回调函数实现,一开始接触可能会感觉违反常规,但习惯 以后就会发现还是很简单的.然而这之中其实暗藏了不少陷阱,一个很容易遇到的问题就是 循环中的回调函数,初学者经常容易 ...

  2. SparseArray浅析

    HashMap是java里比较常用的一个集合类,我们一般用来缓存一些处理后的结果.但当你做一个Android项目时,在代码中定义这样一个变量,实例化时,Eclipse却给出了一个 performanc ...

  3. sql语句之约束条件

    not null约束,需设置默认值 sex enum('male','female') not null default 'male' unique 约束,值唯一 单列唯一: create table ...

  4. 1 python----pycharm本地部署spark

    下图相关工具连接 链接:https://pan.baidu.com/s/115XWf_Fc1yMiJytKJQXnFQ   密码:3jvr 好了,加油哟!

  5. Flex屏蔽并自定义鼠标右键菜单

    http://www.cnblogs.com/wuhenke/archive/2010/01/29/1659353.html Google Code上有一个RightClickManager的项目. ...

  6. Attributes.Add用途与用法

    Attributes.Add("javascript事件","javascript语句"); 如: this.TextBox1.Attributes.add(& ...

  7. webpack 4 基础知识点梳理

    目录 webpack安装 webpack配置文件 webpack核心概念 entry output loader plugins sourceMap webpack-dev-server 跨域 &am ...

  8. [Xcode 实际操作]一、博主领进门-(10)Xcode右侧界面介绍

    目录:[Swift]Xcode实际操作 本文将演示Xcode右侧界面介绍. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] 右上角第三个[辅助编辑器]按钮,将代码切 ...

  9. 第二十一篇 .NET高级技术之使用多线程（三）

    1.  单元模式和Windows Forms 单元模式线程是一个自动线程安全机制, 非常贴近于COM——Microsoft的遗留下的组件对象模型.尽管.NET最大地放弃摆脱了遗留下的模型,但很多时候它 ...

  10. Markdown - 如何给文本加下划线

    解决方法 Markdown可以和HTML的语法兼容,可以通过HTML的标签来实现效果: 写法 效果 <u>下划线</u> 下划线 这里解释下,u指的是underline下划线. ...