-1
我試圖定位一些同一父母的divs兒童，給偏移頂部和左偏移。這樣做幾乎可以，但由於某種原因，jquery將前一項的高度添加到下一項的頂部，有人可以幫助我嗎？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>
對不起，我不能孤立下去了。
感謝， 亞歷克西斯
你需要發佈你的代碼，讓我們有任何想法是什麼問題:) – 2010-09-02 20:21:55
還有一個建議，給你的變量有用的名字，有很多工具，例如YUI Compressor和Google Closure編譯器，將縮小你的代碼後，沒有必要折磨自己或混淆他人，而寫它:) – 2010-09-02 23:10:20
「對不起，我無法隔離它了。」 是的，但您可以花時間簡化問題，使其可讀並清楚地表明要實現的目標。 – going 2010-09-03 00:47:23