JS拖动鼠标画出方框实现鼠标选区的方法

本文实例讲述了射流研究…拖动鼠标画出方框实现鼠标选区的方法。分享给大家供大家参考。具体如下：

相当实用的一个射流研究…技巧，拖动鼠标可画出一个方框，可作为一个选区的功能，可以用来画流程图，设计草图什么的，也可以作为上传头像时裁切选择图片，在头像裁切中使用广泛，鼠标在图片上拖动拉出一个方框，这个方框就代表着选区的功能，目前网页上已流行的一种操作。主要是依赖于Java脚本语言代码来实现。

运行效果如下图所示：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-严格。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' XML : lang=' zh ' lang=' zh ' head title鼠标拖动画矩形/title meta http-equiv=' content-type ' content=' text/html；charset=utf-8 ' style type=' text/CSS ' body，h1，h2，h3，h4，h5，h6，hr，p，blockquote，dl，dt，dd，ul，ol，li，pre，form，fieldset，legend，button，input，textarea，th，TD { margin 33600 padd :0 } html { color : # 000；溢出-y : scol；溢出：-moz-滚动条-垂直} .div { position : absoluteborder :1 px蓝色虚线；宽度：0 px高度：0 pxleft :0 pxtop :0 px飞越：隐藏；}.retc { position : absoluteborder :1 px固体# CCCCCC；飞越：隐藏；背景： # efefefef }/style/head body/body脚本语言=' JavaScript ' var WiD=' w定义变量索引=0;var startX=0，startY=0；定义变量标志=falsevar retisch=' 0px '，retcTop='0px '，retcHeight='0px '，retcWidth=' 0pxdocument。onmousedown=function(e){ flag=true；尝试{ var evt=window。事件| | e；var滚动顶部=文档。尸体。向上滚动| |文档。文档元素。滚动顶部；var scrolleft=document。尸体。滚动| |文档。文档元素。被偷窃；startX=evt . clientx scrolleftstarty=evt . clienty scroll top指数；var div=文档。创建元素(' div ')；div.id=wId索引；div.className=' divdiv。风格。左边距=startX ' pxdiv。风格。marginTop=startY ' px文件。尸体。append child(div)；} catch(e){//alert(e)；} }文档。onmouseup=function(){ try { document。尸体。移除子级($(WiD索引));var div=文档。创建元素(' div ')；div.className=' retcdiv。风格。左边距=retischipdiv。风格。上边距=retcTopdiv。风格。width=retcWidthdiv。风格。高度=retcHeight文件。尸体。append child(div)；} catch(e){//alert(e)；}标志=false}文档。onmousemove=function(e){ if(flag){ try { var evt=window。事件| | e；var滚动顶部=文档。尸体。向上滚动| |文档。文档元素。滚动顶部；var scrolleft=document。尸体。滚动| |文档。文档元素。被偷窃；ret isch=(startX-evt。client x-scroll ft 0？evt。clientx向左滚动： startX)' px '；retcTop=(startY-evt。clienty滚动前0？evt。clienty滚动顶部： StartY)' px '；retcHeight=数学。ABS(startY-evt。client y-滚动顶部)“px”；retcWidth=数学。ABS(startX-evt。client x-scrolleft)' px '；$(WiD索引)。风格。左边距=ret slich$(WiD索引)。风格。上边距=retcTop$(wId索引).style.width=retcWidth$(wId索引).style . height=retcHeight } catch(e){//alert(e)；} } } var $=function(id){返回文档。getelementbyid(id)；}/脚本/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。