使用Jquery来写的JavaScript,就是在鼠标按下的时候创建个Div,鼠标移动之后根据鼠标的位置改变Div的宽高,现在我是用鼠标的坐标来设置Div的宽高,X=width Y=height,当然这个行不通,不知道怎么改算法了...
相关代码:[JavaScript]
//------
var Mil = false;
function Mi() {
var NewDiv = document.createElement('div');
document.body.appendChild(NewDiv);
NewDiv.id = 'Move_div';
//创建Div
move_div = document.getElementById("Move_div");
m_down_x = event.pageX;
m_down_y = event.pageY;
//获取鼠标按下时坐标
//把鼠标坐标值赋给div对象
move_div.style.left = m_down_x + "px";
move_div.style.top = m_down_y + "px";
Mil = true;
}
function move(){
if(Mil){
move_i = document.getElementById("Move_i");
//获取鼠标移动实时坐标
m_move_x = event.pageX;
m_move_y = event.pageY;
//把新div坐标值赋给div对象
move_div.style.width = m_move_x+"px";
move_div.style.height = m_move_y+"px";
}
}
//鼠标释放
function up(){
Mil = false;
document.body.removeChild(document.getElementById("Move_div"));
}
[Html]
<body onmousemove="move()" onmouseup="up()" onmousedown="Mi()">
[Css]
#Move_div{
min-height:1px;
min-width: 1px;
border: 1px dashed #fff;
position: fixed;
}
相关截图:
相关分类