`
leeleo
  • 浏览: 323345 次
  • 性别: 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图片切换
评论
发表评论

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

相关推荐

    CAD绘图高级技巧+实用命令

    #### 移动：M - **命令简介**：将对象从一个位置移动到另一个位置。 - **使用场景**：调整对象位置。 #### 旋转：RO - **命令简介**：围绕一点旋转对象。 - **使用场景**：改变对象的方向。 #### 比例缩放：SC - *...

    【推荐】ui设计毕业设计论文题目-范文word版 (7页).pdf

    6. 视觉设计风格：UI设计中的视觉风格包括扁平化、拟物化、极简主义等，不同的风格适应不同的产品定位和用户需求。 7. 图形创意方法：UI设计中，图形创意可以提升界面的吸引力，通过独特的图标、插图等元素增强用户...

    2021-2022计算机二级等级考试试题及答案No.14662.docx

    - **参照完整性**: 是关系数据库中的一种约束条件，用于保证两个表之间引用的一致性和准确性。当一个表（子表）引用另一个表（主表）中的数据时，必须确保引用的数据在主表中存在。 - **子表与主表**: 在关系数据库...

    Eclipse快捷键

    (F2) / Java编辑器选择封装元素 (Alt+Shift+↑) / Java编辑器选择上一个元素 (Alt+Shift+←) / Java编辑器选择下一个元素 (Alt+Shift+→)：** 这些快捷键提供了更深入的Java编辑器操作，有助于快速操作代码元素。...

    游戏ui作业.rar

    2. **清晰的棋盘布局**：UI应清晰展示棋盘格子，使玩家能快速定位棋子位置，同时棋子的形状和颜色应具有辨识度，便于区分红黑两方。 3. **操作简便**：考虑到移动设备的触摸操作，UI设计需简洁明了，按钮大小适中，...

    ArcMap使用手册.pdf

    - **连接属性表**：教授如何将两个属性表进行连接。 #### 十一、使用统计图 - **选择统计图类型**：介绍如何选择适合的统计图类型。 - **创建统计图**：指导如何创建统计图。 - **显示统计图**：教授如何在地图或...

    CAD常用的命令

    - 应用场景：标注两个对象之间的夹角。 53. **创建圆弧长度标注 (DAR) - Dimarc** - 功能：标注圆弧的长度。 - 应用场景：表示弧长。 54. **创建折弯半径标注 (JOG) - Dimjogged** - 功能：创建折弯处的半径...

    信息技术判断题.docx

    - **解析**: 了解这两个键的区别有助于提高文档编辑的速度和准确性。 #### 44. 光标的位置 - **知识点**: 光标所在的位置决定了输入的文字将会出现的位置。 - **解析**: 正确控制光标的位置对于准确地输入文本非常...

    Autodesk_CAD2007快捷键大全

    - 适用场景：组织和隔离不同的设计元素。 19. **指引标注**：`Leader` (LE 或 LEAD) - 功能：添加指向性标注。 - 适用场景：指示特定部位或特征。 20. **改变实体长度**：`Lengthen` (LEN) - 功能：调整实体的...

    天正快捷键

    11. M - 移动：移动对象的位置，保持其相对关系不变。 12. O - 偏移：复制对象并将其沿指定方向偏移一定距离。 13. P - 平移：整体移动视图，查看图纸不同部分。 14. S - 拉伸：拉伸选定对象，改变其长度或宽度。 15...

    界面设计规范

    - 确保用户能够清楚地区分这两种不同的选择机制。 **16. 专业性强化：** - **描述：** 在特定领域内，应使用专门设计的控件来提高专业性和易用性。 - **实践建议：** - 针对目标用户群体的需求定制界面元素。 - ...

    IOS人机交互中文

    - **一致性：**每个应用程序在一个窗口中运行，遵循统一的UI风格。 - **用户体验：**这有助于保持用户体验的一致性和简洁性。 8. **不同类型的程序：** - **分类：**iOS平台上存在两类程序：原生应用和Web应用。...

    T_卓有成效的移动App系统测试

    对于开发者而言，确保App能够在不同的移动设备、操作系统版本以及网络环境下稳定运行，是一个巨大的挑战。卓有成效的移动App系统测试，需要考虑到测试的各个方面，包括但不限于测试方法、测试类型、以及各类专项测试...

    CSS实现3D技术

    - **条形元素样式**：每个条形由两个`div`组成——顶部和底部，通过不同的背景色和阴影效果，模拟出条形的高度和深度变化。`border-radius`属性的使用，使条形边缘呈现出圆滑过渡的效果。 #### 代码细节解读 - **...

    Azure[Sky] Dynamic Skybox v7.0.3

    支持根据时间、日期以及地理位置（经纬度）准确定位太阳和月亮，并根据位置时间自动地准确调整月相。可以更改昼长来使白天的时间长于夜晚，或者反之；天空控制器还直接在 Inspector 里提供了一整套日历，以便更轻松...

    JQuery AND JQuery UI API

    4. **Positioning（定位）**: jQuery UI提供了`position()`和`offset()`方法，帮助开发者准确地定位元素。 5. **Themes（主题）**: jQuery UI支持易于定制的主题系统，通过Themeroller工具可以生成符合项目风格的...

    制作小地图2

    在游戏开发中，小地图是一个重要的元素，它可以帮助玩家快速了解游戏环境，定位自身位置以及导航。本篇文章主要探讨如何在Unity3D中制作小地图，包括两种常见方法：NGUI插件式小地图和场景投射型小地图。 ### NGUI...

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