屏幕蒙层效果、图层对象绝对居中、拖拽图层对象三个功能实例演示剖析

屏幕蒙层效果、图层对象绝对居中、拖拽图层对象，相信很多朋友对此一点都不陌生，因为在平常开发的WEB互动中或多或少会遇到这种体验。结合前人的一些经验和个人的开发心得，对以上三个功能进行了改进和优化，下面对此进行详细的剖析。1、屏幕蒙层效果——顾名思义，这个功能就是要实现在页面上盖上一层蒙版的效果，目的就是要遮住下面的网页内容而突出蒙层上面显示的内容。而要实现蒙层，图层的position的值必须设为absolute，否则无法在内容上面“浮”起来。为了开发方便，蒙层DIV最好是动态创建，这样需要在哪个页面上使用直接调用即可。下面是函数的定义：/=======================================动态生成蒙层效果============================
var CoverLayerID = ’CoverLayer’;
function OverScreen(tag){
 if($(’#’+CoverLayerID).length>0){
   with($(’#’+CoverLayerID)){
    if(tag==1){
     LayoutAttr($(’#’+CoverLayerID));
    }
    else{
     css(’display’,’none’);
    }
   }
 }
 
 else if(tag==1){
  var CoverLayer = $(’<div></div>’);
  CoverLayer.appendTo(’body’);
  with(CoverLayer){
   attr(’id’,CoverLayerID);
   LayoutAttr(CoverLayer);
  }
 }
}function LayoutAttr(obj){
 with(obj){
  css(’position’,’absolute’);
  css(’background-color’,’#CCC’);
  css(’z-index’,’10’);
  css(’width’,’100%’);
  css(’left’,’0px’);
  css(’top’,’0px’);
  css(’display’,’block’);
  css(’opacity’,0.8);
  css(’height’,$(document).height());
 }
}2、图层对象绝对居中——看到这，有些朋友会想到用直接用CSS实现，有些朋友则会用JS/jQuery实现。其实这两种方法都可以：用纯CSS来实现的原理就是利用left：50%，top：50%，margin-top：-height()/2，margin-left：-width()/2，而且它会自动根据窗口大小而自动变化。此原理只要简单画个草图就一目了然了。至于用JS/jQuery实现的原理跟CSS的大同小异，不同的是当窗口发小发生变化的时候还得重新设置一下对象位置属性才行。看到这，相信有些朋友就会提出疑问，既然CSS的方法更省事，为啥还用JS/jQuery的笨方法呢？这就是重点了——等我们看到下面有关拖拽图层对象的原理后再回头看看这问题吧！3、拖拽图层对象——好像平常看到的拖拽效果都是能拖动整个图层对象的，但本人觉得这样有时候不太友好。例如一个自定义的DIV小窗口，窗口里面是带有文字等信息内容的，但有时候想直接复制内容，却来了个拖拽手势……这样就破坏了良好的用户体验。所以为了解决此问题，本人加入了一个拖拽“句柄”的功能（当然，整个图层对象也能充当“句柄”的角色）言归正传，还是说一下此功能的实现原理吧。它是通过记录鼠标拖拽图层前一刻的位置和移动后所在的位置来计算图层最终所处的位置。此话何解呢？因为鼠标拖拽图层前一刻的坐标位置跟图层坐标位置的相对距离是一定的，就是说鼠标前后移动的位移和图层前后移动的位移是相等的。就是利用它们之间这个等距关系来计算出图层最终的位置。下面给出定义的函数——//======================================鼠标拖拽对象==================================
$.extend({MoveObj:function(THandle,TObj,e){
   e = e?e:window.event;
   var DoMove = false;
   var M_offsetX = 0;
   var M_offsetY = 0;
   TObj.css(’position’,’absolute’);
   with(THandle){
  css(’cursor’,’move’);
  
  mousedown(function(e){
   DoMove = true;
   M_offsetX = e.offsetX?e.offsetX:e.layerX;
   M_offsetY = e.offsetY?e.offsetY:e.layerY;
   });
  mouseup(function(){
    DoMove = false;
   });
   }
   
   $(document).mousemove(function(e){
   if(!DoMove)
   return;
   var obj_x = e.clientX - M_offsetX;
   var obj_y = e.clientY - M_offsetY;
   with(TObj){
    css("left", obj_x);
    css("top", obj_y);
   }
 });
  }
});说到这，我们就可以继续上面的疑问了——从拖拽的原理可以看到，鼠标拖拽图层前一刻的位置和图层的相对距离是一定的，但是，用纯CSS直接控制绝对居中却会随时自动调整图层对象的位置，所以当鼠标拖拽图层发生位置变化的时候，CSS自动绝对居中也会起作用，这样上述的相对距离在瞬间会发生变化，最终导致图层的偏移位置跟鼠标拖拽的距离有出入，所以在这种情况下，还是选择用JS/jQuery来实现比较好。当然，如果没有同时使用拖拽功能的话，用第一种方法肯定更佳了！最好，把完整的代码打包给大家分享一下。