我有兩個div（類名爲ca1和ca2），我想通過使用jquery將圖像（veer.jpg）放在兩個div的中心，我已經成功在這個時候，我只能在中心放置一張圖片，例如，如果我使用ca1的jquery函數，那麼這可以正常工作，但如果同時我使用j2的ca2功能，那麼它現在不會，現在如果我刪除ca1的功能，現在使用j2的ca2功能，那麼這工作得很好。我無法一次爲兩個div使用jquery函數。任何人都可以幫忙嗎？將圖像放置在兩個DIV的中心

我的HTML頁面是下：

<!DOCTYPE html> 
<html> 
<head><link rel="stylesheet" href="css/hwcb.css"> 
</head> 
<body> 
<div class="ca1"style="height:600px; width:600px; top:100px; left:400px; position:absolute; background:pink;"> 
<img class="c1" src="veer.jpg" style="height:200px; position:absolute;" /> 
</div> 
<div class="ca2"style="height:600px; width:400px; top:800px; left:400px;position:absolute; background:grey;"> 
<img class="c2" src="veer.jpg" style="height:200px; position:absolute;" /> 
</div> 

<script src="js/jquery.js"></script> 
<script src="js/main.js"></script> 
</body> 
</html>

我main.js頁是在：

$(document).ready(function(){function move_div(){window_width=$('.ca1').width();window_height=$('.ca1').height();obj_width=$('.c1').width();obj_height=$('.c1').height();$('.c1').css('top',(window_height/2)-(obj_height/2)).css('left', (window_width/2)-(obj_width/2));}move_div();$(div).resize(function(){move_div();});}); 

$(document).ready(function(){function move_div(){window_width=$('.ca2').width();window_height=$('.ca2').height();obj_width=$('.c2').width();obj_height=$('.c2').height();$('.c2').css('top',(window_height/2)-(obj_height/2)).css('left', (window_width/2)-(obj_width/2));}move_div();$(div).resize(function(){move_div();});});

來源

2015-01-17 user3811050

能否請您重現該問題在小提琴......請.. – Lal

而不是

$(div).resize(function(){move_div();});})

嘗試

現在您正在爲每個div添加一個處理程序。

來源

2015-01-17 15:59:08

@ user3811050爲什麼你會選擇這個時，jmore009的答案是更好，更少的代碼大聲笑 –

這有幾個問題。首先，您只需撥打$(document).ready(function(){ });一次，然後在其中包裝您的功能。

接下來，您可以循環使用類似的標識符。我會爲.ca1和.ca2添加一個類，而不是僅針對div。我在我的例子中添加.center：

<div class="center ca1"style="height:600px; width:600px; top:100px; left:400px; position:absolute; background:pink;"> 
    <img class="c1" src="veer.jpg" style="height:200px; position:absolute;" /> 
</div> 

<div class="center ca2"style="height:600px; width:400px; top:800px; left:400px;position:absolute; background:grey;"> 
    <img class="c2" src="veer.jpg" style="height:200px; position:absolute;" /> 
</div>

現在可以遍歷一類的.center任何容器（這樣你就可以根據需要添加儘可能多的這些），通過$(this)和img你的功能和運行這對於多個盒子：

$(".center").each(function(){ 
     var box = $(this); //grab the container 
     var img = $(this).find("img"); //grab it's img 
     move_div(box, img); //pass to your function 
    });

然後在你的功能，你可以用你的變量替換硬編碼值：

function move_div(box, img){ 
    window_width=$(box).width(); 
    window_height=$(box).height(); 
    obj_width=$(img).width(); 
    obj_height=$(img).height(); 
    $(img).css({"top": ((window_height/2)-(obj_height/2))+"px", "left": ((window_width/2)-(obj_width/2))+"px" }); 
};

此外，您還可以與.css()鏈的CSS規則，如果你在{}包裝他們，並使用,將它們分開，所以：的

$('element').css({"top": ((window_height/2)-(obj_height/2))+"px", "left": ((window_width/2)-(obj_width/2))+"px" });

代替：

$('element').css('top',(window_height/2)-(obj_height/2)).css('left', (window_width/2)-(obj_width/2));

也有：

$(div).resize(function(){ 
    move_div(); 
})

但變量div未定義，並且沒有理由在上觸發此函數因爲您使用固定的寬度和高度。如果這個使用的百分比和響應，那麼它將有助於重新調整頁面中心img的大小。所以，你可以刪除

FIDDLE

來源

2015-01-17 16:11:21 jmore009

我會說你使用的JavaScript jQueryUI的

$('div').each(function(){ 
    $(this).find(" img").position({ 
     of: $(this), 
     my: 'center center', 
     at: 'center center', 
     collision: 'none none' 
    }); 
});

http://jsfiddle.net/7fp37hr6/5/

來源

2015-01-17 16:43:53 Sangram

將圖像放置在兩個DIV的中心

回答

FIDDLE

相關問題