Kaedah JavaScript untuk merealisasikan gelongsor menegak imej DIV

Kaedah JavaScript untuk merealisasikan gelongsor menegak imej DIV_javascript kemahiran

WBOY

Lepaskan： 2016-05-16 16:02:13

asal

1282 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara melaksanakan gelongsor menegak imej DIV menggunakan JavaScript. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

<!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 &#63; document.getElementById(id) : id;
};
function Event(e){
var oEvent = document.all &#63; 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, iHeight, sTag, iMaxHeight, 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._list = oContainer.getElementsByTagName(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));
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); });
})
//容器样式设置
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 &#63; !oContainer.contains(o) : oContainer != o && !(oContainer.compareDocumentPosition(o) & 16)) oThis.Set.call(oThis, -1);
})
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Step:20,//滑动变化率
Time:3,//滑动延时
TextTag:"",//说明容器tag
TextHeight: 0//说明容器高度
};
Object.extend(this.options, options || {});
},
//相关设置
Set: function(index) {
if (index < 0) {
//鼠标移出容器返回默认状态
this.Each(function(oList, oText, i){ oList._target = this._height * i; if(oText){ oText._target = this._height_text; } })
} else {
//鼠标移到某个滑动对象上
this.Each(function(oList, oText, i){
oList._target = (i <= index) &#63; this._height_min * i : this._height_min * (i - 1) + this._height_max;
if(oText){ oText._target = (i == index) &#63; 0 : this._height_text; }
})
}
this.Move();
},
//移动
Move: function() {
clearTimeout(this._timer);
var bFinish = true;//是否全部到达目标地址
this.Each(function(oList, oText, i){
var iNow = parseInt(oList.style.top), iStep = this.GetStep(oList._target, iNow);
if (iStep != 0) { bFinish = false; oList.style.top = (iNow + iStep) + "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 &#63; 1 : -1);
return iStep;
},
Each:function(fun) {
for (var i = 0; i < this._count; i++)
fun.call(this, this._list[i], (this.Showtext &#63; this._text[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>
<div style="background-color:#FF9933;"> 鼠标移到这里试试看！</div>
</div>
<div>http://www.jb51.net/</div>
<SCRIPT>
var gv = new GlideView("idGlideView", 314, "div", 280,"");
</SCRIPT>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.