<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<script type= "Text/javascript" ><!--
The main scrolling function
If the effect of scrolling is exactly the desired effect
So you just need to call this function directly
var movetag=function (obj) {
var _this = this;
_this.speed = speed at which 10;//moves
_this.space = ten * _this.speed;//the time of the move interval
obj.scrollleft=0;//the location where scrolling is initialized (primarily considering the need to be compatible with FF)
var divlist = obj.getelementsbytagname ("DIV");
var obj2 = new Object ()//div containing all scrolling columns
for (Var i=0;i<divlist.length;i++) {
if (divlist[i].parentnode==obj) {
Obj2=divlist[i];
Break
}
}
Get all the columns you want to scroll
The purpose of the divlist loop two times is to not allow the style name to affect the scrolling code
Which is to reduce the coupling of the scrolling code and the style name as much as possible
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]);//All columns that need to be scrolled
}
}
_this.resetcelllist=function () {
This function is primarily designed to make scrolling uninterrupted
It needs to be used every time you scroll to the end
After you move a column that has already been scrolled to the current column
for (Var i=0;i<_this.celllist.length-1;i++) {
Obj2.removechild (_this.celllist[i]);
Obj2.appendchild (_this.celllist[i]);
}
Re-acquire _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 () {
This function is primarily designed to make scrolling uninterrupted
The difference with resetcelllist is that this function is used to scroll to the right without interruption.
It needs to be used every time you scroll to the starting point
Before moving all columns after the current column to the current column
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]);
}
}
Re-acquire _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;//How much distance each scroll needs to scroll
var Endscroll = obj2.offsetwidth-cellscroll;//Calculates the end position of the scroll bar
alert (_this.cellscroll);
//
_this.movelength = cellscroll;//to initialize the shift offset, when the page is loaded, it will move immediately after loading; equals _this.cellscroll indicates that the delay will begin again.
_this.scrollend = false;
_this.scrolltimes = 0;
Rest for a while.
_this.sleep=function () {
_this.scrolltimes++;
if (_this.scrolltimes>=_this.space) {
_this.scrolltimes=0;
_this.movelength=0;
}
};
_this.movestart = true;//whether to start moving
_this.ismoveleft = true;//whether to move left
_this.move=function () {
Obj.onmouseover=function () {
_this.movestart=false;
};
Obj.onmouseout=function () {
_this.movestart=true;
};
Re-set Celllist
if (Obj.scrollleft>=endscroll && _this.ismoveleft) {//left to move, and has moved to the end
if (_this.movelength > 0) _this.movelength = cellscroll;//adjustment
if (_this.celllist.length>0) {
_this.resetcelllist ()//Update celllist
obj.scrollleft=0;
}else{
_this.scrollend = true;
}
}else if (obj.scrollleft<=0 &&!_this.ismoveleft) {//moving to the right, and has moved to the end
if (_this.movelength > 0) _this.movelength = cellscroll;//adjustment
if (_this.celllist.length>0) {
_this.resetformoveright ()//Update celllist
Obj.scrollleft=endscroll;
}else{
_this.scrollend = false;
}
}
//
if (_this.scrollend) {//Move Left
if (_this.movelength<cellscroll && _this.movestart) {
obj.scrollleft--;
_this.movelength++;
}else if (_this.movelength>=cellscroll) {
_this.sleep ();
}
}
else{//move to the right
if (_this.movelength<cellscroll && _this.movestart) {
obj.scrollleft++;
_this.movelength++;
}else if (_this.movelength>=cellscroll) {
_this.sleep ();
}
}
};
Automatic
_this.start=function () {
SetInterval (_this.move,_this.speed);
};
Move right
_this.moveright=function () {
_this.scrollend = true;//has scrolled to an end
_this.ismoveleft = false;//Scroll Right
_this.scrolltimes=0;
};
Move left
_this.moveleft=function () {
_this.scrollend = false;//does not scroll to the end
_this.ismoveleft = true;//Scroll Left
_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;} /* Required properties, width, height can be customized * *
#list div Div{width:150px;height:30px;float:left;} /* Required properties, width, height preferably the same as the definition of #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;} /* Required properties, width, height can be customized * *
#list div Div{width:150px;height:30px;float:left;} /* Required properties, width, height preferably the same as the definition of #list */</style>
<title> Untitled Document </title>
<body>
<div id= "List" >
<div>
<div> first column </div>
<div> second column </div>
<div> third column </div>
<div> Fourth Column </div>
<div> Fifth Column </div>
</div>
</div>
<a href= "Javascript:moveleft ()" mce_href= "Javascript:moveleft ()" > Left mobile </a>
<a href= "Javascript:moveright ()" mce_href= "Javascript:moveright ()" > Right Move </a>
<script type= "Text/javascript" ><!--
var move=new movetag (document.getElementById ("list"));
Move.start ();
move.speed=10;//the speed of scrolling, defaults to 10
move.space=0;//scrolling interval, default to scrolling speed * 16
Move left only to leftmost, can't move left
To make the scroll uninterrupted, the leftmost coordinates are constantly changing
Move.moveleft ();//So you can set the default from right to left
Move.moveright ()///Move.moveleft () opposite direction
var moveleft=move.moveleft;
var moveright=move.moveright;
Want to scroll on a page with n places?
No problem! Only a few more instances of new can be implemented
--></script>
</body>
