中规中矩简单版四方向无缝滚动_Javascript教程_H5之家

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中规中矩简单版四方向无缝滚动</title>
<script type="text/javascript">
Object.extend = function(destination, source) {
for (var property in source) {
  destination[property] = source[property];
};
};
var isIE = ("\v"=="v") ? true : false;
var $EL = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
create:function(){
  return function(){this.initialize.apply(this, arguments);}
}
};
var Event = function(e){
var oEvent = isIE ? window.event : e;
return oEvent;
};
var Bind = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function() {
  return fun.apply(object, args);
};
};
var BindAsEventListener = function(object, fun) {
return function(event) {
  return fun.call(object, Event(event));
};
};
var addEventHandler = function(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 MarqueeTE = Class.create();
MarqueeTE.prototype = {
setOptions:function(options){
  this.options = {
   rollContainer:"",
   rollEmbody:"",
   rollClone:"",
   dynTimer:false,
   direction:"top",
   speed:1,
   timer:5
  };
  Object.extend(this.options,options || {});
},
initialize:function(options){
  this.setOptions(options);
  this.dynTimer = this.options.dynTimer;
  this.rollContainer = $EL(this.options.rollContainer);
  this.rollEmbody = $EL(this.options.rollEmbody);
  this.rollClone = $EL(this.options.rollClone);
  this.rollClone.innerHTML = this.rollEmbody.innerHTML;
  this.direction = this.options.direction.toLowerCase();
  this.maxValue = this.getScrollMaxValue();
  this.delta = 0;
  this.to = false;
  if(this.direction == "left" || this.direction == "right"){
   this.bothSidesDiv = document.createElement("div");
   this.bothSidesDiv.className = "bothSides";
   this.rollContainer.appendChild(this.bothSidesDiv);
   this.bothSidesDiv.style.width = this.rollEmbody.getElementsByTagName("img")[0].offsetWidth * this.rollEmbody.getElementsByTagName("img").length * 2 + "px";
   this.bothSidesDiv.appendChild(this.rollEmbody);
   this.bothSidesDiv.appendChild(this.rollClone);
  };
  addEventHandler(this.rollContainer, "mouseover", BindAsEventListener(this, this.stopHandle));
  addEventHandler(this.rollContainer, "mouseout", BindAsEventListener(this, this.startHandle));
  this.startHandle();
},
getScrollMaxValue:function(){
  switch(this.direction){
   case "bottom":
   case "top":
    return this.rollEmbody.getElementsByTagName("img")[0].offsetHeight;
   break;
   case "left":
   case "right":
    return this.rollEmbody.getElementsByTagName("img")[0].offsetWidth;
  };
},
moveHandle:function(){
  var that = this;
  var curFn = function(){
   var to = false;
   if(that.delta >= that.maxValue){
    that.stopHandle();
    that.delta = 0;
    that.to = setTimeout(Bind(that, that.startHandle), 1000);
   };
  };
  switch(this.direction){
   case "top":
    if(this.rollClone.offsetTop - this.rollContainer.scrollTop <= 0){
     this.rollContainer.scrollTop -= this.rollEmbody.offsetHeight;
    }else{
     this.rollContainer.scrollTop += this.options.speed;
     this.delta += this.options.speed;
     curFn();
    };
   break;
   case "bottom":
    if(this.rollEmbody.offsetTop - this.rollContainer.scrollTop >= 0){
     this.rollContainer.scrollTop += this.rollClone.offsetHeight;
    }else{
     this.rollContainer.scrollTop -= this.options.speed;
     this.delta += this.options.speed;
     curFn()
    };
   break;
   case "left":
    if(this.rollClone.offsetWidth - this.rollContainer.scrollLeft <= 0){
     this.rollContainer.scrollLeft -= this.rollEmbody.offsetWidth;
    }else{
     this.rollContainer.scrollLeft += this.options.speed;
     this.delta += this.options.speed;
     curFn();
    };
   break;
   case "right":
    if(this.rollContainer.scrollLeft <= 0){
     this.rollContainer.scrollLeft += this.rollClone.offsetWidth;
    }else{
     this.rollContainer.scrollLeft -= this.options.speed;
     this.delta += this.options.speed;
     curFn();
    };
   break;
  };
},
startHandle:function(){
  if(this.dynTimer){
   this.stopHandle();
  };
  this.dynTimer = setInterval(Bind(this, this.moveHandle), this.options.timer);
},
stopHandle:function(){
  clearInterval(this.dynTimer);
  if(this.to){
   clearTimeout(this.to);
  };
}
};
</script>
<style type="text/css">
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td{
margin:0;
padding:0;
}
#testDiv_1,#testDiv_2,#testDiv_3,#testDiv_4{
overflow:hidden;
margin:0px auto 30px auto;
}
#testDiv_1{
width:944px;
height:100px;
}
#testDiv_2{
width:366px;
height:184px;
}
#testDiv_3{
width:155px;
height:205px;
}
#testDiv_4{
width:366px;
height:184px;
}
.bothSides div{
float:left;
}
</style>
</head>
<body>
<div id="testDiv_1">
<div id="testDiv_1_1"><img src="" width="944" height="100" /><img src="" width="944" height="100" /><img src="" width="944" height="100" /></div>
    <div id="testDiv_1_2"></div>
</div>
<div id="testDiv_2">
<div id="testDiv_2_1"><img src="" width="366" height="184" /><img src="" width="366" height="184" /><img src="" width="366" height="184" /><img src="" width="366" height="184" /></div>
    <div id="testDiv_2_2"></div>
</div>
<div id="testDiv_3">
    <div id="testDiv_3_1"><img src="" width="155" height="205" /><img src="" width="155" height="205" /><img src="" width="155" height="205" /><img src="" width="155" height="205" /></div>
    <div id="testDiv_3_2"></div>
</div>
<div id="testDiv_4">
    <div id="testDiv_4_1"><img src="" width="366" height="184" /><img src="" width="366" height="184" /><img src="" width="366" height="184" /><img src="" width="366" height="184" /></div>
    <div id="testDiv_4_2"></div>
</div>
<script type="text/javascript">
var a = new MarqueeTE({rollContainer:"testDiv_1",rollEmbody:"testDiv_1_1",rollClone:"testDiv_1_2",direction:"top",speed:5});
var b = new MarqueeTE({rollContainer:"testDiv_2",rollEmbody:"testDiv_2_1",rollClone:"testDiv_2_2",direction:"bottom"});
var c = new MarqueeTE({rollContainer:"testDiv_3",rollEmbody:"testDiv_3_1",rollClone:"testDiv_3_2",direction:"left",speed:5});
var d = new MarqueeTE({rollContainer:"testDiv_4",rollEmbody:"testDiv_4_1",rollClone:"testDiv_4_2",direction:"right"});
</script>
</body>
</html>