Question

我正在尝试定位同一父级的一些div子项，给出偏移顶部和偏移左侧。它几乎可以，但由于某种原因，jquery将前一项的高度添加到下一项的顶部，有人可以帮助我吗？

编辑：这是我的代码

<html>
<head>
<style>
.earea {overflow: hidden;width: 381px;height: 468px;margin: 0 17px;background: #f2f2f2 url(../images/earea_bg.jpg) no-repeat;padding: 10px 5px 5px;}
.doc .p{margin: 8px 0;}
.clipper{width: 100%;height: 100%;overflow: hidden;}
.counter{font-size: 8px;float: right;cursor: pointer;opacity:0;}
.pcount,.ncount,.cncount,.cpcount,.cbtn{background: transparent;padding: 2px;border: 1px none #2f4715;border-top-style: inset;border-left-style: inset;color: #FFF;}
.overl{border:1px solid black;opacity:0;background-color: #FFF;cursor: pointer;}
.editor{/*position: absolute;top: 0;left: 0;*/}
.cncount,.counted,.ncount{background:#FF0000;}
.cpcount,.counter,.pcount{background: #598527;}
</style>
</head>

<body>
    <div class="earea">
        <div class="clipper">
            <div class="doc">
                <div>

                    <div class="tarea">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
function trace(){
    if(window.console==undefined)
        alert(arguments);
    else
        console.log(arguments);
}

function rd(f,li,tl){
    var di=li-tl;
    f.text(di);
    if(di>0){f.removeClass().addClass("pcount").prepend("+")}else{f.removeClass().addClass("ncount")}
    return di;
}

function zpo(){
    var f=null;
    var ov=null;
    var ct=null;
    for(fl in tflds){
        f=tflds[fl];
        ov=$(f).data().ov;
        ct=$(f).data().ct;
        ov.css({width:f.width()+4,height:f.height()+2}).offset({top:gy(f),left:gx(f)-4}).end();
        ct.offset({top:gy(f),left:gox(f,ct)}).end();
    }
}

function cct(f){
    var ct=$("<div><div>+0</div><div class='cbtn'>Editar</div></div>").addClass('counter').css('z-index',++zi);
    return ct;
}

function cov(f){
    var ov=$("<div></div>").addClass('overl').css({'z-index':++zi});
    return ov;
}

function ae(p,c,x,y,w,h){
    p.append(c);
    c.css('z-index',++zi).width(w).height(h).offset({left:x,top:y});
}

function bp(){
    var els=av.pags[pa].elems;
    var de=null;
    var ze=null;
    var le=null;
    var ov=null;
    var ct=null;

    var dt=$(d.find(".tarea"));

    var x=0;
    var y=0;
    var w=0;
    var h=0;

    for(e in els){
        var nm=els[e].nombre;
        var rx=els[e].x;
        var ry=els[e].y;
        var rw=els[e].w;
        var rh=els[e].h;
        var fh=els[e].fh;

        trace(av.pags.h, d.find(":first").height(), ry, dyo);

        x=gsx(av.pags.w, d.find(":first").width(), rx, dxo);
        y=gsy(av.pags.h, d.find(":first").height(), ry, dyo);
        w=gsw(av.pags.w,rw,d.find(":first").width());
        h=gsw(av.pags.h,rh,d.find(":first").height());

        if(els[e].tipo=="txt"){
            var txt=els[e].text;
            var lim=els[e].limit;
            var de=$("<div></div>").addClass(nm).html(txt);

            if(fh!=undefined){
                de.css("font-size",gsw(av.pags.w,fh,d.find(":first").width())+"px");
            }

            ae(dt,de,x,y,w,h);
            ov=cov(de);
            ct=cct(de);
            var di=rd($(ct.find(":first")),lim,txt.length);
                    tflds.push(de);
            dt.append(ov);
            dt.append(ct);
            de.data({ov:ov,ct:ct});
            ov.add(ct).data({o:ov,c:ct,di:di,dt:de,l:lim}).mouseover(ovr).mouseout(out);
        }else if(els[e].tipo=="img"){
            var src=els[e].src;
            de=$("<img/>").attr("src", src);
            ae(dt,de,x,y,w,h);
        }
    }
    zpo();
}

var tflds=[];

var av={
    nombre:"hpage",
    pags:{
        w:28.82,
        h:23.92,
        pag1:{
            elems:{
                elem1:{tipo:"img",x:0,y:0,w:28.92,h:23.92,src:'images/z_hpage.jpg'},
                elem2:{tipo:"txt",x:4.36,y:4.43,w:20.02,h:1.13,text:"Titular del aviso",limit:255,nombre:"tav",fh:0.69},
                elem3:{tipo:"txt",x:5.91,y:6.17,w:18.45,h:1.86,text:"Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",limit:255,nombre:"stav",fh:0.57},
                elem4:{tipo:"txt",x:5.77,y:8.02,w:18.45,h:1.13,text:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..",limit:255,nombre:"cav",fh:0.5}
            }
        }
    }
};

var zi=1000;

var _d=0;

var doc=$(document);

var pa="pag1";

var z=null;
var d=null;
var l=null;

var dtc=null;
var dsc=null;
var dcc=null;

var dto=null;
var dso=null;
var dco=null;

var dxo=0;
var dyo=0;

var inf={tav:{text:"Titular del aviso",limit:"255"},stav:{text:"Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",limit:"255"},cav:{text:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",limit:"255"}};

function gx(t){
    return t.offset().left;
}
function gox(t,c){
    return gx(t)-c.width()-5;
}
function gy(t){
    return t.offset().top;
}
function gspw(rw,rh,sh){
    return sh*rw/rh;
}
function gsph(rw,rh,sw){
    return sw*rh/rw;
}
function gsx(rw,sw,rx,xo){
    return (rx*sw/rw)+xo;
}
function gsy(rh,sh,ry,yo){
    return (ry*sh/rh)+yo;
}
function gsw(rpw,rw,spw){
    return spw*rw/rpw;
}
function gsh(rph,rh,sph){
    return sph*rh/rph;
}
function init(){        
    d=$('.doc');
    var w=0;
    var h=0;
    var x =0;
    var y=0;
    var r=0;
    var sw=$('.clipper').width();
    var sh=$('.clipper').height();
    var sx=$('.clipper').offset().left;
    var sy=$('.clipper').offset().top;

    dxo=x;
    dyo=y;
    if(av.pags.w>av.pags.h){
        r=av.pags.h/av.pags.w;
        w=sw;
        h=gsph(av.pags.w,av.pags.h,sw);
        x=sx;
        y=sy+((sh-h)/2);
    }else{
        h=d.height();
        w=gspw(av.pags.w,av.pags.h,d.height());
        x=sx+((sx-x)/2);
    }

    dxo=x;
    dyo=y;

    d.find(":first").addClass(av.nombre);

    d.find(":first").css({height:h,width:w,'background-color':"#FF0000"}).offset({top:y,left:x});

    bp();
}
function ovr(e){
    var o=$(e.currentTarget).data().o;
    var c=o.data().c;
    o.css({opacity:'0.5'});
    c.css({opacity:'1'});
}
function out(e){
    var o=$(e.currentTarget).data().o;
    var c=o.data().c;
    c.css({opacity:'0'});
    o.css({opacity:'0'});
}
doc.ready(init);
</script>
</body>
</html>

抱歉，我再也无法隔离了它。

谢谢，亚历

Answer 1

感谢您的回复，我设法看到了问题，我更改了offset()的函数css()，设置了子position:absolute和父position:relative。

由于某种原因，函数偏移尝试将下一个元素放在前一个元素之下。

Jquery偏移问题

1 个答案: