代码:
程序代码
<!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 ">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)</title>
</голова>
<тело>
<Тип СКРИПТА=текст/Javascript>
вар $ = функция (id) {
вернуть "строку" == идентификатор типа? document.getElementById(id): идентификатор;
};
вар Класс = {
создать: функция() {
функция возврата() {
this.initialize.apply(это, аргументы);
}
}
}
Object.extend = функция(назначение, источник) {
for (свойство var в исходном коде) {
назначение [свойство] = источник [свойство];
}
обратный пункт назначения;
}
функция addEventHandler(oTarget, sEventType, fnHandler) {
если (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} еще если (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} еще {
oTarget["on" + sEventType] = fnHandler;
}
};
вар Scroller = Class.create();
Скроллер.прототип = {
инициализировать: функция (idScroller, idScrollMid, параметры) {
вар oThis = это, oScroller = $(idScroller), oScrollMid = $(idScrollMid);
this.SetOptions(опции);
this.Side = this.options.Side || ["вверх"];//方向
this.scroller = oScroller; //对象
this.speed = this.options.Speed; //速度
this.timer = ноль; //时间
this.pauseHeight = 0; //定高
this.pauseWidth = 0; //定宽
это.пауза = 0; //定高(宽)
эта.сторона = 0; //参数
//用于上下滚动
this.heightScroller = parseInt(oScroller.style.height) || oScroller.offsetHeight;
this.heightList = oScrollMid.offsetHeight;
//用于左右滚动
this.widthScroller = parseInt(oScroller.style.width) || oScroller.offsetWidth;
this.widthList = oScrollMid.offsetWidth;
//js取不到css设置的height和width
oScroller.style.overflow = "hidden";
oScrollMid.appendChild(oScrollMid.cloneNode(true));
oScrollMid.appendChild(oScrollMid.cloneNode(true));
addEventHandler(oScroller, "mouseover", function() { oThis.Stop(); });
addEventHandler(oScroller, "mouseout", function() { oThis.Start(); });
это.Начать();
},
//设置默认属性
SetOptions: функция (опции) {
this.options = {//默认值
Шаг: 1, // 每次变化的px量
Скорость: 20, //速度(越大越慢)
Сторона: ["вверх"], //滚动方向:"вверх"是上, "вниз"是下, "влево"是左, "вправо"是右
PauseHeight: 0,//隔多高停一次
PauseWidth: 0,//隔多宽停一次
// параметры PauseHeight и PauseWidth, параметры PauseHeight и PauseWidth, параметры PauseHeight и PauseWidth.
PauseStep: 1000 // 停顿时间(PauseHeight或PauseWidth大于0 该参数才有效)
};
Object.extend(this.options, options || {});
},
// 转向
Поворот: функция() {
// 通过设置方向数组的排列来转向
this.Side.push(this.Side.shift().toLowerCase());
},
//上下滚动
ПрокруткаВниз: функция() {
this.pause = this.pauseHeight;
this.scroller.scrollTop = this.GetScroll(this.scroller.scrollTop, this.heightScroller, this.heightList, this.options.PauseHeight);
this.pauseHeight = this.pause;
вар oThis = это;
this.timer = window.setTimeout(function(){ oThis.Start(); }, this.speed);
},
//左右滚动
ПрокруткаLeftRight: функция() {
this.pause = this.pauseWidth;
//注意:scrollLeft超过1400会自动变回1400 注意长度
this.scroller.scrollLeft = this.GetScroll(this.scroller.scrollLeft, this.widthScroller, this.widthList, this.options.PauseWidth);
this.pauseWidth = this.pause;
вар oThis = это;
this.timer = window.setTimeout(function(){ oThis.Start(); }, this.speed);
},
//获取设置滚动数据
GetScroll: функция (iScroll, iScroller, iList, iPause) {
вар iStep = this.options.Step * this.side;
если(this.side > 0){
if(iScroll >= (iList * 2 - iScroller)){ iScroll -= iList; }
} еще {
если (iScroll <= 0) { iScroll += iList; }
}
this.speed = this.options.Speed;
если(iPause > 0){
if(Math.abs(this.pause) >= iPause){
this.speed = this.options.PauseStep; this.pause = iStep = 0; это.Поворот();
} еще {
this.pause += iStep;
}
}
Возврат (iScroll + iStep);
},
//开始
Начало: function() {
//document.getElementById("test").innerHTML+=sTurn+",";
//方向设置
переключатель (this.Side[0].toLowerCase()) {
случай «правильный»:
if(this.widthList < this.widthScroller) return;
this.side = -1;
это.ScrollLeftRight();
перерыв;
случай «левый»:
if(this.widthList < this.widthScroller) return;
this.side = 1;
это.ScrollLeftRight();
перерыв;
корпус «вниз»:
if(this.heightList < this.heightScroller) return;
this.side = -1;
это.ScrollUpDown();
перерыв;
дело «вверх»:
по умолчанию :
if(this.heightList < this.heightScroller) return;
this.side = 1;
это.ScrollUpDown();
}
},
//停止
Стоп: функция() {
ClearTimeout(this.timer);
}
};
</SCRIPT>
<СТИЛЬ>
.Скроллер {line-height:50px; граница: 1 пиксель, сплошной #000000; отступ: 0 пикселей 10 пикселей; высота: 50 пикселей; ширина: 400 пикселей;}
.Скроллер *{margin:0px; отступ: 0 пикселей;}
.ScrollMid {float: влево;}
.ScrollMid ul{ширина:800px;float:left;}
.ScrollMid li {стиль списка: нет; плавать: влево; ширина: 390 пикселей; отступ слева: 10 пикселей; высота строки: 50 пикселей; }
</STYLE>
<DIV class=идентификатор прокрутки=idScroller>
<DIV style="ШИРИНА: 1600 пикселей">
<DIV класс=ScrollMid id=idScrollMid>
<UL>
<LI> 顺德于1993, 年被批准为广东省综合改革试点。 </LI>
<LI>2006 год – ВВП на 1000 года в размере ВВП. </LI>
<LI>2000–2003 годы и 2003 год, 2000 год и 2003 год. </LI>
<LI>2005 – 856.11 – 856.11 – </LI></UL></DIV></DIV></DIV>
<СКРИПТ>
new Scroller("idScroller", "idScrollMid",{ Side:["up","left"], PauseHeight:50, PauseWidth:400 });
</СКРИПТ>
</тело>
</html>