重要的一点，就是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. 1.1-1.4 hadoop调度框架和oozie概述

    一.hadoop调度框架 Linux Crontab Azkaban https://azkaban.github.io/ Oozie http://oozie.apache.org/ Zeus(阿里 ...

  2. Git 移除某些文件

    一.前言 在使用 Git 版本控制中,有些文件是不需要加入到版本控制中的.如 日志( log ).编译的文件.这些随时都在变的文件,使用用一个代码库的用户.只要稍稍修改一点,或者启动一下,就会变.容易 ...

  3. Codeforces 61B【怪在读题】

    搞不懂为什么DFS的写法崩了,然后乱暴力,因为题意不是很懂... 主要还是读题吧(很烦 #include <bits/stdc++.h> using namespace std; type ...

  4. Unity5.0 EventSystem事件系统的详细说明

    http://www.manew.com/blog-56596-2917.html?_dsign=53b25d5d unity5.0开发了新的UI系统UGUI,附带的事件系统EventSystem不仅 ...

  5. Bloomberg Desktop Api 关于历史Tick数据的一些参考

    使用WAPI命令可以看到当前BBG的Api情况. 目前2016年3月是V3的版本.其中有一个API Develper's Guide 中有Core Develper Guide的pdf, 里面提到了B ...

  6. [Xcode 实际操作]三、视图控制器-(1)使用UIScrollView展示多个视图可控制器

    目录:[Swift]Xcode实际操作 本文将演示使用滚动视图创建多个页面. [Create a new Xcode project]->[Single View App]->[Next] ...

  7. 安装Net::OpenSSH 库

    perl 离线安装 Net::OpenSSH 库 Net::OpenSSH 库 下载地址https://metacpan.org/pod/Net::OpenSSH 直接获取安装包命令 wget htt ...

  8. MyBatis逆向工程代码的生成以及使用详解(持续更新)

    逆向工程简介什么是逆向工程:        mybatis需要程序员自己编写sql语句,mybatis官方提供逆向工程,可以针对单表自动生成mybatis执行所需要的代码(mapper.java.ma ...

  9. excel输入值非法，限定了可以输入的数值怎么办

    回到excel的编辑界面,点击工具栏的“数据”标签,如图所示. 继续在“数据”标签的下面找到“数据验证”或“数据有效性”的按钮,点击该选项,然后继续下一步. 在弹出的选择框中选择“数据验证”选项,如图 ...

  10. python Windows和Linux路径表示问题

    Windows下路径是用‘\\’表示也可以使用'/',但是Linux下路径都是‘/’表示. 因为python是跨平台的,有时候程序迁移会出现错误. 解决办法1 可全部使用‘/’表示 解决办法2 我们可 ...