Question

您好我正试图使用jquery在图片中居中箭头...箭头将用于导航我的照片。我的问题是我无法将箭头置于中心位置....

这是我的代码：

我用类名更改了id，但仍然无法将js css和html链接到你身上

的HTML / PHP

    <div id="large" class="loader">
           <div id="test5"> 
            <img src="<?php bloginfo("template_url"); ?>/images/right.gif" class="right" width="38" height="48" alt="right"/>
            <img src="<?php bloginfo("template_url"); ?>/images/left.gif" width="38" height="48" class="left" />  
            <center><img src="<?php echo catch_that_image() ?>" class="photo_large"/><center>
        </div>
    </div>

CSS

#large {
padding-top:25px;   
margin: 0 auto;
width:700px;
max-height:500px;   
padding-bottom:25px;
position:relative;

}

.photo_large{

    resize:both;
    border: solid 5px #fff;
    max-height:390px;
    max-width:600px;
    resize:both;
    margin-left:auto;
    margin-right:auto;
}


#test5{
    position:relative;

}


.right {
    position:absolute;
    z-index:1;

}

.left {
    position:absolute;
    z-index:1;

}

JS

$(document).ready(function() {
    $(".right").css("top", ($(".photo_large").height()/2) - ($(".right").height()/2));
    $(".right").css("left", ($(".photo_large").width()/2) - ($(".right").width()/2));    
});

Answer 1

$(document).ready(function() {
     $("#right").css("top", (($("#photo_large").height() - $(this).height())/2 + "px"));
});

注意：您正在使用$("#right").each();理论上，id应该只在一个元素上，因此运行$("#right").each();不应该做任何事情。如果您对多个元素使用相同的ID，我建议您使用类。

Answer 2

#photo_large是#right的孩子吗？如果是这样，你可能遇到的问题是jQuery试图操纵页面上的每个#photo_large。

$(function() {

$("#right").each(function() {

    var h = $(this).children("#photo_large").height();

    var hr = $(this).height();

    $(this).css("top", ((h - hr)/2 + "px"));

});


});

但是，与Switz达成一致意见;使用重复对象的类，在布局中每页只放置一次的ID。

Answer 3

我相信你需要更多的CSS。检查我的现场演示： http://jsfiddle.net/pgHqZ/1/

<强> JS

$(document).ready(function() {
    $("#right").css("top", ($("#photo_large").height()/2) - ($("#right").height()/2));
    $("#right").css("left", ($("#photo_large").width()/2) - ($("#right").width()/2));    
});

<强> HTML

<img src="http://dummyimage.com/300x300/ffc/000&text=Picture1" id="photo_large">
<img src="http://dummyimage.com/30x30/f00/fff&text=>" id="right">

<强> CSS

#photo_large{
    z-index:998;
}
#right{
    z-index:999;
    position:absolute;
}

使用jquery计算坐标的问题

3 个答案: