This article mainly introduces the JS implementation with a buffer effect to open, close, move a layer of methods, involving JavaScript mouse events and page elements operating skills, need friends can refer to the
?
| 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 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 5, 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 11 9 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135-136 | <! 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 "lang=" gb2312 "> <head> <title>javascript buffer Open Layer < /title> <meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/> <style type=" Text/css "> * {margin:0; padding:0;} body {margin:5px auto; text-align:center; b Ackground: #f0f0f0; } #d1 {position:absolute; top:20px; left:20px width:100px; height:60px; border:1px solid #808;} #d2 {Position:absolute ; top:100px; left:20px; width:100px; height:60px; border:1px solid #808; #open1, #close1, #open2, #close2 {cursor:pointer; background: #ccf; margin:5px} #open1, #open2 {display:block;} #clo SE1, #close2 {display:none} </style> </head> <body> <div id= "D1" > Mobile location <span id= "Open1" Oncl Ick= "Fo1 ()" >Open</span> <span id= "close1" onclick= "FC1 ()" >Close</span> </div> <div id="D2" > Change size <span id= "Open2" onclick= "Fo2 ()" >Open</span> <span id= "Close2" onclick= "FC2 ()" >close </span> </div> <div id= "Debug" >AAA</div> <script type= "Text/javascript" >//<[cdata[ var sl = 20; Initial left value var el = 500; End left value var sw = 100;//Initial width value var ew = 580;//End width value var p = 10; Buffer variable var t = 20; Time variable var d1 = document.getElementById (' D1 '); var d2 = document.getElementById (' D2 '); var debug = document.getElementById (' Debug '); var open1 = document.getElementById (' open1 '); var close1 = document.getElementById (' close1 '); var open2 = document.getElementById (' Open2 '); var close2 = document.getElementById (' Close2 '); function Fo1 () {var cl = parseint (GetStyle (D1, ' left '));//Current left value if (cl<el) {d1.style.left = cl + Math.ceil ((EL-CL)/ p) + ' px '; Current value + buffer increment debug.innerhtml = GetStyle (D1, ' left '); CL + ' px '; SetTimeout (' Fo1 () ', t); else {d1.style.left = el + ' px '; open1.style.display = ' none '; close1.style.display = ' block ';}The function fc1 () {var cl = parseint (GetStyle (D1, ' left '));//Current left value if (CL>SL) {d1.style.left = Cl-math.ceil (CL-SL )/P) + ' px '; Current value-buffer increment debug.innerhtml = GetStyle (D1, ' left '); CL + ' px '; SetTimeout (' Fc1 () ', t); else {d1.style.left = sl + ' px '; open1.style.display = ' block '; close1.style.display = ' None ';}} function Fo2 () {var cw = parseint (GetStyle (D2, ' width '));//Current width value if (cw<ew) {d2.style.width = cw + Math.ceil (ew-c W)/P) + ' px '; Current value + buffer increment debug.innerhtml = GetStyle (d2, ' width '); CW + ' px '; SetTimeout (' Fo2 () ', t); else {d2.style.width = ew + ' px '; open2.style.display = ' none '; close2.style.display = ' block ';}} function fc2 () {var cw = parseint (GetStyle (D2, ' width '));//Current width value if (CW>SW) {d2.style.width = Cw-math.ceil (cw-s W)/P) + ' px '; Current value-buffer increment debug.innerhtml = GetStyle (d2, ' width '); CW + ' px '; SetTimeout (' fc2 () ', t); else {d2.style.width = sw + ' px '; open2.style.display = ' block '; close2.style.display = ' None ';}} function GetStyle (eleM, name {if (Elem.style[name]) {return elem.style[name];} else if (Elem.currentstyle) {return elem.currentstyle[name ]; else if (Document.defaultview && document.defaultView.getComputedStyle) {name = Name.replace (/[A-z])/g, "-$1 "); Name = Name.tolowercase (); var s = document.defaultView.getComputedStyle (Elem, ""); return s && s.getpropertyvalue (name); else {return null;}} ]]> </script> </body> </html> |
The
wants this article to help you with your JavaScript programming.
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
