文字自动自左向右滚动的js代码

重要的一点,就是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();
时间: 2025-01-12 01:50:59

文字自动自左向右滚动的js代码的相关文章

jQuery + css 公告从左往右滚动

$(function() { // 公告滚动 $(".notice-content").textScroll(); }); /** * 从右往左滚动文字 * @returns {undefined} */ $.fn.textScroll = function() { // 滚动步长(步长越大速度越快) var step_len = 60; var this_obj = $(this); var child = this_obj.children(); var this_width =

JS控制网页图片斜向滚动(图片除了上、下、左、右滚动,还有斜向滚动哦)

<html><head><title>图片斜向移动</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head><body background="http://p18.qhimg.com/t010e15dc26698ab2a8.png"><script

360自动抢票还不够,几行js代码设置无人值守

360就是牛逼哄哄的...... 但是最近在使用360浏览器抢票的时候还是发现了一些体验不好的地方,比如搞着搞着就退出了登录,有时候能帮你自动登录进去,但是自动登录之后又不会帮你自动开始抢.然后验证码几次失败之后 流程就停住了, 所以必须的有人看守. 由于360浏览器是使用Chrome内核 而且提供了调试功能,所以我们写一小段js让360达到无人值守抢票的目的 setInterval(function () { if ($('.username').html() != undefined &&am

实现公告栏无缝滚动的js代码(转)

<!DOCTYPE HTML> <html> <head> <meta charset="gb2312" /> <title></title> <style> ul { margin:100px; height:22px; border:1px solid red; overflow:hidden; } li { height:22px; line-height:22px; font-size:12px

不同终端实现自动跳转到相应页面的js代码

1 2 3 4 <script type="text/javascript">     if(/Android|webOS|iPhone|iPod|BlackBerry|Windows CE|ipad|Windows Phone/i.test(navigator.userAgent)){     if(window.location.href.indexOf("?pc")<0){try{window.location.href="/3g/

图片滚动(UP)的JS代码详解(offsetTop、scrollTop、offsetHeigh)【转】

源地址 信息技术教材配套的光盘里有一段设置图片滚动的JS代码,与网络上差不多,实现思路:一个设定高度并且隐藏超出它高度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo的scrollTop或者scrollLeft达到滚动的目的,当demo1与demo2的交界处滚动至demo顶端时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的. 代码如下:  <DIV id=demo

在Button上、下、左、右位置添加图片和文字

转载请注明出处:http://blog.csdn.net/droyon/article/details/37564419 很多人有如标题所述的需求,而且大多数人采用了自定义组件解决了需求,其实还可以有更"懒"的方法. 1.先附效果图: 2.方案. 首先,Activity.java public class MainActivityTest extends Activity{ @Override protected void onCreate(Bundle savedInstanceSt

【思想篇之爱左看右】

爱左看右 当年在挖掘特洛伊古城的时候一位英国考古学家发现了一面古铜镜,铜镜背后雕刻了一段古怪难懂的铭文,他穷尽毕生精力,请教了不少古希腊文专家,都无法破译其中的奥妙.    考古学家逝世后,这面镜子就静静地躺在大英博物馆里,直到20年后,有一天,博物馆里来了一个英俊的年轻人,在博物馆馆长的陪同下,他径直走到古镜的面前,在工作人员的协助的下打开玻璃柜,小心翼翼地取出铜镜,翻过来放在一块红色天鹅绒上.古镜背后的铭文在红色的背景上反射着冷冷的金色光泽. 年轻人从背囊里拿了一面普通的镜子出来,照着古铜镜

linq to entity 左联接 右连接 以及内连接写法的区别(转)

linq to entity 左连接 右连接 以及内连接写法的区别  还有就是用lambda表达式怎么写,那个效法效率高些? [解决办法]左连右连还是内连这个其实你不需要关心.只需要根据实体的映射关系写查询,框架会自动帮你生成的.至于linq查询语法与扩展方法的效率,应该是一样的,比如: C# code var users=(from u in db.Users where u.UserRoleId==1 select u) .ToList(); var users2=db.Users.Wher