Home > Developer > JavaScript
This article mainly introduces the JavaScript implementation of the light blue mouse Drag selection box, you can drag the mouse to appear pale blue selection box effect, involving JavaScript mouse events and style of operation skills, the need for 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 | <! 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=utf-8 "/> <style type=" Text/css "> #rectBox {background: #CCFFFF; border:2px solid #0099FF; filter:alpha (opacity=30); opacity:0.3; Position:absolute; } </style> <head> <title> a mouse selection box </title> <script type= "Text/javascript" > Function Rect ( {This.doc = document.documentelement; if (!this.doc) return; this.startx = '; this.starty = '; this.rect = null; rects Elf = this; } Rect.prototype.down = function (e) {var e = e?e:window.event; rectself.startx = E.clientx?e.clientx + Document.body.scro Llleft:e.pagex; Rectself.starty = E.clienty?e.clienty + document.body.scrolltop:e.pagey; Rectself.showrect (TRUE); } Rect.prototype.up = function (e) {rectSelf.rectBox.style.width = ' 0px '; rectSelf.rectBox.style.height = ' 0px ';Rectself.showrect (FALSE); } Rect.prototype.move = function (e) {if (Rectself.rectbox) {var currentx = E.clientx?e.clientx + rectSelf.doc.scrollLeft: E.pagex; var currenty = E.clienty?e.clienty + rectself.doc.scrolltop:e.pagey; RectSelf.rectBox.style.width = Math.Abs (currentx-rectself.startx) + ' px '; RectSelf.rectBox.style.height = Math.Abs (currenty-rectself.starty) + ' px '; if (Currentx-rectself.startx < 0) {RectSelf.rectBox.style.left = CurrentX + ' px ';} if (Currenty-rectself.starty ; 0 {rectSelf.rectBox.style.top = currenty + ' px ';}//document.title = ' Left: ' +currentx + ' px ' + ' top: ' +currenty + ' px '; } Rect.prototype.showRect = function (bool) {if (bool) {if (!this.rectbox) {This.rectbox = document.createelement ("div") ; This.rectBox.id = "Rectbox"; Document.body.appendChild (This.rectbox); } this.rectBox.style.display = "block"; This.rectBox.style.left = this.startx + ' px '; This.rectBox.style.top = this.starty + ' px '; This.addeventlistener (This.doc, ' MouseMove ', thiS.move); else {if (this.rectbox) {this.rectBox.style.display = ' none ';} this.removeeventlistener (This.doc, ' MouseMove ', this.) Move); } Rect.prototype.addEventListener = function (o,e,l) {if (O.addeventlistener) {O.addeventlistener (e,l,false);} else if (o.attachevent) {o.attachevent (' on ' +e,function () {L (window.event);});} Rect.prototype.removeEventListener = function (o,e,l) {if (O.removeeventlistener) {O.removeeventlistener (e,l,false);} else if (o.detachevent) {o.detachevent (' on ' +e,function () {L (window.event);});} Window.onload = function () {var orect = new Rect (); Orect.addeventlistener (Orect.doc, ' MouseDown ', orect.down); orect.a Ddeventlistener (Orect.doc, ' MouseUp ', orect.up); } </script> </head> <body> <h1> Drag your mouse will appear selection box </h1> </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
