<Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Title> dynamically set the layer size </title> <Style type = "text/css"> . DivMain { Width: 10px; Height: 100px; Border-style: solid; Border-width: 1px; Border-color: Green; Display: none; } </Style> <Script type = "text/javascript"> Var setIntervalID; Function ZoomDiv (){ Var divMain = document. getElementById ("divMain "); DivMain. style. width = "200px "; DivMain. style. height = "200px "; } Function ShowDiv (){ SetIntervalID = setInterval ("inc ()", 100 ); } Function inc (){ Var divMain = document. getElementById ("divMain2 "); // Class cannot be set for div; otherwise, the time-space value obtained by divMain. style. width is used. // You can only set style = "width: 10px; height: 100px" in the element" Var oldWidth = divMain. style. width; Var oldHeight = divMain. style. height; OldWidth = parseInt (oldWidth ); OldHeight = parseInt (oldHeight ); OldWidth + = 1; OldHeight + = 1; If (oldWidth & gt; = 200 ){ // Clear the timer ClearInterval (setIntervalID ); Return; } DivMain. style. width = oldWidth + "px "; DivMain. style. height = oldHeight + "px "; } </Script> </Head> <Body> <Input type = "button" value = "amplification layer" onclick = "ZoomDiv ()"/> <Input type = "button" value = "dynamic amplification layer" onclick = "ShowDiv ()"/> <Div id = "divMain" class = "divMain"> Case: Images flying with the mouse. Tip: When the mouse moves an event, onmousemove The clientX and clientY attributes of window. event get the cursor position. </Div> <! -- The class cannot be set here; otherwise, the time and space of the value obtained using divMain. style. width --> <Div id = "divMain2" style = "width: 10px; height: 100px; background-color: Red;"> Case: Images flying with the mouse. Tip: When the mouse moves an event, onmousemove The clientX and clientY attributes of window. event get the cursor position. </Div> </Body> </Html> |