重要的一点,就是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. cocos2d-x2.2+win7+vs2010+python安装配置

    个人网站http://www.ravedonut.com/ 1.安装vs2010 2.解压cocos2d-x,打开cocos2d-win32.vc2012.sln,编译,然后运行Hellocpp成功即 ...

  2. android调试之adb

    ADB 其实大部分的PC开发机与Android设备的操作都是通过adb(android debug bridge)技术完成的,这是一个C/S架构的命令行工具,主要由三个部分组成 运行在PC开发机上的命 ...

  3. Identity Server 4 原理和实战(完结)_建立Angular 客户端

    https://material.angular.io/ 第一部是安装angular cli --prefix=ac:前缀 --routing:默认使用路由 style=scss:样式使用scss - ...

  4. C# 获取汉字的拼音首字母和全拼(含源码)

    C# 获取汉字的拼音首字母 一种是把所有中文字符集合起来组成一个对照表:另一种是依照汉字在Unicode编码表中的排序来确定拼音的首字母.碰到多音字时就以常用的为准(第一种方法中可以自行更改,方法为手 ...

  5. [3dmax教程] 人物+骨骼+蒙皮+动画教程

    人物+骨骼+蒙皮+动画完整教程选准备好一个人,做人的方法我在这里就不做了,大家可以学都用poser来做一个.  在大腿里建立4根骨骼! 在前视图中移动如图所示位置! 做一段简单的骨骼向前伸的动画,做4 ...

  6. GPDB外部表创建示例

    创建以|为分隔符的外部表CREATE EXTERNAL TABLE ext_expenses ( name text,date date, amount float4, category text, ...

  7. samba服务器实验指导

    第一节.samba是干什么的?它有什么用? Samba(SMB是其缩写) 是一个网络服务器,它是Linux作为本地服务器最重要的一个服务,用于Linux和Windows共享文件之用:Samba可以用于 ...

  8. [題解]luogu_P1854 花店櫥窗佈置

    來源:題解 一開始看不懂題目,一萬年了終於看懂 f [ i ] [ j ] 表示第i朵花放在第j個花瓶中最大美學值,(花是必須用完嗎?) 顯然放i-1朵花至少要放到前i-1個瓶子里,最多放到前j-1個 ...

  9. C#基础之析构函数

  10. 手动释放Linux内存

    查看内存: [root@iZ9dp52tlpqyihuisujjswZ bin]# free -h total used free shared buff/cache available Mem: 3 ...