Jquery中文网 > 脚本编程 > javascript > 正文 js 相互竖向切换展示的窗口代码

js 相互竖向切换展示的窗口代码

发布时间：2016-12-14 编辑：www.jquerycn.cn

jquery中文网为您提供js 相互竖向切换展示的窗口代码等资源，欢迎您收藏本站，我们将为您提供最新的js 相互竖向切换展示的窗口代码资源

分享一篇js 相互竖向切换展示的窗口效果，有需要了解的朋友可看看

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js 相互竖向切换展示的窗口(一)</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> #idGlideView{ height:314px; width:325px; margin:0 auto; } #idGlideView div{ width:325px; height:314px; } </style> <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> </head> <body>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
js 相互竖向切换展示的窗口代码
 Html5百叶窗效果的示例代码_html5教程技巧
 解析jquery获取父窗口的元素
 javascript 竖向排列的图片幻灯切换效果
 ASP.NET中弹出窗口技术
 javascript中相互横向切换展示的窗口效果
 JS父子窗口相互取值与赋值的方法参考
 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
 python怎么制作游戏脚本

上一篇：javascript中相互横向切换展示的窗口效果下一篇：兼容所有浏览器的纯css无图片实现圆角提示框

[关闭]

js 相互竖向切换展示的窗口代码

最近更新

浏览排行