FIDDLE

Question

我有两个div（类名为ca1和ca2），我想通过使用jquery将图像（veer.jpg）放在两个div的中心，我已经成功了但是我一次能够放置只有一张图片在中心，例如，如果我使用jquery函数为ca1然后这工作正常，但如果同时我使用jquery函数为ca2然后它不，现在如果我删除函数为ca1现在使用ca2的jquery函数然后这工作正常。我无法一次为两个div使用jquery函数。请有人帮忙。

我的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();});});

Answer 1

而不是

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

试

$('.ca1').resize(move_div)

现在您要为每个div添加一个处理程序。

Answer 2

这有几个问题。例如，您只需要调用$(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()包裹在{}中，并使用,分隔它们，则可以将{c}规则与$('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

但变量resize未定义且没有理由在{{1}}上触发此功能，因为您使用的是固定宽度和高度。如果这使用百分比并且响应那么它将用于在页面调整大小上重新定位img。所以你可以删除那个

FIDDLE

Answer 3

我会说你使用jQueryUI javascript

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

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

一次将图像放在两个DIV的中心

3 个答案:

FIDDLE