本文實(shí)例講述了JavaScript實(shí)現(xiàn)圖片DIV豎向滑動的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
<!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 = {//容器對象 容器寬度 展示標(biāo)簽 展示寬度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;//自定義一個(gè)屬性放目標(biāo)leftoList.style.top = oList._target + "px";oList.style.position = "absolute";addEventHandler(oList, "mouseover", function(){ oThis.Set.call(oThis, i); });})//容器樣式設(shè)置oContainer.style.height = iHeight + "px";oContainer.style.overflow = "hidden";oContainer.style.position = "relative";//移出容器時(shí)返回默認(rèn)狀態(tài)addEventHandler(oContainer, "mouseout", function(e){//變通防止執(zhí)行oList的mouseoutvar o = Event(e).relatedTarget;if (oContainer.contains ? !oContainer.contains(o) : oContainer != o && !(oContainer.compareDocumentPosition(o) & 16)) oThis.Set.call(oThis, -1);})},//設(shè)置默認(rèn)屬性SetOptions: function(options) {this.options = {//默認(rèn)值Step:20,//滑動變化率Time:3,//滑動延時(shí)TextTag:"",//說明容器tagTextHeight: 0//說明容器高度};Object.extend(this.options, options || {});},//相關(guān)設(shè)置Set: function(index) {if (index < 0) {//鼠標(biāo)移出容器返回默認(rèn)狀態(tài)this.Each(function(oList, oText, i){ oList._target = this._height * i; if(oText){ oText._target = this._height_text; } })} else {//鼠標(biāo)移到某個(gè)滑動對象上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;//是否全部到達(dá)目標(biāo)地址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"; }})//未到達(dá)目標(biāo)繼續(xù)移動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;"> 鼠標(biāo)移到這里試試看！</div><div style="background-color:#FF9933;"> 鼠標(biāo)移到這里試試看！</div></div><div>//m.survivalescaperooms.com/</div><SCRIPT>var gv = new GlideView("idGlideView", 314, "div", 280,"");</SCRIPT></body></html>希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
