この記事では、マウスボックスの選択効果を実現するJSの方法について説明します。次のように、参照のために共有してください。
<!doctype html public " - // w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd"> <hhtml> <head>< meta http-iv =" content-type "content ="/html;選択効果</title> <style> *{padding:0;マージン:0; } #bottom {position:absolute;下:0px;幅:100%;高さ:40px;国境:1pxソリッド#000;背景:#000;色:#fff; } .tempdiv {border:1pxダッシュブルー;背景:#5A72F8;位置:絶対;幅:0;高さ:0;フィルター:アルファ(不透明:10);不透明:0.1} </style> <script type = "text/javascript"> window.onload = function(){var statebar = document.getElementbyId( "bottom"); document.onmousedown = function(e){var posx = e.clientx; var posy = e.clienty; var div = document.createelement( "div"); div.classname = "tempdiv"; div.style.left = e.clientx+"px"; div.style.top = e.clienty+"px"; document.body.AppendChild(div); document.onmousemove = function(ev){div.style.left = math.min(ev.clientx、posx) + "px"; div.style.top = math.min(ev.clienty、posy) + "px"; div.style.width = math.abs(posx -ev.clientx)+"px"; div.style.height = math.abs(posy -ev.clienty)+"px"; statebar.innerhtml = "mousex:" + ev.clientx + "<br/> mousey:" + ev.clienty; document.onmouseup = function(){div.parentnode.removechild(div); document.onmousemove = null; document.onmouseup = null; }}}} </script> </head> <body> <div id = "bottom"> </div> </body> </html>JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください:「JavaScriptの切り替え効果とテクニックの要約」、「JavaScript検索アルゴリズムスキルの要約」、「JavaScriptアニメーション効果とテクニックの概要」、「Javascriptエラー、および「Javascriptデータ構造」の概要」の概要の要約の要約をご覧ください。 JavaScriptトラバーサルアルゴリズムとテクニック」、および「JavaScriptの数学的操作の使用法の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。