?

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, 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; //自定義一個(gè)屬性放目標(biāo)leftoList.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; //自定義一個(gè)屬性放目標(biāo)bottomoText.style.bottom = oText._target + "px";oText.style.position = "absolute";}})//容器樣式設(shè)置oContainer.style.width = iWidth + "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, //滑動(dòng)變化率Time: 20, //滑動(dòng)延時(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._width * i; if (oText) { oText._target = this._height_text; } })} else {//鼠標(biāo)移到某個(gè)滑動(dòng)對象上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();},//移動(dòng)Move: function() {clearTimeout(this._timer);var bFinish = true; //是否全部到達(dá)目標(biāo)地址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"; }}})//未到達(dá)目標(biāo)繼續(xù)移動(dòng)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);} };window.onload = function() {new GlideView("idGlideView", 800, "div", 500, { TextTag: "a", TextHeight: 50 }); }? #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;} <div id="idGlideView"><div style="background-color: #006699;"><a href="/">1111111</a></div><div style="background-color: #FF9933;"><a href="/">2222222</a></div><div style="background-color: #9999FF;"><a href="/">3333333</a></div><div style="background-color: #006699;"><a href="/">1111111</a></div></div>

轉(zhuǎn)載于:https://www.cnblogs.com/Internet350/archive/2010/04/27/1721871.html

總結(jié)

以上是生活随笔為你收集整理的图片滑动效果（转）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。