<! 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"> <Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/> <Title> image sliding display effect </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 = { // Container object container width display Label display width 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; // customize an attribute to put the target left OList. style. top = oList. _ target + "px "; OList. style. position = "absolute "; AddEventHandler (oList, "mouseover", function () {oThis. Set. call (oThis, I );}); }) // Container style settings OContainer. style. height = iHeight + "px "; OContainer. style. overflow = "hidden "; OContainer. style. position = "relative "; // Return the default status when removing the container AddEventHandler (oContainer, "mouseout", function (e ){ // Work und to prevent the oList from executing mouseout Var o = Event (e). relatedTarget; If (oContainer. contains? ! OContainer. contains (o): oContainer! = O &&! (OContainer. compareDocumentPosition (o) & 16) oThis. Set. call (oThis,-1 ); }) }, // Set the default attribute SetOptions: function (options ){ This. options = {// Default Value Step: 20, // sliding Change Rate Time: 3, // sliding Delay TextTag: "", // container tag description TextHeight: 0 // specifies the container height }; Object. extend (this. options, options || {}); }, // Related settings Set: function (index ){ If (index <0 ){ // Move the mouse out of the container and return the default status This. each (function (oList, oText, I) {oList. _ target = this. _ height * I; if (oText) {oText. _ target = this. _ height_text ;}}) } Else { // Move the cursor over a sliding object 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 Move: function (){ ClearTimeout (this. _ timer ); Var bFinish = true; // whether all of them reach the target address 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 ";} }) // Continue moving if the target is not reached If (! BFinish) {var oThis = this; this. _ timer = setTimeout (function () {oThis. Move () ;}, this. Time );} }, // Get the step size 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;"> move the cursor here and try again! </Div> <Div style = "background-color: # FF9933;"> move the cursor here and try again! </Div> </Div> <Div> http://www.jb51.net/</div> <SCRIPT> Var gv = new GlideView ("idGlideView", 314, "div", 280 ,""); </SCRIPT> </Body> </Html> |