javascript實作淡藍色的滑鼠拖曳選擇框實例_javascript技巧
May 16, 2016 pm 04:00 PM
javascript
選擇框
滑鼠拖曳
本文實例講述了javascript實現淡藍色的滑鼠拖曳選擇框。分享給大家供大家參考。具體實作方法如下:
<!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>一个鼠标选择框</title> <script type="text/javascript"> function Rect() { this.doc = document.documentElement; if(!this.doc) return; this.startX = ''; this.startY = ''; this.rect = null; rectSelf = this; } Rect.prototype.down = function(e) { var e = e?e:window.event; rectSelf.startX = e.clientX?e.clientX + document.body.scrollLeft: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.addEventListener(oRect.doc , 'mouseup' , oRect.up); } </script> </head> <body> <h1>拖动你的鼠标就会出现选择框</h1> </body> </html>
登入後複製
希望本文所述對大家的javascript程式設計有所幫助。
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)