文字自动自左向右滚动的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();
文字自动自左向右滚动的js代码的更多相关文章
- jQuery + css 公告从左往右滚动
$(function() { // 公告滚动 $(".notice-content").textScroll(); }); /** * 从右往左滚动文字 * @returns {u ...
- 实现公告栏无缝滚动的js代码(转)
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312" /> <title& ...
- 滚动条响应鼠标滑轮事件实现上下滚动的js代码
<script type="text/javascript"> var scrollFunc=function(e){ e=e || window.event; if( ...
- 360自动抢票还不够,几行js代码设置无人值守
360就是牛逼哄哄的...... 但是最近在使用360浏览器抢票的时候还是发现了一些体验不好的地方,比如搞着搞着就退出了登录,有时候能帮你自动登录进去,但是自动登录之后又不会帮你自动开始抢.然后验证码 ...
- 图片左右滚动的js代码
html代码 <div class="demo" id="demo" style="overflow:hidden; width:660px; ...
- 【Android】Android开发可以手动进行控制的跑马灯效果,包括从左到右,以及从右到左,
作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现 ...
- 可以左右移动横向无缝滚动的JS图片展示代码
在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...
- 图片滚动(UP)的JS代码详解(offsetTop、scrollTop、offsetHeigh)【转】
源地址 信息技术教材配套的光盘里有一段设置图片滚动的JS代码,与网络上差不多,实现思路:一个设定高度并且隐藏超出它高度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,dem ...
- Ueditor增加文字竖排显示和从右向左输入(支持蒙古文和维吾尔文)
平时我们在ueditor中都是输入的中文,排版都是从左向右输入.但是当输入一些少数民民族言时,ueditor却不能正常显示. 例如蒙古文字,传统蒙文是竖排书写.如下图:传统蒙古文排文方式,<蒙古 ...
随机推荐
- UVaLive 3983 Robotruck (DP + 单调队列)
题意:有n个垃圾,第i个垃圾坐标为(xi,yi),重量为wi,有一个机器人,要按照编号从小到大的顺序剑气所有的垃圾兵扔进垃圾桶,垃圾桶在原点, 每次总重量不能超过C,两点间距离为曼哈顿距离,求出最短的 ...
- 51nod - 1188 - 最大公约数之和 V2 - 数论
https://www.51nod.com/Challenge/Problem.html#!#problemId=1188 求\(\sum\limits_{i=1}^{n-1}\sum\limits_ ...
- Dota2技能系统设计分析
http://blog.csdn.net/langresser_king/article/details/46776701 前两周写完了新游戏的技能系统.虽然也算灵活,但是跟Dota2的技能系统设计比 ...
- game学习资源收集
一些国外网站 游戏ai相关 http://aigamedev.com/ http://www.gdcvault.com/ http://www-cs-students.stanford.edu/~am ...
- NSString 是否存在空格
NSString *_string = [NSString stringWithFormat:@"123 456"]; NSRange _range = [_string rang ...
- hyperledger fabric 1.0.5 分布式部署 (一)
环境是个人虚拟机ubuntu 16.04 64 位版本 前期用户需要先安装好:gcc.g++.git 软件 安装 golang 首先给环境安装一个 go 语言环境,版本最好在1.8 以上 golang ...
- 1.python真的是万恶之源么?(初识python)
python真的是万恶之源么? 计算机基础及puthon了解 1.计算机基础知识 cpu : 相当于人类大脑,运算和处理问题 内存 : 临时存储数据,单点就消失,4G,8G,16G,32G 硬盘 : ...
- NET4.5中的Task.Run及Task.Delay方法
- Serervlet | 慕课课程实战 | 编写登录逻辑
Users.java package com.po; public class Users { private String username; private String password; pu ...
- PyAudio 实现录音 自动化交互实现问答
Python 很强大其原因就是因为它庞大的三方库 , 资源是非常的丰富 , 当然也不会缺少关于音频的库 关于音频, PyAudio 这个库, 可以实现开启麦克风录音, 可以播放音频文件等等,此刻我们不 ...