JavaScript實現圖片DIV豎向滑動的方法
這篇文章主要介紹了JavaScript實現圖片DIV豎向滑動的方法,涉及javascript操作div層的相關技巧,需要的朋友可以參考下
本文實例講述了JavaScript實現圖片DIV豎向滑動的方法。分享給大家供大家參考。具體實現方法如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 <!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 = { //容器對象 容器寬度 展示標簽 展示寬度 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> <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;"> 鼠標移到這裡試試看！</div> <div style="background-color:#FF9933;"> 鼠標移到這裡試試看！</div> </div> <div>http://www.jb51.net/</div> <SCRIPT> var gv = new GlideView("idGlideView", 314, "div", 280,""); </SCRIPT> </body> </html>希望本文所述對大家的javascript程序設計有所幫助。