开发学院网页设计JavaScript prototype使用学习手册指南之Position.js 阅读

prototype使用学习手册指南之Position.js

 2010-09-14 13:11:45 来源:WEB开发网   
核心提示: //返回元素相对页面的真实位置page: function(forElement) {var valueT = 0, valueL = 0;var element = forElement;do { valueT += element.offsetTop|| 0; valueL += el

//返回元素相对页面的真实位置 

page: function(forElement) {
  var valueT = 0, valueL = 0;
  var element = forElement;
  do {
   valueT += element.offsetTop || 0;
   valueL += element.offsetLeft || 0;
   // Safari fix
   if (element.offsetParent==document.body)
    if (Element.getStyle(element,’position’)==’absolute’) break;
  } while (element = element.offsetParent);
  element = forElement;
  do {
   if (!window.opera || element.tagName==’BODY’) {
    valueT -= element.scrollTop || 0;
    valueL -= element.scrollLeft || 0;
   }
  } while (element = element.parentNode);
  return [valueL, valueT];
 },

//设置target为source的位置,大小 

clone: function(source, target) {
  var options = Object.extend({
   setLeft:  true,
   setTop:  true,
   setWidth: true,
   setHeight: true,
   offsetTop: 0,
   offsetLeft: 0
  }, arguments[2] || {})
  // find page position of source
  source = $(source);
  var p = Position.page(source);
  // find coordinate system to use
  target = $(target);
  var delta = [0, 0];
  var parent = null;
  // delta [0,0] will do fine with position: fixed elements,
  // position:absolute needs offsetParent deltas
  if (Element.getStyle(target,’position’) == 'absolute’) {
   parent = Position.offsetParent(target);
   delta = Position.page(parent);
  }
  // correct by body offsets (fixes Safari)
  if (parent == document.body) {
   delta[0] -= document.body.offsetLeft;
   delta[1] -= document.body.offsetTop;
  }
  // set position
  if(options.setLeft) target.style.left = (p[0] - delta[0] + options.offsetLeft) + 'px’;
  if(options.setTop)  target.style.top = (p[1] - delta[1] + options.offsetTop) + 'px’;
  if(options.setWidth) target.style.width = source.offsetWidth + 'px’;
  if(options.setHeight) target.style.height = source.offsetHeight + 'px’;
 },

上一页  1 2 3 4 5 6  下一页

Tags:prototype 使用 学习

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接