这是原来的CSS样式
.item{float:left;overflow:hidden;margin-left:8px;margin-top:10px;width: 320px; height:
250px;background-repeat: no-repeat; background-image:url(../images/bgred.jpg)}
.curve{position:relative;width:320px; height:250px; z-index:1; left: 75px; top: -40px;}
动态创建DIV代码如下:
for(j = 0;j*8 <str.length; j++)
{
var mydiv = window.frames["displayFrame"].document.createElement("div");
mydiv.setAttribute("id","itemdiv"+j);
mydiv.style.styleFloat="left";
mydiv.style.overflow="hidden";
mydiv.style.marginLeft="8px";
mydiv.style.marginTop="10px";
mydiv.style.width="320px";
mydiv.style.height="250px";
mydiv.style.backgroundRepeat="no-repeat";
mydiv.style.backgroundImage="url(image/bgred.jpg)"
window.frames["displayFrame"].document.body.appendChild(mydiv);
var curvediv =window.frames["displayFrame"].document.createElement("div");
curvediv.setAttribute("id","curvediv"+j);
curvediv.style.position="relative";
curvediv.style.zIndex=1;
curvediv.style.left="75px";
curvediv.style.top="-40px";
curvediv.style.width="320px";
curvediv.style.height="250px";
window.frames["displayFrame"].document.getElementById("divitem"+j).appendChild(curvediv);
}
把div元素增加到HTML里面.
也可在HTML里面定义一个SPAN
window.frames["displayFrame"].document.getElementById("spanId").appendChild(mydiv);
window.frames["displayFrame"].document.body.appendChild(mydiv);
IE和Firefox都支持.
另外需要注意的是这个CSS元素
浮动效果:float:left
在IE下代码为:mydiv.style.styleFloat="left";
在Firefox代码为: mydiv.style.cssFloat="left";
其他的诸如这种元素:
在CSS编写中一般是:margin-left:8px
而在动态增加需要去掉- :mydiv.style.marginLeft="8px";
关于大小写敏感问题没有仔细研究.
详细出处参考：http://www.jb51.net/article/15938.htm
js 动态创建div 提示框 绝对定位
<style type="text/css">
.f{
cursor:pointer;
position:absolute;
border:1px solid #090;
background:#e9fde9 url(${pageContext.request.contextPath}/resource/images/frame/arr_tip_on.gif) 4px 6px no-repeat;
padding:4px 3px 1px 14px;
color:#444;
}
</style>
<script>
var oo = true;
function create(key,message){
if(oo==true){
oo=false
var div =document.createElement("div");
div.className="f";
div.id="div";
div.innerHTML="<font size='1'>"+message+"</font>";
document.body.appendChild(div);
var leftpos=0;
var toppos=0;
var obj=document.getElementByIdx(key);
do {
obj = obj.offsetParent; //得到上级位置元素对象
leftpos += obj.offsetLeft;
toppos += obj.offsetTop;
}while(obj.tagName!="BODY");
document.getElementByIdx("div").style.left=document.getElementByIdx(key).offsetLeft+leftpos;//
document.getElementByIdx("div").style.top=document.getElementByIdx(key).offsetTop+document.getElementByIdx(key).offsetHeight+toppos;//位置：距离di为text的组件上边同样位置
div.onmouseout=del;
}}
function del(e){
e=e||event;
var obj=e.relatedTarget||e.toElement;
var div =document.getElementByIdx("div");
if(div.contains(obj))return;
document.body.removeChild(div);
oo=true;
}
</script>
参考三：
js动态div添加
<script>
function showval()
{
var str
document.form1.input2.value = document.form1.input1.value;
f_creatediv(document.form1.input2.value)
}
// js创建DIV
var objdiv, objname
function f_creatediv(num)
{
var add_div,add_name;
add_div=document.createElement("DIV")
add_name="show_div"
add_div.id="show_div1"
document.body.appendChild(add_div);
document.getElementById('show_div1').style.display = "";
for(var i = 0; i < num; i ++ )
{
objdiv = document.createElement("DIV");
objname = "shop_" + i
objdiv.id = objname;
objdiv.style.top = 100 * i + 100;
objdiv.style.left = 100 * i + 100;
objdiv.style.background = '#FFFF00';
objdiv.style.visibility = 'visible';
objdiv.style.width = 100;
objdiv.style.height = 20;
objdiv.style.border = "5 groove black";
objdiv.innerHTML = "SHOP_" + i;
document.getElementById('show_div1').appendChild(objdiv);
document.getElementById(objname).onmouseover = function()
{
// alert(this.id)
this.style.background = '#999999';
}
;
document.getElementById(objname).onmouseout = function()
{
this.style.background = '#FFFF00';
}
;
document.getElementById(objname).onclick = function()
{
document.form1.input1.value = this.id;
document.getElementById('show_div1').removeNode(true);
// f_creatediv(num)//
}
;
}
}
</script>
<html>
<head>
<title></title>
//<style type="text/css">
<!--
#div1 {
position:absolute;
left:10px;
top:67px;
width:360px;
height:96px;
z-index:1;
}-->
</style>
</head>
<body>
<!--<div id="div1"></div>-->
<form name="form1" >
<p>
<input name="input1" id="input1" value="5" onClick="showval()" />
<input name="input2" id="input2" value=""/>
</p>
</form>
</body>
</html>
参考四：
纯 JS 控制 DIV 选择<html>
<head>
<title>纯JS控制DIV选择范围移动与复制</title>
</head>
<body onselectstart="return false">
<script language="javascript" type="text/javascript">
var copyNo = 0;
var eventType = "nothing"; //"nothing"无事件，"selecting"选择中，"isSelected"选择判断中，"keepSelect"继续选择，"keepSelecting"继续选择中，"selected"确认选择，"move"移动中, "isMoved"继续移动，"moved"确认移动，"keepMove"继续移动, "reMove"重新移动
var oX,oY,nX,nY;
var oLeft,oTop;
var selectDiv;
var cloneDiv;
var borderArea;
var changeDiv;
var oTime;
//创建DIV
function createDiv(divID, divLeft, divTop)
{
var div = document.createElement("div");
div.id = divID;
div.group = "divGroup";
div.selectBorder = "#996600 3px solid";
div.noSelectBorder = "#000000 1px solid";
div.isSelect = false;
div.style.cssText = "width: 250px; height: 50px; left: " + divLeft + "; top: " + divTop + "; border: #000000 1px solid; text-align: center; position: absolute; background-color: #f5f5f5";
div.innerHTML = "<table style=\"width: 100%; height: 100%; text-align: center; vertical-align: middle\"><tr><td>coding by pippe<br /><a href='mailto:pippe@163.com'>pippe@163.com</a></td></tr>";
document.body.appendChild(div);
}
createDiv("oldDiv1", "100px", "400px");
createDiv("oldDiv2", "400px", "400px");
createDiv("oldDiv3", "700px", "400px");
//左键按下事件
function eventDown()
{
//左键
if (event.button == 1)
{
oX = document.body.scrollLeft + event.clientX;
oY = document.body.scrollTop + event.clientY;
switch(eventType)
{
case "nothing":
//初次选择
case "keepSelect":
//继续选择
eventType = eventType == "nothing" ? "selecting" : "keepSelecting";
borderArea = document.createElement("div");
borderArea.id = "borderArea";
borderArea.style.left = oX + "px";
borderArea.style.top = oY + "px";
borderArea.style.position = "absolute";
borderArea.style.border = "#FF7700 1PX dotted";
document.body.appendChild(borderArea);
break;
case "selected":
var len = selectDiv.length;
cloneDiv = new Array();
oLeft = new Array();
oTop = new Array();
for (var i = 0; i < len; i++)
{
cloneDiv[i] = selectDiv[i].cloneNode(true);
cloneDiv[i].style.filter = "alpha(opacity=50)";
oLeft[i] = parseInt(cloneDiv[i].style.left);
oTop[i] = parseInt(cloneDiv[i].style.top);
document.body.appendChild(cloneDiv[i]);
cloneDiv[i].setCapture();
}
eventType = "move";
break;
}
}
}
//拖动事件
function eventMove()
{
if (event.button == 1)
{
nX = document.body.scrollLeft + event.clientX;
nY = document.body.scrollTop + event.clientY;
//选择范围
switch (eventType)
{
case "selecting":
//初次选择
case "keepSelecting":
//继续选择
borderArea.style.left = nX <= oX ? nX + "px" : oX + "px";
borderArea.style.top = nY <= oY ? nY + "px" : oY + "px";
borderArea.style.width = nX >= oX ? nX - oX : oX - nX;
borderArea.style.height = nY >= oY ? nY - oY : oY - nY;
var theDivs = document.getElementsByTagName("div");
var len = theDivs.length;
var thisLeft, thisTop, thisRight, thirBottom;
var x1,y1,x2,y2;
x2 = nX <= oX ? oX : nX;
x1 = nX <= oX ? nX : oX;
y2 = nY <= oY ? oY : nY;
y1 = nY <= oY ? nY : oY;
for (var i = 0; i < len; i++)
{
if (theDivs[i].group != "divGroup")
{
continue;
}
thisLeft = parseInt(theDivs[i].style.left);
thisRight = thisLeft + parseInt(theDivs[i].style.width);
thisTop = parseInt(theDivs[i].style.top);
thisBottom = thisTop + parseInt(theDivs[i].style.height);
//判断是否在选择框范围内
if ((((thisLeft > x1 && thisLeft < x2) || (thisRight > x1 && thisRight < x2)) && ((thisTop > y1 && thisTop < y2) || (thisBottom > y1 && thisBottom < y2)))
|| (((x1 > thisLeft && x1 < thisRight) || (x2 > thisLeft && x2 < thisRight)) && ((y1 > thisTop && y1 < thisBottom) || (y2 > thisTop && y2 < thisBottom))))
{
if (theDivs[i].isSelect == false)
{
theDivs[i].style.border = theDivs[i].selectBorder;
theDivs[i].isSelect = true;
}
}
else if (theDivs[i].isSelect == true)
{
if (eventType == "selecting")
{
//初次选择
theDivs[i].style.border = theDivs[i].noSelectBorder;
theDivs[i].isSelect = false;
}
else
{
//继续选择中
var len = selectDiv.length;
var isTrue = false;
for (var j = 0; j < len; j++)
{
if (theDivs[i].isSelect == true && theDivs[i] == selectDiv[j])
{
isTrue = true;
//break;
}
}
if (!isTrue)
{
theDivs[i].style.border = theDivs[i].noSelectBorder;
theDivs[i].isSelect = false;
}
}
}
}
break;
case "move":
//移动中
var len = cloneDiv.length;
for (var i = 0; i < len; i++)
{
cloneDiv[i].style.left = (oLeft[i] + nX - oX) + "px";
cloneDiv[i].style.top = (oTop[i] + nY - oY) + "px";
}
break;
}
}
}
//拖移结束
function eventUp()
{
nX = document.body.scrollLeft + event.clientX;
nY = document.body.scrollTop + event.clientY;
//选择范围
switch(eventType)
{
case "selecting":
//初次选择
case "keepSelecting":
//继续选择
if (borderArea)
{
document.body.removeChild(borderArea);
borderArea = null;
}
//存储选中的DIV
var divs = document.getElementsByTagName("div");
var len = divs.length;
var count = 0;
selectDiv = new Array();
for(var i = 0; i < len; i++)
{
if (divs[i].group == "divGroup" && divs[i].isSelect == true)
{
selectDiv[count] = divs[i];
count++;
}
}
//有选中
if (count > 0)
{
eventType = "isSelected";
createChange();
}
else
{
eventType = "nothing";
}
break;
case "move":
//移动结束（左键松开）
eventType = "";
var len = cloneDiv.length;
var aimLeft, aimTop;
for (var i = 0; i < len; i++)
{
cloneDiv[i].releaseCapture();
aimLeft = parseInt(cloneDiv[i].style.left);
aimTop = parseInt(cloneDiv[i].style.top);
event.ctrlKey ? cloneDiv[i].style.left = selectDiv[i].style.left : null;
event.ctrlKey ? cloneDiv[i].style.top = selectDiv[i].style.top : null;
move(i, aimLeft, aimTop, event.ctrlKey);
}
break;
case "nothing":
//恢复初始化
default:
break;
}
}
//移动的动画
function move(divIndex, aimLeft, aimTop, isCtrlKey)
{
var moveSize = 30;
var nowLeft, nowTop;
if (!isCtrlKey)
{
//未按住CTRL移动
nowLeft = parseInt(selectDiv[divIndex].style.left);
nowTop = parseInt(selectDiv[divIndex].style.top);
if (nowLeft > aimLeft + moveSize || nowLeft < aimLeft - moveSize || nowTop > aimTop + moveSize || nowTop < aimTop - moveSize)
{
selectDiv[divIndex].style.left = aimLeft > nowLeft + moveSize ? (nowLeft + moveSize) + "px" : aimLeft < nowLeft - moveSize ? (nowLeft - moveSize) + "px" : nowLeft + "px";
selectDiv[divIndex].style.top = aimTop > nowTop + moveSize ? (nowTop + moveSize) + "px" : aimTop < nowTop - moveSize ? (nowTop - moveSize) + "px" : nowTop + "px";
oTime = setTimeout("move(" + divIndex + ", " + aimLeft + ", " + aimTop + ", " + isCtrlKey + ")", 1);
}
else
{
selectDiv[divIndex].style.left = aimLeft;
selectDiv[divIndex].style.top = aimTop;
cloneDiv[divIndex].parentNode.removeChild(cloneDiv[divIndex]);
eventType = "isMoved";
createChange();
}
}
else
{
//按住CTRL复制
nowLeft = parseInt(cloneDiv[divIndex].style.left);
nowTop = parseInt(cloneDiv[divIndex].style.top);
if (nowLeft > aimLeft + moveSize || nowLeft < aimLeft - moveSize || nowTop > aimTop + moveSize || nowTop < aimTop - moveSize)
{
cloneDiv[divIndex].style.left = aimLeft > nowLeft + moveSize ? (nowLeft + moveSize) + "px" : aimLeft < nowLeft - moveSize ? (nowLeft - moveSize) + "px" : nowLeft + "px";
cloneDiv[divIndex].style.top = aimTop > nowTop + moveSize ? (nowTop + moveSize) + "px" : aimTop < nowTop - moveSize ? (nowTop - moveSize) + "px" : nowTop + "px";
oTime = setTimeout("move(" + divIndex + ", " + aimLeft + ", " + aimTop + ", " + isCtrlKey + ")", 1);
}
else
{
cloneDiv[divIndex].style.left = aimLeft;
cloneDiv[divIndex].style.top = aimTop;
copyNo++;
cloneDiv[divIndex].id = "copyDiv" + copyNo;
cloneDiv[divIndex].style.border = cloneDiv[divIndex].noSelectBorder;
cloneDiv[divIndex].isSelect = false;
cloneDiv[divIndex].style.filter = null;
cloneDiv[divIndex].innerHTML = cloneDiv[divIndex].id;
eventType = "isMoved";
createChange();
}
}
}
//创建提示框
function createChange()
{
if (!changeDiv)
{
changeDiv = document.createElement("div");
changeDiv.style.cssText = "width: 0px; height: 0px; position: absolute; border: #038585 1px solid; background-color: #EBFFFF;";
changeDiv.style.left = nX + "px"
changeDiv.style.top = nY + "px"
document.body.appendChild(changeDiv);
scrollTo(nX, nY);
setChange();
}
}
//设置提示框
function setChange()
{
var thisWidth = parseInt(changeDiv.style.width);
var thisHeight = parseInt(changeDiv.style.height);
if (thisWidth < 300 || thisHeight < 100)
{
changeDiv.style.width = thisWidth < 300 ? thisWidth + 25 + "px" : "300px";
changeDiv.style.height = thisHeight < 100 ? thisHeight + 25 + "px" : "100px";
setTimeout("setChange()", 1);
}
else
{
switch(eventType)
{
case "isSelected":
var titleDiv = document.createElement("div");
titleDiv.style.cssText = "width: 100%; height: 20px; background-color: #17C7C7; text-align: center; margin: 1px";
titleDiv.innerHTML = "<span style='height: 100%; color: #012828; margin-top: 5px'>确认选择?</span>";
changeDiv.appendChild(titleDiv);
createBtn("selected", "确定选择", "20px");
createBtn("keepSelect", "继续选择", "110px");
createBtn("nothing", "重新选择", "200px");
break;
case "isMoved":
var titleDiv = document.createElement("div");
titleDiv.style.cssText = "width: 100%; height: 20px; background-color: #17C7C7; text-align: center; margin: 1px";
titleDiv.innerHTML = "<span style='height: 100%; color: #012828; margin-top: 5px'>确认移动?</span>";
changeDiv.appendChild(titleDiv);
createBtn("moved", "确定移动", "20px");
createBtn("keepMove", "继续移动", "110px");
createBtn("reMove", "撤销移动", "200px");
break;
}
}
}
//创建按钮
function createBtn(changeType, btnText, theLeft)
{
var bgColor1 = "#89E3E4", bgColor2 = "#FFA76D";
var color1 = "#113E3F", color2 = "#381701";
var bdColor1 = "#256162", bdColor2 = "#7F3A0C";
var newDiv = document.createElement("div");
newDiv.style.cssText = "left: " + theLeft + "; top: 45px; width: 80px; height: 20px; position: absolute; background-color: " + bgColor1 + "; text-align: center; margin: 1px; color: " + color1 + "; border: " + bdColor1 + " 1px solid; cursor: pointer";
newDiv.innerHTML = "<span style='height: 100%; text-align: center; margin-top: 5px' onselectstart='return false'>" + btnText + "</span>";
newDiv.setAttribute("onmouseover", function(){this.style.backgroundColor = bgColor2; this.style.color = color2; this.style.borderColor = bdColor2});
newDiv.setAttribute("onmouseout", function(){this.style.backgroundColor = bgColor1; this.style.color = color1; this.style.borderColor = bdColor1});
newDiv.setAttribute("onclick", function(){setEventType(changeType);});
changeDiv.appendChild(newDiv);
}
//变更eventType
function setEventType(changeType)
{
eventType = changeType;
changeDiv ? document.body.removeChild(changeDiv) : null;
changeDiv = null;
switch(changeType)
{
case "selected":
document.body.style.cursor = "move";
break;
case "keepMove":
eventType = "selected";
break;
case "reMove":
var len = selectDiv.length;
for (var i = 0; i < len; i++)
{
selectDiv[i].style.left = oLeft[i] + "px";
selectDiv[i].style.top = oTop[i] + "px";
if (cloneDiv[i])
{
cloneDiv[i].parentNode.removeChild(cloneDiv[i]);
}
}
eventType = "selected";
break;
case "moved":
case "nothing":
var len = selectDiv.length;
for (var i = 0; i < len; i++)
{
selectDiv[i].style.border = selectDiv[i].noSelectBorder;
selectDiv[i].isSelect = false;
if (cloneDiv && cloneDiv[i])
{
cloneDiv[i].style.border = cloneDiv[i].noSelectBorder;
cloneDiv[i].isSelect = false;
}
}
if (eventType != "nothing")
{
eventType = "nothing";
document.body.style.cursor = "default";
}
break;
}
}
document.onmousedown = eventDown;
document.onmousemove = eventMove;
document.onmouseup = eventUp;
</script>
<p style="font-weight: bold">操作说明：</p>
<ol>
<li>
<p>按住左键拖动出现虚线选择框</p>
</li>
<li>
<p>虚线选择框经过DIV时，被选中的DIV边框会变粗变色，此时代表此DIV被选中；<br />
虚线选择框离开DIV时，DIV边框变回原来样式，此时代表此DIV未被选中</p>
</li>
<li>
<p>择需要移动或复制的DIV，释放鼠标左键后出现选择按钮框，有【确定选择】、【继续选择】、【重新选择】三个选项
<ul>
<li>
单击【继续选择】可在原来选择的DIV数量基础上继续选择，此时选择框离开原来选择的DIV原选择DIV也处在选择状态下
</li>
<li>
单击【重新选择】前面所选择的所有DIV将恢复未选择状态
</li>
<li>
单击【确认选择】后选择完成，此时鼠标图标变成移动图标
</li>
</ul>
</p>
</li>
<li>
<p>按住左键拖动，此时被选择的DIV会复制出半透明的层随着鼠标移动而移动</p>
</li>
<li>
<p>在想移动的目的地或复制的目的地释放鼠标左键，产生一段过度动画，如果未按住CTRL将把原位置移动到新位置，按住则复制一个DIV到新位置<br />
动画结束后，出现选择按钮框，有【确定移动】、【继续移动】、【撤销移动】三个选项
<ul>
<li>
单击【继续移动】可再次移动/复制选择的DIV
</li>
<li>
单击【撤销移动】撤销本次操作，还原上一次移动/复制时的界面
</li>
<li>
单击【确认移动】本次移动/复制完成，可通过第一步继续移动/复制
</li>
</ul>
</p>
</li>
</ol>
</body>
</html>范围移动与复制