当前位置： 文江博客话题详情

Jquery偏移问题

发布于 2024-09-17 12:10:16 字数 6975 浏览 4 评论 0原文

我试图定位同一父级的一些 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>

抱歉，我无法再隔离它。

谢谢， 亚历克西斯

原文

I'm trying to position some divs children of the same parent, giving offset top and offset left. It's doing it almost ok, but for some reason jquery is adding the height of the previous item to the top of the next, can someone help me?

EDIT: this is my code

<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>

Sorry, i couldn't isolate it anymore.

Thanks,
Alexis

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

感情洁癖 2024-09-24 12:10:32

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

由于某种原因，函数 offset 尝试将下一个元素放在前一个元素的下面。

Thanks for the replies, i have managed to see the problem, i changed the function offset() for css(), setting the children position:absolute and the father position:relative.

For some reason the function offset try to put the next element below of the previous.

回复 原文
~没有更多了~

关于作者

高冷爸爸

暂无简介

0 文章
0 评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

Gabu-gabumon

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

荔枝明

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

独守阴晴ぅ圆缺

文章 0 评论 0

¤→小豸慧

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文