<html xmlns:v="urn:schemas-microsoft-com:vml">
<HEAD><TITLE>移动层实例</TITLE>
<style>
<!--
v\:* { behavior: url(#default#VML) }
body {
font-size:0.9em;
font-family:verdana;
background-color:appworkspace;
}
.moveDiv {
border:4px solid #006699;
height:200px;
width:400px;
color:#003399;
padding:20px;
font-weight:bolder;
text-align:center;
background-color:#eeeeee;
}
.copyright
{
text-align: center;
font-size: 1em;
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
//定义函数divMove
function divMove(divObj)
{
with (this)
{
if (!divObj) return;
this.hasDraged = false;
this.dragObj = divObj;
// 把鼠标的形状改成移动形
dragObj.style.cursor = "move";
// 定义鼠标按下时的操作
dragObj.onmousedown = function()
{
var ofs = Offset(dragObj);
dragObj.style.position = "absolute";
dragObj.style.left = ofs.l;
dragObj.style.top = ofs.t;
dragObj.X = event.clientX - ofs.l;
dragObj.Y = event.clientY - ofs.t;
hasDraged = true;
};
// 定义鼠标移动时的操作
dragObj.onmousemove = function()
{
if (!hasDraged) return;
dragObj.setCapture();
dragObj.style.left = event.clientX - dragObj.X;
dragObj.style.top = event.clientY - dragObj.Y;
if(hasDraged)
microsoftMouseMove();
};
// 定义鼠标提起时的操作
dragObj.onmouseup = function()
{
hasDraged = false;
dragObj.releaseCapture();
};
function Offset(e)
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight;
while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
return { t:t, l:l, w:w, h:h }
};
}
};//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function microsoftMouseMove()
{
if (window.event.x != document.test.x.value && window.event.y != document.test.y.value)
{
document.test.x.value = window.event.x;
document.test.y.value = window.event.y;
}
}
</SCRIPT>
<FORM NAME="test">
X: <INPUT TYPE="TEXT" NAME="x" SIZE="4"> Y: <INPUT
TYPUE="TEXT" NAME="y" SIZE="4">
</FORM>
<v:group id="myGroup" style="position:relative;width=800px;height=600px;" cordsize="1000,1000">
<v:rect style="position:relative;width=1000;height=1000;"/>
<v:rect class="move"style="position:relative;width=100;height=100;left=100;top=100;"/></group>
<h4 class="copyright">版权所有,欢迎抄袭</h4>
<SCRIPT LANGUAGE="JavaScript">
<!--
// 对每个元素进行divMove操作
for (var i=0; i<document.all.length; i++)
{
if(document.all[i].className=="move")
{
new divMove(document.all[i]);
}
}
//-->
</SCRIPT>
</BODY>
</HTML>
以上代码在移动的过程中有问题,会闪动,请帮忙。
<HEAD><TITLE>移动层实例</TITLE>
<style>
<!--
v\:* { behavior: url(#default#VML) }
body {
font-size:0.9em;
font-family:verdana;
background-color:appworkspace;
}
.moveDiv {
border:4px solid #006699;
height:200px;
width:400px;
color:#003399;
padding:20px;
font-weight:bolder;
text-align:center;
background-color:#eeeeee;
}
.copyright
{
text-align: center;
font-size: 1em;
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
//定义函数divMove
function divMove(divObj)
{
with (this)
{
if (!divObj) return;
this.hasDraged = false;
this.dragObj = divObj;
// 把鼠标的形状改成移动形
dragObj.style.cursor = "move";
// 定义鼠标按下时的操作
dragObj.onmousedown = function()
{
var ofs = Offset(dragObj);
dragObj.style.position = "absolute";
dragObj.style.left = ofs.l;
dragObj.style.top = ofs.t;
dragObj.X = event.clientX - ofs.l;
dragObj.Y = event.clientY - ofs.t;
hasDraged = true;
};
// 定义鼠标移动时的操作
dragObj.onmousemove = function()
{
if (!hasDraged) return;
dragObj.setCapture();
dragObj.style.left = event.clientX - dragObj.X;
dragObj.style.top = event.clientY - dragObj.Y;
if(hasDraged)
microsoftMouseMove();
};
// 定义鼠标提起时的操作
dragObj.onmouseup = function()
{
hasDraged = false;
dragObj.releaseCapture();
};
function Offset(e)
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight;
while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
return { t:t, l:l, w:w, h:h }
};
}
};//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function microsoftMouseMove()
{
if (window.event.x != document.test.x.value && window.event.y != document.test.y.value)
{
document.test.x.value = window.event.x;
document.test.y.value = window.event.y;
}
}
</SCRIPT>
<FORM NAME="test">
X: <INPUT TYPE="TEXT" NAME="x" SIZE="4"> Y: <INPUT
TYPUE="TEXT" NAME="y" SIZE="4">
</FORM>
<v:group id="myGroup" style="position:relative;width=800px;height=600px;" cordsize="1000,1000">
<v:rect style="position:relative;width=1000;height=1000;"/>
<v:rect class="move"style="position:relative;width=100;height=100;left=100;top=100;"/></group>
<h4 class="copyright">版权所有,欢迎抄袭</h4>
<SCRIPT LANGUAGE="JavaScript">
<!--
// 对每个元素进行divMove操作
for (var i=0; i<document.all.length; i++)
{
if(document.all[i].className=="move")
{
new divMove(document.all[i]);
}
}
//-->
</SCRIPT>
</BODY>
</HTML>
以上代码在移动的过程中有问题,会闪动,请帮忙。
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货