文字自动自左向右滚动的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却不能正常显示. 例如蒙古文字,传统蒙文是竖排书写.如下图:传统蒙古文排文方式,<蒙古 ...
随机推荐
- cocos2d-x2.2+win7+vs2010+python安装配置
个人网站http://www.ravedonut.com/ 1.安装vs2010 2.解压cocos2d-x,打开cocos2d-win32.vc2012.sln,编译,然后运行Hellocpp成功即 ...
- android调试之adb
ADB 其实大部分的PC开发机与Android设备的操作都是通过adb(android debug bridge)技术完成的,这是一个C/S架构的命令行工具,主要由三个部分组成 运行在PC开发机上的命 ...
- Identity Server 4 原理和实战(完结)_建立Angular 客户端
https://material.angular.io/ 第一部是安装angular cli --prefix=ac:前缀 --routing:默认使用路由 style=scss:样式使用scss - ...
- C# 获取汉字的拼音首字母和全拼(含源码)
C# 获取汉字的拼音首字母 一种是把所有中文字符集合起来组成一个对照表:另一种是依照汉字在Unicode编码表中的排序来确定拼音的首字母.碰到多音字时就以常用的为准(第一种方法中可以自行更改,方法为手 ...
- [3dmax教程] 人物+骨骼+蒙皮+动画教程
人物+骨骼+蒙皮+动画完整教程选准备好一个人,做人的方法我在这里就不做了,大家可以学都用poser来做一个. 在大腿里建立4根骨骼! 在前视图中移动如图所示位置! 做一段简单的骨骼向前伸的动画,做4 ...
- GPDB外部表创建示例
创建以|为分隔符的外部表CREATE EXTERNAL TABLE ext_expenses ( name text,date date, amount float4, category text, ...
- samba服务器实验指导
第一节.samba是干什么的?它有什么用? Samba(SMB是其缩写) 是一个网络服务器,它是Linux作为本地服务器最重要的一个服务,用于Linux和Windows共享文件之用:Samba可以用于 ...
- [題解]luogu_P1854 花店櫥窗佈置
來源:題解 一開始看不懂題目,一萬年了終於看懂 f [ i ] [ j ] 表示第i朵花放在第j個花瓶中最大美學值,(花是必須用完嗎?) 顯然放i-1朵花至少要放到前i-1個瓶子里,最多放到前j-1個 ...
- C#基础之析构函数
- 手动释放Linux内存
查看内存: [root@iZ9dp52tlpqyihuisujjswZ bin]# free -h total used free shared buff/cache available Mem: 3 ...