javascript:文字不间断向左移动的实例代码


Posted in Javascript onAugust 08, 2013
<!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"> 
<head> 
<script type="text/javascript"><!-- 
//主要的滚动函数 
//如果滚动的效果正好是需要的效果 
//那么你只需要直接调用这个函数即可 
var moveTag=function(obj){ 
var _this = this; 
_this.speed = 10;//移动的速度 
_this.space = 10 * _this.speed;//移动间隔的时间 
obj.scrollLeft=0;//初始化滚动的位置(主要是考虑到需要兼容FF) 
var divList = obj.getElementsByTagName("DIV"); 
var obj2 = new Object();//包含所有滚动列的div 
for(var i=0;i<divList.length;i++){ 
if(divList[i].parentNode==obj){ 
obj2=divList[i]; 
break; 
} 
} 
//得到需要滚动的所有列 
//divList循环两次的目的是为了不让样式名称影响滚动代码 
//也就是尽可能的减少滚动代码与样式名称的耦合 
var cellCount = 0; 
_this.cellList = new Array(); 
for(var i=0;i<divList.length;i++){ 
if(divList[i].parentNode==obj2){ 
cellCount++; 
_this.cellList.push(divList[i]);//需要滚动的所有列 
} 
} 
_this.resetCellList=function(){ 
//这个函数主要是为了让滚动不间断 
//在每次滚动到终点的时候需要使用 
//将已经滚动过的列移到当前列之后 
for(var i=0;i<_this.cellList.length-1;i++){ 
obj2.removeChild(_this.cellList[i]); 
obj2.appendChild(_this.cellList[i]); 
} 
//重新获取_this.cellList 
_this.cellList = new Array(); 
for(var i=0;i<divList.length;i++){ 
if(divList[i].parentNode==obj2) _this.cellList.push(divList[i]); 
} 
//alert(_this.cellList.length); 
} 
_this.resetForMoveRight=function(){ 
//这个函数主要是为了让滚动不间断 
//与resetCellList的区别是这个函数是为了向右不间断滚动使用的 
//在每次滚动到起点的时候需要使用 
//将当前列之后的所有列移动到当前列之前 
if(_this.cellList.length>0){ 
for(var i=_this.cellList.length-1;i>0;i--){ 
obj2.removeChild(_this.cellList[i]); 
obj2.insertBefore(_this.cellList[i],obj2.childNodes[0]); 
} 
} 
//重新获取_this.cellList 
_this.cellList = new Array(); 
for(var i=0;i<divList.length;i++){ 
if(divList[i].parentNode==obj2) _this.cellList.push(divList[i]); 
} 
//alert(_this.cellList.length); 
} 
//alert(_this.cellList.length); 
obj2.style.width = parseInt(obj.offsetWidth * cellCount) + "px"; 
// 
//alert(_this.endScroll); 
var cellScroll = obj.offsetWidth;//每次滚动需要滚动多少距离 
var endScroll = obj2.offsetWidth - cellScroll;//计算滚动条的终点位置 
//alert(_this.cellScroll); 
// 
_this.moveLength = cellScroll;//初始化移动偏量,为0的时候,在页面加载完毕之后将会立即移动;等于_this.cellScroll表示延迟一会再开始执行 
_this.scrollEnd = false; 
_this.scrollTimes = 0; 
//休息一会儿 
_this.sleep=function(){ 
_this.scrollTimes++; 
if(_this.scrollTimes>=_this.space){ 
_this.scrollTimes=0; 
_this.moveLength=0; 
} 
}; 
_this.moveStart = true;//是否开始移动 
_this.isMoveLeft = true;//是否向左移动 
_this.move=function(){ 
obj.onmouseover=function(){ 
_this.moveStart=false; 
}; 
obj.onmouseout=function(){ 
_this.moveStart=true; 
}; 
//重新设定cellList 
if(obj.scrollLeft>=endScroll && _this.isMoveLeft){//向左移动,并且已经移动到尽头 
if(_this.moveLength > 0) _this.moveLength = cellScroll;//调整 
if(_this.cellList.length>0){ 
_this.resetCellList();//更新cellList 
obj.scrollLeft=0; 
}else{ 
_this.scrollEnd = true; 
} 
}else if(obj.scrollLeft<=0 && !_this.isMoveLeft){//向右移动,并且已经移动到尽头 
if(_this.moveLength > 0) _this.moveLength = cellScroll;//调整 
if(_this.cellList.length>0){ 
_this.resetForMoveRight();//更新cellList 
obj.scrollLeft=endScroll; 
}else{ 
_this.scrollEnd = false; 
} 
} 
// 
if(_this.scrollEnd){//向左移动 
if(_this.moveLength<cellScroll && _this.moveStart){ 
obj.scrollLeft--; 
_this.moveLength++; 
}else if(_this.moveLength>=cellScroll){ 
_this.sleep(); 
} 
} 
else{//向右移动 
if(_this.moveLength<cellScroll && _this.moveStart){ 
obj.scrollLeft++; 
_this.moveLength++; 
}else if(_this.moveLength>=cellScroll){ 
_this.sleep(); 
} 
} 
}; 
//自动 
_this.start=function(){ 
setInterval(_this.move,_this.speed); 
}; 
//右移动 
_this.moveRight=function(){ 
_this.scrollEnd = true;//已经滚动到尽头 
_this.isMoveLeft = false;//向右滚动 
_this.scrollTimes=0; 
}; 
//左移动 
_this.moveLeft=function(){ 
_this.scrollEnd = false;//没有滚动到尽头 
_this.isMoveLeft = true;//向左滚动 
_this.scrollTimes=0; 
}; 
}; 
// --></script> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style><!-- 
#list{border:#ccc 1px solid;} 
#list div div{line-height:30px;text-align:center;border-right:#ccc 1px solid;} 
#list{width:150px;height:30px;overflow:hidden;}/*必须的属性,宽度、高度可以自定义*/ 
#list div div{width:150px;height:30px;float:left;}/*必须的属性,宽度、高度最好与#list的定义一样*/ 
--></style><style mce_bogus="1">#list{border:#ccc 1px solid;} 
#list div div{line-height:30px;text-align:center;border-right:#ccc 1px solid;} 
#list{width:150px;height:30px;overflow:hidden;}/*必须的属性,宽度、高度可以自定义*/ 
#list div div{width:150px;height:30px;float:left;}/*必须的属性,宽度、高度最好与#list的定义一样*/</style> 
<title>无标题文档</title> 
</head> 
<body> 
<div id="list"> 
<div> 
<div>第一列</div> 
<div>第二列</div> 
<div>第三列</div> 
<div>第四列</div> 
<div>第五列</div> 
</div> 
</div> 
<a href="javascript:moveLeft()" mce_href="javascript:moveLeft()">左移动</a> 
<a href="javascript:moveRight()" mce_href="javascript:moveRight()">右移动</a> 
<script type="text/javascript"><!-- 
var move=new moveTag(document.getElementById("list")); 
move.start(); 
move.speed=10;//滚动的速度,默认为10 
//move.space=0;//滚动间隔时间,默认为滚动速度 * 16 
//左移动只能移动到最左边,无法一直向左移 
//为了使滚动没有间断,所以最左边的坐标是不断变化的 
//move.moveLeft();//这样可以设置默认自右向左移动 
//move.moveRight();//与move.moveLeft()反方向 
var moveLeft=move.moveLeft; 
var moveRight=move.moveRight; 
//想要一个页面上有N个地方滚动? 
//没问题!只需要多new几个实例即可实现 
// --></script> 
</body> 
</html>
Javascript 相关文章推荐
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
js获得地址栏?问号后参数的方法
Aug 08 #Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 #Javascript
js动态创建、删除表格示例代码
Aug 07 #Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 #Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 #Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 #Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 #Javascript
You might like
用Flash图形化数据(二)
2006/10/09 PHP
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
在MAC上搭建python数据分析开发环境
2016/01/26 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
动物科学专业求职信
2014/07/27 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
丧事答谢词大全
2015/09/30 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL
警用民用对讲机找不同
2022/02/18 无线电
如何使用SQL Server语句创建表
2022/04/12 SQL Server