一款波浪式滑动菜单特效.doc

一款个性的波浪式滑动菜单特效一款个性的波浪式滑动菜单特效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 oTargeton + sEventType = fnHandler; ;var Class = create: function() return function() this.initialize.apply(this, arguments); Object.extend = function(destination, source) for (var property in source) destinationproperty = sourceproperty; return destination;var GlideView = Class.create();GlideVtotype = /容器对象 容器宽度 展示标签 展示宽度 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 o = Event(e).relatedTarget; if (oContainer.contains ? !oContainer.contains(o) : oContainer != o & !(oCpareDocumentPosition(o) & 16) 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 iNow = parseInt(oList.style.left), iStep = this.GetStep(oList._target, iNow); if (iStep != 0) bFinish = false; oList.style.left = (iNow + iStep) + px; /有说明文本 if (oText) iNow = parseInt(oText.style.bottom), iStep = this.GetStep(oText._target, iNow); if (iStep != 0) bFinish = false; oText.style.bottom = (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) 0 ? 1 : -1); return iStep; , Each:function(fun) for (var i = 0; i this._count; i+) fun.call(this, this._listi, (this.Showtext ? this._texti : null), i); ;#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; 1111111 2222222 3333333 1111111 2222222 3333333 不展开var gv = new GlideView(idGlideView, 1000, div, 500, TextTag: a, TextHeight: 50 );var oSel = $(sel);for (var i = 0; i = gv._count; i+) var op = document.createElement(OPTION); op.value = i; op.innerHTML = 展开第 + (i + 1) + 个; oSel.appendChild(op);oSel.onchange = function() gv.Set(oSel.value); $(up).onclick = function() gv.Step -= 5; if(gv.Step = 500) gv.Step = 50; ;$(stop).onclick = function() clearTimeout(gv._timer); ;$(start).onclick = function() gv.Move(); ;$(close).onclick = function() gv.Step = 1; ;$(open).onclick = function() gv.Step = gv.options.Step; ;$(hide).onclick = function() gv.Showtext = false