用js写一个可以拖拽的浮动窗口
2016-04-29 13:30
711 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>dom3.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script language="javascript" type="text/javascript"> var x =0; var y = 0; var x1 =0; var y1 = 0; var moveable = false; var index = 20000; function down(obj,evt){ e = evt?evt:window.event; //通过这个来判断是IE还是FF 浏览器的兼容性问题 // if(!window.captureEvents()){ obj.setCapture(); // }else{ // window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); // } var win = obj.parentNode;//取得父窗口 x = e.clientX;//取得当前坐标的X坐标 y = e.clientY;//取得当前坐标的Y坐标 x1 = parseInt(win.style.left.substr(0,win.style.left.length-2));//将父窗体距离浏览器左边界的距离转换为number y1 = parseInt(win.style.top.substr(0,win.style.top.length-2));//将父窗体距离浏览器左边界的距离转换为number moveable= true; } function move(obj, evt){ e = evt?evt:window.event; if(moveable){ var win = obj.parentNode; win.style.left = x1 + e.clientX - x +"px"; win.style.top = y1 + e.clientY -y +"px"; } } //停止拖动 function up(obj){ // if(!window.captureEvents()){ obj.releaseCapture(); // }else{ // window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP); // } moveable= false; } </script> </head> <body > <div style="width:400px;height:400px;top:100px;left:100px;background-color:red;position:absolute;"> <div onmousedown="down(this,event)" onmousemove="move(this,event)" onmouseup="up(this)" style="width:400px;height:100px;top:0px;left:0px;background-color:blue;position:absolute;font-size:30px;cursor:default"> 浮动窗口 </div> </div> </body> </html>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享