让图片DIV竖向滑动的JavaScript特效代码，虽然现在里面没有图片，但加上图片就行了，研究了好大一会才研究出来这种效果，鼠标放上后图片层上下滑动，整体效果非常不错，做图片特效的前端开发者或许能用得上哦。
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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>
xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
content="text/html; charset=gb2312" />
<title>图片滑动展示效果</title>
<script
type="text/javascript">
type="text/javascript">
var $$ = function (id) {
typeof id ? document.getElementByIdx_x(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 = {
{
this.initialize.apply(this, arguments);
}
Object.extend = function(destination, source) {
source) {
destination;
}
var GlideView = Class.create();
GlideView.prototype = {
iMaxHeight, options) {
$$(obj), oThis=this, len = 0;
this.SetOptions(options);
Math.abs(this.options.Step);
Math.abs(this.options.Time);
this._list = oContainer.getElementsByTagName_r(sTag);
len = this._list.length;
this._count = len;
this._height = parseInt(iHeight / len);
this._height_max = parseInt(iMaxHeight);
this._height_min = parseInt((iHeight - this._height_max) /
(len - 1));
(len - 1));
this._timer = null;
this.Each(function(oList, oText, i){
oList._target = this._height * i;//自定义一个属性放目标left
oList.style.top = oList._target + "px";
oList.style.position = "absolute";
addEventHandler(oList, "mouseover", function(){
oThis.Set.call(oThis, i); });
oThis.Set.call(oThis, i); });
})
//容器样式设置
oContainer.style.height = iHeight + "px";
oContainer.style.overflow = "hidden";
oContainer.style.position = "relative";
//移出容器时返回默认状态
addEventHandler(oContainer, "mouseout", function(e){
//变通防止执行oList的mouseout
var o = Event(e).relatedTarget;
if (oContainer.contains ? !oContainer.contains(o) : oContainer
!= o &&
!(oContainer.compareDocumentPosition(o) & 16))
oThis.Set.call(oThis, -1);
!= o &&
!(oContainer.compareDocumentPosition(o) & 16))
oThis.Set.call(oThis, -1);
})
{//默认值
Step:20,//滑动变化率
Time:3,//滑动延时
TextTag:"",//说明容器tag
TextHeight: 0//说明容器高度
Object.extend(this.options, options || {});
if (index < 0) {
//鼠标移出容器返回默认状态
this.Each(function(oList, oText, i){ oList._target =
this._height * i; if(oText){ oText._target = this._height_text; }
})
this._height * i; if(oText){ oText._target = this._height_text; }
})
} else {
//鼠标移到某个滑动对象上
this.Each(function(oList, oText, i){
oList._target = (i <= index) ? this._height_min
* i : this._height_min * (i - 1) + this._height_max;
* i : this._height_min * (i - 1) + this._height_max;
if(oText){ oText._target = (i == index) ? 0 :
this._height_text; }
this._height_text; }
})
}
this.Move();
clearTimeout(this._timer);
var bFinish = true;//是否全部到达目标地址
this.Each(function(oList, oText, i){
var iNow = parseInt(oList.style.top), iStep =
this.GetStep(oList._target, iNow);
this.GetStep(oList._target, iNow);
if (iStep != 0) { bFinish = false; oList.style.top = (iNow +
iStep) + "px"; }
iStep) + "px"; }
})
//未到达目标继续移动
if (!bFinish) { var oThis = this; this._timer =
setTimeout(function(){ oThis.Move(); }, this.Time); }
setTimeout(function(){ oThis.Move(); }, this.Time); }
var iStep = (iTarget - iNow) / this.Step;
if (iStep == 0) return 0;
if (Math.abs(iStep) < 1) return (iStep
> 0 ? 1 : -1);
> 0 ? 1 : -1);
return iStep;
for (var i = 0; i < this._count; i++)
fun.call(this, this._list[i], (this.Showtext ? this._text[i] :
null), i);
null), i);
};
</script>
<style type="text/css">
#idGlideView {
height:314px;
width:325px;
margin:0 auto;
}
#idGlideView div {
width:325px;
height:314px;
}
</style>
</head>
<body>
<div id="idGlideView">
<div
style="background-color:#006699;">
</div>
style="background-color:#006699;">
</div>
<div
style="background-color:#FF9933;">
</div>
style="background-color:#FF9933;">
</div>
</div>
<SCRIPT>
var gv = new GlideView("idGlideView", 314, "div",
280,"");
280,"");
</SCRIPT>
</body>
</html>