`
leeleo
  • 浏览: 320765 次
  • 性别: Icon_minigender_1
  • 来自: 贵阳
社区版块
存档分类
最新评论

元素操作:可以准确定位的两个不同风格的移动层

JavaScriptMicrosoftHTML.net 
阅读更多

风格一

<script>
z_index= 1;
mouseDown= false;
divLeft= 0;
divTop= 0;
function onMove(obj)
{
        obj.style.left= window.event.clientX-divLeft;
        obj.style.top= window.event.clientY-divTop;
  x_value.value=obj.style.left;
  y_value.value=obj.style.top;
}
function onDown(obj)
{
    obj.style.zIndex= z_index++;
    mouseDown= true;
    divLeft= event.clientX-parseInt(obj.offsetLeft);
    divTop= event.clientY-parseInt(obj.offsetTop);
}
function onUp(obj)
{
    mouseDown= false;
}
document.onmousemove=function ()
{
     if(mouseDown)
     {
        onMove(tt);
     }
}
</script>
<table id=tt style="position:absolute;left;z-index;top;width:100;height=100; border:1 red solid;">
  <tr>
    <td bgcolor=blue onmousedown=onDown(tt) onmouseup=onUp(tt)></td>
  </tr>
</table>
<INPUT TYPE="text" id="x_value"><INPUT TYPE="text" id="y_value">

 

 

风格二

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title></title>
  <meta name="vs_defaultClientScript" content="JavaScript">
  <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body ms_positioning="GridLayout" onclick='javascript:paletteClick("this")' onmousemove='javascript:drawMove("this")'
  onmousedown='javascript:drawDown()' onmouseup='javascript:drawUp("this")'>
  <FONT face="宋体">
   <DIV style="DISPLAY: block; Z-INDEX: 1; LEFT: 136px; WIDTH: 350px; POSITION: absolute; TOP: 56px; HEIGHT: 250px; BACKGROUND-COLOR: lavender"
    ms_positioning="FlowLayout" id="palette">
    <DIV style="DISPLAY: block; FONT-SIZE: 9pt; Z-INDEX: 2; LEFT: 10px; WIDTH: 120px; FONT-FAMILY: Arial; POSITION: absolute; TOP: 10px; HEIGHT: 80px; BACKGROUND-COLOR: papayawhip"
     ms_positioning="FlowLayout" id="draw" name="draw"  onselectstart="javascript:return false">click me</DIV>
   </DIV>
  </FONT>
  <script language="javascript">
var bEdit = false;
var bMove = false;
var sCursor = {
   move : 'move',
   def  : 'default'
   };
var ioldPos = null;
var iPosArea = 6;
var oDraw = null;

function paletteClick(e) {
e = event.srcElement ? event.srcElement : event.target;
if(e.id == "draw" && bMove == false) {
  if (bEdit == false) {
   bEdit = true;
   creatPos();
   document.getElementById("draw").style.cursor = sCursor.move;
  }
  return;
}
if(bEdit == true) {
  bEdit = false;
  clearPos();
  document.getElementById("draw").style.cursor = sCursor.def;
}
}
function drawDown(e) {
e = event.srcElement ? event.srcElement : event.target;
if(e.id == "draw" && bEdit == true) {
  oDraw = document.getElementById("draw");
  ioldPos = {
    x : window.event.x,
    y : window.event.y,
    l : oDraw.offsetLeft,
    t : oDraw.offsetTop,
    w : document.getElementById("palette").offsetWidth,
    h : document.getElementById("palette").offsetHeight
    };
  bMove = true;
}
}
function drawUp() {
if(bMove == true) { bMove = false};
}
function drawMove() {
if(bMove == true) {
  var x = (window.event.x - ioldPos.x) + ioldPos.l;
  var y = (window.event.y - ioldPos.y) + ioldPos.t;
  if(x < 0){x = 0};
  if(y < 0){y = 0};
  if(x > ioldPos.w - oDraw.offsetWidth){x = ioldPos.w - oDraw.offsetWidth};
  if(y > ioldPos.h - oDraw.offsetHeight){y = ioldPos.h - oDraw.offsetHeight};
  oDraw.style.left = x;
  oDraw.style.top = y;
  movePos();
  oDraw.innerText = "oldX = " + ioldPos.l + "\noldY = " + ioldPos.t + "\noffsetX = " + (window.event.x - ioldPos.x) + "\noffsetY = " + (window.event.y - ioldPos.y) + "\nnewX = " + x + "\nnewY = " + y;
}
}
function creatPos() {
var style = "BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; DISPLAY: block;  OVERFLOW: hidden; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; POSITION: absolute; BACKGROUND-COLOR: white;"
style += "width:" + iPosArea + "px; height:" + iPosArea + "px;";
for(var i = 1; i < 9; i ++) {
  var e = document.createElement("div");
  var pos = getPos(i);
  e.style.cssText = style + "top:" + pos.y + "px;left:" + pos.x + "px;" + "cursor:" + pos.cur + ";" + "z-index:" + (i + 3) + ";";
  e.id = "pos_" + i;
  document.getElementById("palette").appendChild(e);
}
}
function clearPos() {
var e = document.getElementById("palette");
for(var i = 1; i < 9; i ++) {
  e.removeChild(document.getElementById("pos_" + i));
}
}
function movePos() {
for(var i = 1; i < 9; i ++) {
  var e = document.getElementById("pos_" + i);
  var pos = getPos(i);
  e.style.top = pos.y;
  e.style.left = pos.x;
}
}
function getPos(iIndex) {
var e = document.getElementById("draw");
switch (iIndex) {
  case 1:
   return position = {
       x : e.offsetLeft - iPosArea,
       y : e.offsetTop - iPosArea,
       cur : 'nw-resize'
       };
  case 2:
   return position = {
       x : e.offsetLeft + (e.offsetWidth / 2) - (iPosArea / 2),
       y : e.offsetTop - iPosArea,
       cur : 'n-resize'
       };
  case 3:
   return position = {
       x : e.offsetLeft + e.offsetWidth,
       y : e.offsetTop - iPosArea,
       cur : 'sw-resize'
       };
  case 4:
   return position = {
       x : e.offsetLeft - iPosArea,
       y : e.offsetTop + (e.offsetHeight / 2) - (iPosArea / 2),
       cur : 'e-resize'
       };
  case 5:
   return position = {
       x : e.offsetLeft + e.offsetWidth,
       y : e.offsetTop + (e.offsetHeight / 2) - (iPosArea / 2),
       cur : 'e-resize'
       };
  case 6:
   return position = {
       x : e.offsetLeft - iPosArea,
       y : e.offsetTop + e.offsetHeight,
       cur : 'sw-resize'
       };
  case 7:
   return position = {
       x : e.offsetLeft + (e.offsetWidth / 2) - (iPosArea / 2),
       y : e.offsetTop + e.offsetHeight,
       cur : 'n-resize'
       };
  case 8:
   return position = {
       x : e.offsetLeft + e.offsetWidth,
       y : e.offsetTop + e.offsetHeight,
       cur : 'nw-resize'
       };
  default :
   return position = {
       x : 0,
       y : 0,
       cur : ''
       };
}
}

  </script>
</body>
</html>

 

分享到：
| js图片切换
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics