cobra - 2008-5-13 14:21:00
文/cloudgamer 出处/博客园
看到jQuery实例：图片展示效果后我也想写一个，思路还是差不多的，不过我没有用框架来做，性能应该我这个好点。
还有一些控制功能。
欢迎指点
效果截图（动画效果请见：http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html）:
附件: 您所在的用户组无法下载或查看附件
代码:
Code
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
function Event(e){
var oEvent = document.all ? window.event : e;
if (document.all) {
if(oEvent.type == "mouseout") {
oEvent.relatedTarget = oEvent.toElement;
}else if(oEvent.type == "mouseover") {
oEvent.relatedTarget = oEvent.fromElement;
}
}
return oEvent;
}
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 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;
}
var GlideView = Class.create();
GlideView.prototype = {
//容器对象 容器宽度 展示标签 展示宽度
initialize: function(obj, iWidth, sTag, iMaxWidth, options) {
var oContainer = $(obj), oThis=this, len = 0;
this.SetOptions(options);
this.Step = Math.abs(this.options.Step);
this.Time = Math.abs(this.options.Time);
this.Showtext = false;
this._list = oContainer.getElementsByTagName(sTag);
len = this._list.length;
this._count = len;
this._width = parseInt(iWidth / len);
this._width_max = parseInt(iMaxWidth);
this._width_min = parseInt((iWidth - this._width_max) / (len - 1));
this._timer = null;
if(this.options.TextTag && this.options.TextHeight > 0){
this.Showtext = true;
this._text = oContainer.getElementsByTagName(this.options.TextTag);
this._height_text = -parseInt(this.options.TextHeight);
}
this.Each(function(oList, oText, i){
oList._target = this._width * i;//自定义一个属性放目标left
oList.style.left = oList._target + "px";
oList.style.position = "absolute";
addEventHandler(oList, "mouseover", function(){ oThis.Set.call(oThis, i); });
if(oText){
oText._target = this._height_text;//自定义一个属性放目标bottom
oText.style.bottom = oText._target + "px";
oText.style.position = "absolute";
}
})
oContainer.style.width = iWidth + "px";
oContainer.style.overflow = "hidden";
oContainer.style.position = "relative";
addEventHandler(oContainer, "mouseout", function(e){
//变通防止执行oList的mouseout
var oOut = Event(e).relatedTarget;
while(oOut.parentNode){ oOut = oOut.parentNode; if(oOut == oContainer) return; }
oThis.Set.call(oThis, -1);
})
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Step: 20,//滑动变化率
Time: 20,//滑动延时
TextTag: "",//说明容器tag
TextHeight: 0//说明容器高度
};
Object.extend(this.options, options || {});
},
//
Set: function(index) {
if (index < 0) {
this.Each(function(oList, oText, i){ oList._target = this._width * i; if(oText){ oText._target = this._height_text; } })
} else {
this.Each(function(oList, oText, i){
oList._target = (i <= index) ? this._width_min * i : this._width_min * (i - 1) + this._width_max;
if(oText){ oText._target = (i == index) ? 0 : this._height_text; }
})
}
this.Move();
},
//
Move: function() {
clearTimeout(this._timer);
var bFinish = true;
this.Each(function(oList, oText, i){
var nowLeft = parseInt(oList.style.left), iLeftStep = this.GetStep(oList._target, nowLeft);
if (iLeftStep != 0) { bFinish = false; oList.style.left = (nowLeft + iLeftStep) + "px"; }
if (oText) {
var nowBottom = parseInt(oText.style.bottom), iBottomStep = this.GetStep(oText._target, nowBottom);
if (iBottomStep != 0) { bFinish = false; oText.style.bottom = (nowBottom + iBottomStep) + "px"; }
}
})
if (!bFinish) { var oThis = this; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); }
},
//
GetStep: function(iTarget, iNow) {
var iStep = (iTarget - iNow) / this.Step;
if (iStep == 0) return 0;
if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
return iStep;
},
Each:function(fun) {
for (var i = 0; i < this._count; i++)
fun.call(this, this._list, (this.Showtext ? this._text : null), i);
}
};
window.onload=function(){
new GlideView("idGlideView", 1000, "div", 500, { TextTag: "a", TextHeight: 50 });
}
</script>
<style type="text/css">
#idGlideView{}{height:100px;margin:100px auto;}
#idGlideView div{}{width:500px;height:100px;}
#idGlideView div a{}{width:500px;height:50px;filter: alpha(opacity=50);opacity: 0.5; background:#000; color:#fff; text-decoration:none;}
</style>
</head>
<body>
<div id="idGlideView">
<div style="background-color:#006699;"> <a href="/">1111111</a> </div>
<div style="background-color:#FF9933;"> <a href="/">2222222</a> </div>
<div style="background-color:#9999FF;"> <a href="/">3333333</a> </div>
<div style="background-color:#006699;"> <a href="/">1111111</a> </div>
<div style="background-color:#FF9933;"> <a href="/">2222222</a> </div>
<div style="background-color:#9999FF;"> <a href="/">3333333</a> </div>
</div>
</body>
</html>
看到jQuery实例：图片展示效果后我也想写一个，思路还是差不多的，不过我没有用框架来做，性能应该我这个好点。
还有一些控制功能。
欢迎指点
效果截图（动画效果请见：http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html）:
附件: 您所在的用户组无法下载或查看附件 代码:
CodeCODE:
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
function Event(e){
var oEvent = document.all ? window.event : e;
if (document.all) {
if(oEvent.type == "mouseout") {
oEvent.relatedTarget = oEvent.toElement;
}else if(oEvent.type == "mouseover") {
oEvent.relatedTarget = oEvent.fromElement;
}
}
return oEvent;
}
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 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;
}
var GlideView = Class.create();
GlideView.prototype = {
//容器对象 容器宽度 展示标签 展示宽度
initialize: function(obj, iWidth, sTag, iMaxWidth, options) {
var oContainer = $(obj), oThis=this, len = 0;
this.SetOptions(options);
this.Step = Math.abs(this.options.Step);
this.Time = Math.abs(this.options.Time);
this.Showtext = false;
this._list = oContainer.getElementsByTagName(sTag);
len = this._list.length;
this._count = len;
this._width = parseInt(iWidth / len);
this._width_max = parseInt(iMaxWidth);
this._width_min = parseInt((iWidth - this._width_max) / (len - 1));
this._timer = null;
if(this.options.TextTag && this.options.TextHeight > 0){
this.Showtext = true;
this._text = oContainer.getElementsByTagName(this.options.TextTag);
this._height_text = -parseInt(this.options.TextHeight);
}
this.Each(function(oList, oText, i){
oList._target = this._width * i;//自定义一个属性放目标left
oList.style.left = oList._target + "px";
oList.style.position = "absolute";
addEventHandler(oList, "mouseover", function(){ oThis.Set.call(oThis, i); });
if(oText){
oText._target = this._height_text;//自定义一个属性放目标bottom
oText.style.bottom = oText._target + "px";
oText.style.position = "absolute";
}
})
oContainer.style.width = iWidth + "px";
oContainer.style.overflow = "hidden";
oContainer.style.position = "relative";
addEventHandler(oContainer, "mouseout", function(e){
//变通防止执行oList的mouseout
var oOut = Event(e).relatedTarget;
while(oOut.parentNode){ oOut = oOut.parentNode; if(oOut == oContainer) return; }
oThis.Set.call(oThis, -1);
})
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Step: 20,//滑动变化率
Time: 20,//滑动延时
TextTag: "",//说明容器tag
TextHeight: 0//说明容器高度
};
Object.extend(this.options, options || {});
},
//
Set: function(index) {
if (index < 0) {
this.Each(function(oList, oText, i){ oList._target = this._width * i; if(oText){ oText._target = this._height_text; } })
} else {
this.Each(function(oList, oText, i){
oList._target = (i <= index) ? this._width_min * i : this._width_min * (i - 1) + this._width_max;
if(oText){ oText._target = (i == index) ? 0 : this._height_text; }
})
}
this.Move();
},
//
Move: function() {
clearTimeout(this._timer);
var bFinish = true;
this.Each(function(oList, oText, i){
var nowLeft = parseInt(oList.style.left), iLeftStep = this.GetStep(oList._target, nowLeft);
if (iLeftStep != 0) { bFinish = false; oList.style.left = (nowLeft + iLeftStep) + "px"; }
if (oText) {
var nowBottom = parseInt(oText.style.bottom), iBottomStep = this.GetStep(oText._target, nowBottom);
if (iBottomStep != 0) { bFinish = false; oText.style.bottom = (nowBottom + iBottomStep) + "px"; }
}
})
if (!bFinish) { var oThis = this; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); }
},
//
GetStep: function(iTarget, iNow) {
var iStep = (iTarget - iNow) / this.Step;
if (iStep == 0) return 0;
if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
return iStep;
},
Each:function(fun) {
for (var i = 0; i < this._count; i++)
fun.call(this, this._list, (this.Showtext ? this._text : null), i);
}
};
window.onload=function(){
new GlideView("idGlideView", 1000, "div", 500, { TextTag: "a", TextHeight: 50 });
}
</script>
<style type="text/css">
#idGlideView{}{height:100px;margin:100px auto;}
#idGlideView div{}{width:500px;height:100px;}
#idGlideView div a{}{width:500px;height:50px;filter: alpha(opacity=50);opacity: 0.5; background:#000; color:#fff; text-decoration:none;}
</style>
</head>
<body>
<div id="idGlideView">
<div style="background-color:#006699;"> <a href="/">1111111</a> </div>
<div style="background-color:#FF9933;"> <a href="/">2222222</a> </div>
<div style="background-color:#9999FF;"> <a href="/">3333333</a> </div>
<div style="background-color:#006699;"> <a href="/">1111111</a> </div>
<div style="background-color:#FF9933;"> <a href="/">2222222</a> </div>
<div style="background-color:#9999FF;"> <a href="/">3333333</a> </div>
</div>
</body>
</html>