留言板设计的流程,拖动窗口
Posted huangping199541
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了留言板设计的流程,拖动窗口相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{width: 300px;margin: 100px auto;position: relative;} p{width: 300px;line-height: 60px;text-align: center;background-color: #ccc;border-radius: 5px;margin-top: 5px;} #box1{width: 250px;height: 150px;position: absolute;top: 100px;left: 25px;background-color: whitesmoke;margin: 0 auto;display: none;} h3{width: 250px;height: 30px;line-height: 30px;text-align: center;background-color: orange;margin: 0;padding: 0;} #area{width: 230px;background-color: white;margin-left: 10px;height:110px;} </style> </head> <body> <div id="box"> <p>你好</p> <p>我好</p> <p>大家好</p> <div id="box1"> <h3 id="oh3">弹出窗口</h3> <textarea id="area"></textarea> <input type="button" name="btn1" id="btn1" value="确定" /> <input type="button" name="btn2" id="btn2" value="取消" /> </div> </div> <input type="button" name="btn" id="btn" value="添加" /> </body> <script type="text/javascript"> var oh3 = document.querySelector("#oh3") var obox = document.querySelector("#box") var obox1 = document.querySelector("#box1") var oarea = document.querySelector("#area") var obtn1 = document.querySelector("#btn1") var obtn2 = document.querySelector("#btn2") var obtn = document.querySelector("#btn") btn.onclick = function(){ obox1.style.display="block"; obtn1.onclick = function(){ var op = document.createElement("p") obox.appendChild(op) if(oarea.value.length<150){ op.innerHTML=oarea.value; oarea.value="" }else{ op.style.display="none" } } oarea.onkeydown= function(eve){ var e = eve || window.event; if(e.keyCode==13){ var op = document.createElement("p") obox.appendChild(op) if(oarea.value.length<150){ op.innerHTML=oarea.value; oarea.value="" }else{ op.style.display="none" } } } obtn2.onclick = function(){ obox1.style.display="none" } oh3.addEventListener("mousedown",fn1) function fn1 (eve){ e1=eve||window.event; oh3.addEventListener("mousemove",fn2) function fn2(eve){ e2=eve||window.event; obox1.style.left=e2.pageX-e1.offsetX-650+"px"; obox1.style.top=e2.pageY-e1.offsetY-96+"px"; } oh3.addEventListener("mouseup",fn3) function fn3(eve){ e3=eve||window.event; oh3.removeEventListener("mousemove",fn2) } } } </script> </html>
以上是关于留言板设计的流程,拖动窗口的主要内容，如果未能解决你的问题，请参考以下文章
java在线聊天项目 swt可视化窗口Design 重新设计好友列表窗口 增加菜单栏
12.手机端如何拖动组件--WEB设计器JQUERY插件讲解（含源码）