Div的层

在ajax盛行下,div层随鼠标移动,看起来也是挺爽的,研究了一些代码,其实只是js,如果只要移动的话。其实

是对div的mousemove的动态加载,动态卸载,mouseup的动态加载,动态卸载,对于某些对象的初始化,下面的

代码只是我用来实现我自己功能的一个文件,大家可以参考一下,欢迎各位评论,,给意见,

 function DragDivLay(obj,tag)
{
 var DivObj = null;
 //对要处理的对象进行初始化
 if(DragDivLay.arguments.length>0)
 {
  DivObj = document.all(obj);
  DivObj.name = obj;
  //DivObj.ZIndex = obj.style.zIndex;
  DivObj.onmousedown = DragDivLay;
  //document.onmouseup = DragDivLay;
  document.argumentTag = tag;
 }
 /处理鼠标事件
 else
 {
  var EventName = event.type;
  
  if(EventName=='mousedown')
  {
   var mouseX = event.clientX;
   var mouseY = event.clientY;
   document.AllTags = new Array();
   var AllTagObject = document.all.tags(document.argumentTag);
   document.AllTags = AllTagObject;
   for(i=0;i<document.AllTags.length;i++)
   {
    var objLeft   = document.AllTags[i].style.pixelLeft;
    var objTop    = document.AllTags[i].style.pixelTop;
    var objWidth  = document.AllTags[i].offsetWidth;
    var objHeight = document.AllTags[i].offsetHeight;
    var minX = objLeft;
    var maxX = objLeft + objWidth;
    var minY = objTop;
    var maxY = objTop + objHeight;
    if( mouseX > minX && mouseX < maxX && mouseY > minY && mouseY < maxY)
    {
     DivObj = document.AllTags[i];
     break;
    }
   }
   
  }
  if(DivObj)
  {
   document.HittedTag = DivObj;
   document.HittedTag.onmousemove = DragDivLay;
   document.HittedTag.onmouseup   = DragDivLay;
   var initX = DivObj.style.pixelLeft;
   var initY = DivObj.style.pixelTop;
   oldX = event.clientX - initX;
   oldY = event.clientY - initY;
  }
  /
  if(EventName=='mousemove')
  {
   var newLeft = event.clientX + document.body.scrollLeft;
   var newTop  = event.clientY + document.body.scrollTop;
   newLeft = newLeft - oldX;
   newTop  = newTop  - oldY;
   document.HittedTag.style.pixelLeft = newLeft;
   document.HittedTag.style.pixelTop  = newTop;
  }
  
  if(EventName=='mouseup')
  {
   document.HittedTag.onmousemove = null;
   document.HittedTag   = null;
   document.onmousemove = null;
   event.returnValue    = false;
  }
 }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值