javascript水平方向手风琴焦点图
javascript水平方向手风琴焦点图,效果如下
源代码如下
<!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> <title>javascript水平方向手风琴焦点图</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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, 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"; //移出容器时返回默认状态 if (this.options.huifuclose == false) { 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: 20, //滑动延时 TextTag: "", //说明容器tag huifuclose: true, //是否恢复状态 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.className = i == index ? 'focus' : ''; //////// 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) < 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:230px; margin:10px auto;overflow:hidden;} #idGlideView div {width:500px;height:230px; background-color:#FFF} #idGlideView div img{filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;} #idGlideView div.focus img{filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1;} #idGlideView div p { width:500px; height:50px; filter: alpha(opacity=50); opacity: 0.5; background:#000; color:#fff; text-decoration:none; padding:5px 10px; font-size:14px; font-family:"微软雅黑";margin:0px } </style> </head> <body> <div id="idGlideView"> <div><a href=""><img src="http://www.0917cc.com/images/add/p1.jpg" /></a><p>咨询电话: 地址:</p></div> <div><img src="http://www.0917cc.com/images/add/p2.jpg" /><p>咨询电话: 地址:</p></div> <div><img src="http://www.0917cc.com/images/add/p3.jpg" /><p>咨询电话: 地址:</p></div> <div><img src="http://www.0917cc.com/images/add/p4.jpg" /><p>咨询电话: 地址:</p></div> <div><img src="http://www.0917cc.com/images/add/p5.jpg" /><p>咨询电话: 地址:</p></div> <div><img src="http://www.0917cc.com/images/add/p6.jpg" /><p>咨询电话: 地址:</p></div> </div> <script type="text/javascript"> window.onload = function () { var gv = new GlideView("idGlideView", 725, "div", 350, { TextTag: "p", TextHeight: 50 }); gv.Set(2); gv.Showtext = true; } </script> </body> </html>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:javascript水平方向手风琴焦点图