Home > Developer > JavaScript
JavaScript implements vertical sliding of image DIV
JavaScript implements vertical sliding of image DIV
This article mainly introduces how to implement vertical sliding of the image DIV using JavaScript. It involves related techniques of javascript operations on the div layer. For more information, see
This article describes how to implement vertical sliding of image DIV using JavaScript. Share it with you for your reference. The specific implementation method is as follows:
?
| 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"> <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> |
I hope this article will help you design javascript programs.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
