Home >Web Front-end >HTML Tutorial >Compatible with scrolling code of various browsers_html/css_WEB-ITnose
Compatible with scrolling code of various browsers_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:34:441396browse
Get straight to the point
The red ones mean that you need to pay attention to unity.
Blue means to change.
The content height must be greater than the height of box1, otherwise it will not scroll. This framework uses phpcms. You can change the loop according to your own framework.
Demo address http://www.er-china.com/index.php?m=content&c=index&a=lists&catid=789
var $1 = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" sEventType, fnHandler);
} else {
oTarget["on" sEventType] = fnHandler;
}
};
var Scroller = Class.create();
Scroller.prototype = {
initialize: function(idScroller, idScrollMid, options) {
var oThis = this, oScroller = $1(idScroller ), oScrollMid = $1(idScrollMid);
this.SetOptions(options);
this.Side = this.options.Side || ["up"];//Direction
this. scroller = oScroller; this.speed = 🎜 > this.pauseWidth = 0; //Fixed width
this.pause = 0; 🎜>
//Used for up and down Scroll
this.heightScroller = parseInt(oScroller.style.height) || oScroller.offsetHeight;
this.heightList = oScrollMid.offsetHeight;
//js is not available Go to the height and width set by css
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() ; });
this.Start();
},
//Set default properties
SetOptions: function(options) {
this.options = {//Default Value
Step: 1,//Amount of px changed each time
Speed: 20,//Speed (the bigger, the slower)
Side: ["up"],//Scrolling direction: "up" is up, "down" is down, "left" is left, "right" is right
PauseHeight: 0,//How high to pause every time
PauseWidth: 0,//How to pause every how wide
//When using up, down and left and right together, PauseHeight and PauseWidth must be set to set the steering position
PauseStep: 0//Pause time (PauseHeight or PauseWidth is greater than 0, this parameter is valid)
};
Object. extend(this.options, options || {});
},
//Turn to
Turn: function() {
//Turn to
by setting the arrangement of the direction array this .Side.push(this.Side.shift().toLowerCase());
},
//Scroll up and down
ScrollUpDown: function() {
this.pause = this.pauseHeight;
this.scroller.scrollTop = this.GetScroll(this.scroller.scrollTop, this.heightScroller, this.heightList, this.options.PauseHeight);
this.pauseHeight = this.pause;
var oThis = this;
this.timer = window.setTimeout(function(){ oThis.Start(); }, this.speed);
},
//获取设置滚动数据
GetScroll: function(iScroll, iScroller, iList, iPause) {
var iStep = this.options.Step * this.side;
if(this.side > 0){
if(iScroll >= (iList * 2 - iScroller)){ iScroll -= iList; }
} else {
if(iScroll <= 0){ iScroll = iList; }
}
this.speed = this.options.Speed;
if(iPause > 0){
if(Math.abs(this.pause) >= iPause){
this.speed = this.options.PauseStep; this.pause = iStep = 0; this.Turn();
} else {
this.pause = iStep;
}
}
return (iScroll iStep);
},
//开始
Start: function() {
//方向设置
switch (this.Side[0].toLowerCase()) {
case "down" :
if(this.heightList < this.heightScroller) return;
this.side = -1;
this.ScrollUpDown();
break;
case "up" :
default :
if(this.heightList < this.heightScroller) return;
this.side = 1;
this.ScrollUpDown();
}
},
//停止
Stop: function() {
clearTimeout(this.timer);
}
};
window.onload = function(){
new Scroller("zsbox", "box1",{ Side:["up","left"], PauseHeight:50, PauseWidth:400 });
}
