<!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>
<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="http://www.mocartoon.com/images/gg01.gif" width="944" height="100" /><img src="http://www.mocartoon.com/images/gg03.jpg" width="944" height="100" /><img src="http://www.mocartoon.com/images/gg04.jpg" width="944" height="100" /></div>
<div id="testDiv_1_2"></div>
</div>
<div id="testDiv_2">
<div id="testDiv_2_1"><img src="http://www.mocartoon.com/supermark/images/1.jpg" width="366" height="184" /><img src="http://www.mocartoon.com/supermark/images/2.jpg" width="366" height="184" /><img src="http://www.mocartoon.com/supermark/images/3.jpg" width="366" height="184" /><img src="http://www.mocartoon.com/supermark/images/4.jpg" width="366" height="184" /></div>
<div id="testDiv_2_2"></div>
</div>
<div id="testDiv_3">
<div id="testDiv_3_1"><img src="http://www.mocartoon.com/supermark/images/ebook1.gif" width="155" height="205" /><img src="http://www.mocartoon.com/supermark/images/ebook2.gif" width="155" height="205" /><img src="http://www.mocartoon.com/supermark/images/ebook3.gif" width="155" height="205" /><img src="http://www.mocartoon.com/supermark/images/ebook4.gif" width="155" height="205" /></div>
<div id="testDiv_3_2"></div>
</div>
<div id="testDiv_4">
<div id="testDiv_4_1"><img src="http://www.mocartoon.com/supermark/images/1.jpg" width="366" height="184" /><img src="http://www.mocartoon.com/supermark/images/2.jpg" width="366" height="184" /><img src="http://www.mocartoon.com/supermark/images/3.jpg" width="366" height="184" /><img src="http://www.mocartoon.com/supermark/images/4.jpg" 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>
转载于:https://www.cnblogs.com/huicheng/archive/2010/04/09/1708407.html
669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
