JavaScript實現(xiàn)圖片DIV豎向滑動的方法
本文實例講述了JavaScript實現(xiàn)圖片DIV豎向滑動的方法。分享給大家供大家參考。具體實現(xiàn)方法如下:
<!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 = { //容器對象 容器寬度 展示標(biāo)簽 展示寬度 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;//自定義一個屬性放目標(biāo)left oList.style.top = oList._target + "px"; oList.style.position = "absolute"; addEventHandler(oList, "mouseover", function(){ oThis.Set.call(oThis, i); }); }) //容器樣式設(shè)置 oContainer.style.height = iHeight + "px"; oContainer.style.overflow = "hidden"; oContainer.style.position = "relative"; //移出容器時返回默認狀態(tài) addEventHandler(oContainer, "mouseout", function(e){ //變通防止執(zhí)行oList的mouseout var o = Event(e).relatedTarget; if (oContainer.contains ? !oContainer.contains(o) : oContainer != o && !(oContainer.compareDocumentPosition(o) & 16)) oThis.Set.call(oThis, -1); }) }, //設(shè)置默認屬性 SetOptions: function(options) { this.options = {//默認值 Step:20,//滑動變化率 Time:3,//滑動延時 TextTag:"",//說明容器tag TextHeight: 0//說明容器高度 }; Object.extend(this.options, options || {}); }, //相關(guān)設(shè)置 Set: function(index) { if (index < 0) { //鼠標(biāo)移出容器返回默認狀態(tài) this.Each(function(oList, oText, i){ oList._target = this._height * i; if(oText){ oText._target = this._height_text; } }) } else { //鼠標(biāo)移到某個滑動對象上 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;//是否全部到達目標(biāo)地址 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"; } }) //未到達目標(biāo)繼續(xù)移動 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;"> 鼠標(biāo)移到這里試試看!</div> <div style="background-color:#FF9933;"> 鼠標(biāo)移到這里試試看!</div> </div> <div>http://www.dbjr.com.cn/</div> <SCRIPT> var gv = new GlideView("idGlideView", 314, "div", 280,""); </SCRIPT> </body> </html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
uni-app如何讀取本地json數(shù)據(jù)文件并渲染到頁面上
在做前端開發(fā)的時候,少不了要用一些模擬的json的數(shù)據(jù)來進行測試,這篇文章主要給大家介紹了關(guān)于uni-app如何讀取本地json數(shù)據(jù)文件并渲染到頁面上的相關(guān)資料,需要的朋友可以參考下2022-08-08JavaScript實現(xiàn)將UPC轉(zhuǎn)換成ISBN的方法
這篇文章主要介紹了JavaScript實現(xiàn)將UPC轉(zhuǎn)換成ISBN的方法,涉及javascript字符串操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05JavaScript語法 JSON序列化之stringify實例詳解
這篇文章主要為大家介紹了JavaScript語法 JSON序列化之stringify實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10JavaScript 嵌套函數(shù)指向this對象錯誤的解決方法
JavaScript對于全局函數(shù)內(nèi)的this綁定為全局對象,而對于嵌套函數(shù)也采用了相同的解釋。2010-03-03Bootstrap 中下拉菜單修改成鼠標(biāo)懸停直接顯示
本文介紹將Bootstrap的二級菜單由點擊顯示改為鼠標(biāo)懸停顯示的具體實現(xiàn)方法,希望對大家有所幫助。2016-04-04RGB顏色值轉(zhuǎn)HTML十六進制(HEX)代碼的JS函數(shù)
轉(zhuǎn)到固定長度的十六進制字符串,不夠則補0 javascript找出一個背景色的數(shù)值,只好自己解析2009-04-04weui框架實現(xiàn)上傳、預(yù)覽和刪除圖片功能代碼
weui框架暫時只有css文件,并沒有js文件實現(xiàn)其功能,我在其html+css后面增加了js實現(xiàn)其功能,為大家提供方便,也為自己保存記錄。具體實例代碼大家參考下本文2017-08-08