📄 move_lv.html
字号:
<html xmlns:v="urn:schemas-microsoft-com:vml"><HEAD><TITLE>移动层实例</TITLE>
<style>
<!--
body {
font-size:0.9em;
font-family:verdana;
background-color:appworkspace;
}
.moveDiv {
border:4px solid #006699;
height:50px;
width:100px;
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;
};
// 定义鼠标提起时的操作
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>
<div class="moveDiv">可移动层1</div>
<div class="moveDiv">可移动层2</div>
<div class="moveDiv">可移动层3</div>
<h4 class="copyright">版权所有，欢迎抄袭</h4>
<SCRIPT LANGUAGE="JavaScript">
<!--
// 取得所有DIV元素
var allDivs = document.getElementsByTagName("DIV");
// 对每个元素进行divMove操作
for (var i=0; i<allDivs.length; i++)
{
new divMove(allDivs[i]);
}
//-->
</SCRIPT>
</BODY></HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -