JavaScript實現圖片DIV豎向滑動的方法

2024-05-06 16:18:47

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了JavaScript實現圖片DIV豎向滑動的方法,涉及javascript操作div層的相關技巧,需要的朋友可以參考下

本文實例講述了JavaScript實現圖片DIV豎向滑動的方法。分享給大家供大家參考。具體實現方法如下：

<!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, 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 ? !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) ? this._height_min * i : this._height_min * (i - 1) + this._height_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 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 ? 1 : -1);

return iStep;

},

Each:function(fun) {

for (var i = 0; i < this._count; i++)

fun.call(this, this._list[i], (this.Showtext ? 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.49028c.com/</div>

<SCRIPT>

var gv = new GlideView("idGlideView", 314, "div", 280,"");

</SCRIPT>

</body>

</html>