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 相关文章推荐
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
两个Javascript小tip资料
Nov 23 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
js实现石头剪刀布游戏
Oct 11 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 Javascript
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
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
PHP curl使用实例
2015/07/02 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
python将字符串转换成json的方法小结
2019/07/09 Python
Python for循环与getitem的关系详解
2020/01/02 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
公务员培训心得体会
2013/12/28 职场文书
医学生个人求职信范文
2014/02/07 职场文书
专项法律服务方案
2014/06/11 职场文书
励志演讲稿500字
2014/08/21 职场文书
三严三实对照检查材料
2014/08/25 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python