js移动div改进(兼容)
来源:互联网 发布:php文件管理系统 编辑:程序博客网 时间:2024/05/22 12:08
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Div拖动/调整大小实例</title>
</head>
<script type="text/javascript">
//保留的位置
var saveLeft,saveTop,saveWidth,saveHeight;
var theBody;
var div;
//创建并设定div的参数
function setDiv(father)
{
//防止重复打开
if (document.getElementById("panelDiv"))
{
return;
}
var newLeft,newTop,newWidth,newHeight;
theBody = document.body;
div = document.createElement("div");
div.id = "panelDiv";
div.style.position = "absolute";
div.style.backgroundColor = "#E5E5E5"
div.style.padding = "2px 5px 5px 2px";
div.style.overflow = "hidden";
div.style.zIndex = 1;
//设定打开的大小和位置
Function()
{
newWidth = "300px";
newHeight = "300px";
newLeft = (theBody.clientWidth - parseInt(newWidth)) / 2 + "px";
newTop = (theBody.clientHeight - parseInt(newHeight)) / 2 + "px";
div.style.width = newWidth;
div.style.height = newHeight;
div.style.left = newLeft;
div.style.top = newTop;
}
div = setChild(div);
theBody.appendChild(div);
}
function setChild(div)
{
//底色
var cDiv = document.createElement;
var backDiv = document.createElement("div");
backDiv.style.cssText = "left: 0px; top: 0px; width: 100%; height: 100%; background-color: #F5F5F5;";
div.appendChild(backDiv);
//标题
var topDiv = document.createElement("div");
topDiv.style.cssText = "left: 2px; top: 2px; width: 100%; height: 30px; position: absolute; background-color: #78ABFF; vertical-align: middle; z-index: 5";
topDiv.style.cursor = "move";
topDiv.id = "topDivId";
topDiv.onmousedown=function(event){event = event || window.event;setMove(this,event.clientX,event.clientY);};
topDiv.innerHTML = "<span style='top: 5px; left:5px; font-size: 20px; font-weight: bold; color: #102548; position: relative;' onselectstart='return false'>标题栏</span>";
div.appendChild(topDiv);
//关闭按钮
var closeDiv = document.createElement("div");
closeDiv.style.cssText = "right: 8px; top : 5px; width: 24px; height: 24px; position: absolute; background-color: #E4EEFF; border: #2D66C4 1px solid; text-align: center; vertical-align: middle; cursor: pointer; z-index: 10";
closeDiv.onclick=function() {eCloseDiv(this);};
closeDiv.innerHTML = "<span style='font-size: 20px; font-weight: bold; color: #0E377A;' title='Esc快捷键'>×</span>";
div.appendChild(closeDiv);
//内容
var contentDiv = document.createElement("div");
contentDiv.style.cssText = "left: 2px; top: 35px; width: 100%; position: absolute; overflow: auto";
contentDiv.style.height = (parseInt(div.style.height) - 40) + "px";
//contentDiv.innerHTML = "<table style='width: 100%; height: 100%; text-align: center; vertical-align: hidden'><tr><td><p>这里是内容区!</p></td></tr></table>";
div.appendChild(contentDiv);
//add frame;
var frame = document.createElement("iframe");
var frameSrc = "http://127.0.0.1:8680/play.html";
frame.src = frameSrc;
//div.appendChild(frame);
contentDiv.innerHTML = '<iframe name="myiframe" width="195" height="126" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" src="http://10.8.57.225:8680/play.html"> </iframe>';//frame;
return div;
}
var oX, oY, oLeft, oTop, oWidth, oHeight; //存储原始移动前的位置
var divClone, oDiv; //克隆的节点和原始节点
var oTime;
//clone拖移的节点
function setMove(obj,clientX,clientY)
{
if (oTime)
{
clearTimeout(oTime);
//divClone.parentNode.removeChild(divClone);
divClone = null;
}
oDiv = obj.parentNode;
divClone = oDiv.cloneNode(true);
divClone.style.filter = "Alpha(opacity=50)";
divClone.childNodes[1].onmousemove = function(event){ event = event || window.event;startMove(this,event.clientX,event.clientY);};
divClone.childNodes[1].onmouseup = function(event){event = event || window.event;endMove();};
oX = parseInt(clientX);
oY = parseInt(clientY);
oLeft = parseInt(divClone.style.left);
oTop = parseInt(divClone.style.top);
document.body.appendChild(divClone);
divClone.childNodes[1].setCapture();
}
//拖移
function startMove(obj,clientX,clientY)
{
var moveDiv = obj.parentNode;
moveDiv.style.left = (oLeft + clientX - oX) + "px";
moveDiv.style.top = (oTop + clientY - oY) + "px";
}
//拖移结束调用动画
function endMove()
{
divClone.childNodes[1].releaseCapture();
move(parseInt(divClone.style.left), parseInt(divClone.style.top));
}
//移动的动画
function move(aimLeft, aimTop)
{
var nowLeft = parseInt(oDiv.style.left);
var nowTop = parseInt(oDiv.style.top);
var moveSize = 30;
if (nowLeft > aimLeft + moveSize || nowLeft < aimLeft - moveSize || nowTop > aimTop + moveSize || nowTop < aimTop - moveSize)
{
oDiv.style.left = aimLeft > nowLeft + moveSize ? (nowLeft + moveSize) + "px" : aimLeft < nowLeft - moveSize ? (nowLeft - moveSize) + "px" : nowLeft + "px";
oDiv.style.top = aimTop > nowTop + moveSize ? (nowTop + moveSize) + "px" : aimTop < nowTop - moveSize ? (nowTop - moveSize) + "px" : nowTop + "px";
oTime = setTimeout("move(" + aimLeft + ", " + aimTop + ")", 1);
}
else
{
oDiv.style.left = divClone.style.left;
oDiv.style.top = divClone.style.top;
divClone.parentNode.removeChild(divClone);
divClone == null;
}
}
//关闭DIV
function eCloseDiv(obj)
{
if (obj)
{
var objDiv = obj.parentNode;
objDiv.parentNode.removeChild(objDiv);
objDiv = null;
}
}
</script>
<body>
<p>
<input type="radio" name="radio" id="radio1" checked /><label for="radio1">默认居中打开</label>
</p>
<p><a href="javascript:setDiv(document.body);">打开DIV</a></p>
<p style="font-weight: bold">操作说明:</p>
</body>
</html>
0 0
- js移动div改进(兼容)
- js操作iframe的div移动 | 兼容FF+IE
- 纯JS控制DIV选择范围移动与复制 改进版
- js移动DIV(来自互联网)
- js可移动div(转)
- js实现一个可以兼容PC端和移动端的div拖动效果
- JS 移动Div层
- js移动div
- js拖拽div移动
- js按键移动div
- div的js移动
- 移动js及兼容整理
- IE8兼容模式下DIV块移动
- JavaScript js div层拖拽(兼容IE6、FF)
- 可移动层 div 兼容多浏览器 兼容firefox
- 可编辑 DIV 兼容 chrome,ie9-10,ie11改进
- 纯js操作div移动
- 纯js操作div移动
- 你的理想在哪
- bzoj-1006 神奇的国度
- 黑马程序员-常用Java API介绍
- 在Eclipse中使用maven创建项目
- 数据结构之后缀数组
- js移动div改进(兼容)
- 高通平台msm8909 LK 实现LCD 兼容
- export http://blog.csdn.net/hikaliv/article/details/4474835
- 解决centos不能上网
- Dinic 算法求最大流(最小割) POJ 2536
- 关于UIInterfaceOritation 和 UIDeviceOritation
- Leetcode -- Best Time to Buy and Sell Stock IV
- appium for windows 环境搭建
- 数据结构之并查集