手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript:文字不间断向左移动的实例代码
javascript:文字不间断向左移动的实例代码
摘要:复制代码代码如下:=endScroll&&_this.isMoveLeft){//向左移动,并且已经移动到尽头if(_this.moveLe...

复制代码 代码如下:

<!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"><){

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><></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"><></script>

</body>

</html>

【javascript:文字不间断向左移动的实例代码】相关文章:

javascript 动态添加表格行

jQuery实现div随意拖动的实例代码(通用代码)

javascript相关事件的几个概念

javascript实现行拖动的方法

javascript中this的四种用法

javascript生成不重复的随机数

JavaScript判断图片是否已经加载完毕的方法汇总

Javascript类型转换的规则实例解析

javascript中动态函数用法

浅析JavaScript中的事件机制

精品推荐
分类导航