类似微信、qq截图功能;
<html> <head></head> <link rel="stylesheet" href="chose.css"> <body> <div contenteditable="true"></div> <!-- <div id="selectBox"> <button id="addButton">添加文字</button> </div> --> <!-- <button id="addButton">添加文字</button> --> <div class="container"> <div class="fileDiv">file1</div> <div class="fileDiv">file2</div> <div class="fileDiv">file3</div> <div class="fileDiv">file4</div> <div class="fileDiv">file5</div> <div class="fileDiv">file6</div> <div class="fileDiv">file7</div> <div class="fileDiv">file8</div> <div class="fileDiv">file9</div> <!-- 创建8个小的div进行拉伸效果 --> </body> <script type="text/javascript"> (function() { // document.onselectstart = new Function('event.returnValue=false') var container = document.getElementsByClassName("container")[0]; container.onmousedown = function(e) { // alert(1) e.stopPropagation() var selList = []; //存放选取文件数组 var fileNodes = document.getElementsByTagName("div"); for ( var i = 0; i < fileNodes.length; i++) { if (fileNodes[i].className.indexOf("fileDiv") != -1) { fileNodes[i].className = "fileDiv"; //将页面文件放入数组中 selList.push(fileNodes[i]); } } var isSelect = true; //默认没有被选择 var evt = window.event || arguments[0]; //方框起始位置,当前所在区域 startX = (evt.x || evt.clientX); startY = (evt.y || evt.clientY); //创建方框 var selDiv = document.createElement("div"); selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;"; selDiv.id = "selectDiv"; //添加id document.body.appendChild(selDiv);//放入页面中 //创建盒子 // var selectBox = document.createElement("div"); // selectBox.style.cssText = "position:absolute;" // selectBox.id = "selectBox"; // selDiv.appendChild(selectBox); // console.log(selectBox) selDiv.style.left = startX + "px"; selDiv.style.top = startY + "px"; var _x = null; var _y = null; clearEventBubble(evt); container.onmousemove = function(e) { evt = window.event || arguments[0]; selDiv.innerHTML=CreateStretch; var textDetail = document.getElementById("textDetail"); textDetail.style.cssText = "display:none" if (isSelect) { //鼠标移动的时候元素被选中 if (selDiv.style.display == "none") { selDiv.style.display = ""; //让方框显示 } //鼠标移动后的位置 _x = (evt.x || evt.clientX); _y = (evt.y || evt.clientY); //设置方框的区域位置 selDiv.style.left = Math.min(_x, startX) + "px"; selDiv.style.top = Math.min(_y, startY) + "px"; selDiv.style.width = Math.abs(_x - startX) + "px"; //绝对值 selDiv.style.height = Math.abs(_y - startY) + "px"; // ---------------- 关键算法 --------------------- //获取元素的宽高以及距离body的top和left值 var _l = selDiv.offsetLeft, _t = selDiv.offsetTop; var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight; for ( var i = 0; i < selList.length; i++) { //遍历每一个文件,根据其所在的位置来判断元素是否被选中, //将选中的元素添加seled类名 var sl = selList[i].offsetWidth + selList[i].offsetLeft; var st = selList[i].offsetHeight + selList[i].offsetTop; if (sl > _l && st > _t && selList[i].offsetLeft < _l + _w && selList[i].offsetTop < _t + _h) { if (selList[i].className.indexOf("seled") == -1) { selList[i].className = selList[i].className + " seled"; } } else { if (selList[i].className.indexOf("seled") != -1) { selList[i].className = "fileDiv"; } } } } clearEventBubble(evt); } //鼠标弹起的时候,选取完毕; document.onmouseup = function(e) { e.stopPropagation(); isSelect = false; //在选取框存在的时候,开始计算文件个数 if (selDiv) { // document.body.removeChild(selDiv); showSelDiv(selList); enlarge();//扩展 drag(); addText(); } selList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null; } } })(); function clearEventBubble(evt) { if (evt.stopPropagation) //阻止冒泡事件,兼容性 evt.stopPropagation(); else evt.cancelBubble = true; if (evt.preventDefault) evt.preventDefault(); else evt.returnValue = false; } function showSelDiv(arr) { //将选中元素计数 var count = 0; var selInfo = ""; for ( var i = 0; i < arr.length; i++) { if (arr[i].className.indexOf("seled") != -1) { count++; selInfo += arr[i].innerHTML + "\n"; } } // alert("共选择 " + count + " 个文件,分别是:\n" + selInfo); } function CreateStretch(){ var html = ` <span class="left minSpan"></span> <span class="left-up minSpan"></span> <span class="left-down minSpan"></span> <span class="up minSpan"></span> <span class="down minSpan"></span> <span class="right minSpan"></span> <span class="right-down minSpan"></span> <span class="right-up minSpan"></span> <div id="selectBox"> <Button id="addButton">添加文字</Button> <textarea id = "textDetail" onmousemove = this.focus()></textarea> <ul class="content"></ul> </div> ` return html; } //鼠标事件,拉伸 function enlarge(){ //获取所有的按钮 var rightSpan = document.getElementsByClassName("right")[0]; var leftSpan = document.getElementsByClassName("left")[0]; var upSpan = document.getElementsByClassName("up")[0]; var downSpan = document.getElementsByClassName("down")[0]; var leftUp = document.getElementsByClassName("left-up")[0] var rightUp = document.getElementsByClassName("right-up")[0]; var rightDown = document.getElementsByClassName("right-down")[0]; var leftDown = document.getElementsByClassName("left-down")[0]; var selDiv = document.getElementById("selectDiv"); rightSpan.onmousedown = function(e){ e.stopPropagation(); document.onmousemove=function(e){ //重新获取鼠标位置 var _x = (e.x || e.clientX); var _y = (e.y || e.clientY); var startX = selDiv.offsetLeft ; var startY = selDiv.offsetTop; console.log(selDiv.offsetLeft,selDiv.offsetTop,'dfsf') // console.log(startX,selDiv.style.width,_x,'123') selDiv.style.left = Math.min(_x, startX) + "px"; // selDiv.style.top = Math.min(_y, startY) + "px"; selDiv.style.width = Math.abs(_x - startX) + "px"; //绝对值 // selDiv.style.height = Math.abs(_y - startY) + "px"; // console.log(selDiv.style.width,'fdsfds') } document.onmouseup = function(e){ document.onmousemove = null; } } leftSpan.onmousedown = function(e){ e.stopPropagation(); var startX = e.clientX; var endWidth= e.clientX + selDiv.offsetWidth; document.onmousemove=function(e){ //重新获取鼠标位置 var _x = e.clientX; console.log(startX,_x,'1234') selDiv.style.left = Math.abs(_x,startX) + "px"; selDiv.style.width = Math.abs(_x-endWidth) + "px" } document.onmouseup = function(e){ document.onmousemove = null; } } upSpan.onmousedown = function(e){ e.stopPropagation(); var startY = e.clientY; var endHeight = e.clientY + selDiv.offsetHeight; document.onmousemove=function(e){ //重新获取鼠标位置 var _y = (e.y || e.clientY); console.log(_y,startY,'ewqewq') selDiv.style.top = Math.abs(_y, startY) + "px"; // selDiv.style.width = Math.abs(_x - startX) + "px"; //绝对值 selDiv.style.height = Math.abs(_y-endHeight) + "px"; } document.onmouseup = function(e){ document.onmousemove = null; } } downSpan.onmousedown = function(e){ e.stopPropagation(); document.onmousemove=function(e){ //重新获取鼠标位置 var _x = (e.x || e.clientX); var _y = (e.y || e.clientY); var startX = selDiv.offsetLeft ; var startY = selDiv.offsetTop; // console.log(selDiv.offsetLeft,_x,selDiv.style.width,'123') // selDiv.style.left = Math.min(_x, startX) + "px"; selDiv.style.top = Math.min(_y, startY) + "px"; // selDiv.style.width = Math.abs(_x - startX) + "px"; //绝对值 selDiv.style.height = Math.abs(_y - startY) + "px"; console.log(_x,startX,selDiv.style.left,selDiv.style.width,'4324234') } document.onmouseup = function(e){ document.onmousemove = null; } } rightUp.onmousedown = function(e){ e.stopPropagation(); var startX = e.clientX; var startY = e.clientY; var startWidth = selDiv.offsetLeft; var startHeight = e.clientY +selDiv.offsetHeight; document.onmousemove=function(e){ //重新获取鼠标位置 var _x = (e.x || e.clientX); var _y = (e.y || e.clientY); var startX = selDiv.offsetLeft; var startY = selDiv.offsetTop; selDiv.style.top = Math.abs(_y, startY) + "px"; selDiv.style.width = Math.abs(_x - startWidth) + "px"; //绝对值 selDiv.style.height = Math.abs(_y - startHeight) + "px"; } document.onmouseup = function(e){ document.onmousemove = null; } } rightDown.onmousedown = function(e){ e.stopPropagation(); document.onmousemove=function(e){ //重新获取鼠标位置 var _x = (e.x || e.clientX); var _y = (e.y || e.clientY); var startX = selDiv.offsetLeft ; var startY = selDiv.offsetTop; // console.log(selDiv.offsetLeft,_x,selDiv.style.width,'123') selDiv.style.left = Math.min(_x, startX) + "px"; selDiv.style.top = Math.min(_y, startY) + "px"; selDiv.style.width = Math.abs(_x - startX) + "px"; //绝对值 selDiv.style.height = Math.abs(_y-startY) + "px"; console.log(_x,startX,selDiv.style.left,selDiv.style.width,'4324234') } document.onmouseup = function(e){ document.onmousemove = null; } } leftDown.onmousedown = function(e){ e.stopPropagation(); var startWidth = selDiv.offsetWidth + e.clientX; var startY = selDiv.offsetTop; document.onmousemove=function(e){ //重新获取鼠标位置 var _x = (e.x || e.clientX); var _y = (e.y || e.clientY); // console.log(se selDiv.style.left = Math.abs(_x, startX) + "px"; // selDiv.style.top = Math.min(_y, startY) + "px"; selDiv.style.width = Math.abs(_x - startWidth) + "px"; //绝对值 selDiv.style.height = Math.abs(_y - startY) + "px"; console.log(_x,startX,selDiv.style.left,selDiv.style.width,'4324234') } document.onmouseup = function(e){ document.onmousemove = null; } } leftUp.onmousedown = function(e){ e.stopPropagation(); var startX =e.clientX; var startHeight = e.clientY + selDiv.offsetTop; var endWidth = e.clientX + selDiv.offsetWidth; document.onmousemove = function(e){ e.stopPropagation(); var _x = (e.x || e.clientX); var _y = (e.y || e.clientY); selDiv.style.top = Math.abs(_y) + "px"; selDiv.style.left = Math.abs(_x,startX) + "px"; selDiv.style.width = Math.abs(_x-endWidth) + "px"; selDiv.style.height = Math.abs(_y-startHeight) + "px" } } } function drag(){ var selDiv = document.getElementById("selectDiv"); var selDivs = document.getElementById("selectDiv"); selDiv.onmousedown = function(evt){ // alert(1) var e=evt || window.evt; e.stopPropagation(); var offsetX = e.clientX - selDiv.offsetLeft; var offsetY = e.clientY -selDiv.offsetHeight; document.onmousemove = function(evt){ var e=evt || window.evt; var left = e.clientX - offsetX; var top = e.clientY - offsetY; selDiv.style.left = left + "px"; selDiv.style.top = top + "px"; } document.onmouseup = function(e){ document.onmousemove = null; document.onmouseup = null; } } } //点击添加文字 function addText(){ var addButton = document.getElementById("addButton"); var selectBox = document.getElementById("selectBox"); var textDetail = document.getElementById("textDetail"); var contents = document.getElementsByClassName("content")[0]; textDetail.style.cssText = "display:none" addButton.onclick = function(event){ clearEventBubble(event); var e = event || window.event; e.stopPropagation(); var pageX = null; var pageY = null; var flag = false; var i = 1; var selBox = document.getElementById("selectBox"); selBox.onclick = function(event){ var e = event || window.event; e.stopPropagation(); if(flag == false){ console.log(1) pageX = e.offsetX; pageY = e.offsetY; console.log(pageX,pageY) textDetail.style.cssText = `top:${pageY};left:${pageX};font-size:15px;` flag = true; }else{ console.log(flag,2) console.log(pageX,pageY,2) var content = textDetail.value; var liDom = document.createElement("li"); liDom.style.cssText = `top:${pageY};left:${pageX};font-size:15px;` if(content !== ''){ liDom.innerHTML = content; contents.append(liDom); textDetail.style.cssText = "display:none" textDetail.value = ''; flag = false; } } } document.onclick = function(event){ var e = event || window.event; e.stopPropagation(); textDetail.value = ''; textDetail.style.cssText = "display:none"; flag = false; } } } // function addText(){ // var textDetail = document.getElementById("textDetail"); // var addText = document.getElementById("addButton"); // addText.onclick = function(e){ // e.stopPropagation() // textDetail.style.cssText="display:none"; // //动态添加div // var flag = false; // var selDiv = document.getElementById("selectDiv"); // selDiv.onclick = function(e){ // if(flag == false){ // console.log(e.pageX,e.pageY) // alert(1) // var e =event || window.event // e.stopPropagation() // pageX = e.offsetX; // pageY = e.offsetY; // console.log(pageX,pageY) // textDetail.style.cssText=`top:${pageY};left:${pageX};display:block;` // flag = true; // }else{ // flag = false; // // textDetail.style.cssText="display:none"; // var content = textDetail.value; // var container = document.getElementsByClassName("addWord")[0]; // var liDom = document.createElement("li"); // liDom.style.cssText = `top:${pageY};left:${pageX}`; // liDom.innerHTML = content; // container.append(liDom) // // textDetail.style.cssText="display:none"; // } // } // } // } </script>
body{padding:100px;} .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #ccc;margin-right:10px;margin-bottom:10px;} .seled{border:1px solid red;background-color:#D6DFF7;position: relative;} .stretching{ position: absolute; width:100%; height:100%; display:none; } .minSpan{ position:absolute; width:8px; height:8px; background-color:green; } .up{ left:50%; margin-left:-4px; top:-4px; cursor: n-resize; } .left-up{ top:-4px; left:-4px; cursor: nw-resize; } .right-up{ right:-4px; top:-4px; cursor: ne-resize; } .right{ top:50%; margin-top:-4px; right:-4px; cursor: e-resize; } .right-down{ bottom:-4px; right:-4px; cursor: se-resize; } .down{ left:50%; margin-left:-4px; bottom:-4px; cursor: s-resize; } .left-down{ left:-4px; bottom:-4px; cursor: sw-resize; } .left{ bottom:50%; margin-bottom: -4px; left:-4px; cursor: w-resize; } .right-up{ right:-4px; top:-4px; cursor: ne-resize; } .container{ width:1000px; height: 800px; margin:10px 10px; border:1px solid #ccc; } #selectBox{ position: absolute; width:100%; height:100%; } #addButton{ width:100px; height:30px; position: absolute; bottom:-30px; border:1px solid greenyellow; background:palegoldenrod; } #addWord{ } #textDetail{ min-width: 20px ; max-width: 100px; overflow: auto; word-break: break-all; /* display:none; */ position: absolute; } .addWord { position: absolute; width:100%; height:100%; } .content li{ position: absolute; font-size: 15px; list-style-type: none; }
参考该功能的实现:https://blog.csdn.net/ruixue0117/article/details/7075698