http://falchion.javaeye.com/blog/219045
初步成果：
<body style="padding:0px; margin:0px; ">
<div id=fardiv style="border:1px solid; width:600px; height:200px; padding:0px; margin:0px;">
<div id="div1" style="border:1px solid black; position:absolute; top:10px; left:10px; width:100px; height:10px; background:red;"
οnmοusedοwn="mymousedown(this)"
οnmοusemοve="mymousemove(this)"
οnmοuseup="mymouseup(this)">
Hello world!
</div>
</div>
<br><br><br><br><br><br>
<textarea id="debug_window" name="textarea" cols="50" rows="20">asfasdaff</textarea>
<input type="button" onClick="debug_window.value='none'">
<script language="javascript">
// 全局变量，记录鼠标指针的上一次位置
var g_x;
var g_y;
var perdiv = window.document.getElementById("fardiv");
var textarea = window.document.getElementById("debug_window");
//求光标能滑动的最大范围
var minLeft = parseInt(window.document.getElementById("div1").style.left);
var maxLeft = parseInt(window.document.getElementById("fardiv").style.width)-parseInt(window.document.getElementById("div1").style.width);
function mymousedown(theObj) {
if (event.button == 1) {
g_x = event.clientX;
g_y = event.clientY;
theObj.style.cursor = "e-resize";
//锁定鼠标事件
theObj.setCapture();
}
//textarea.value=window.document.getElementById("div1").style.width;
//alert(window.document.getElementById("div1").style.left);
//alert(maxLeft);
return true;
}
function mymousemove(theObj) {
if (event.button == 1) {
//计算鼠标指针的移动量
var deltaX = event.clientX - g_x;
//var deltaY = event.clientY - g_y;
g_x = event.clientX;
//g_y = event.clientY;
var temp = parseInt(window.document.getElementById("div1").style.left);
temp += deltaX;
if(temp<minLeft)
{
window.document.getElementById("div1").style.left=minLeft+"px";
}
else
{
if(temp>maxLeft)
{
window.document.getElementById("div1").style.left=maxLeft+"px";
}
else
{
window.document.getElementById("div1").style.left = temp+"px";
}
}
//theObj.style.pixelTop += deltaY;
//debugInfo(window.document.getElementById("div1").style.left);
}
return true;
}
function mymouseup(theObj) {
if (event.button == 1) {
//放开鼠标事件
theObj.releaseCapture();
theObj.style.cursor="default";
}
return true;
}
//在写JavaScript代码时，我通常加入一个文本区域来进行调试
function debugInfo(info) {
var debugWindow = document.getElementById("debug_window");
debugWindow.value = debugWindow.value + "/r/n" + info;
}
</script>
还需要加百分比的输出
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
