0

我一直在尝试移动小图像（缩略图），但它不会移动。它只是固定在左边。我试过给它一个 div id 并为其设置边距，但它不起作用。

以下是代码：

JavaScript

function showImage(imgName) {
    document.getElementById('largeImg').src = imgName;
    showLargeImagePanel();
    unselectAll();
}
function showLargeImagePanel() {
    document.getElementById('largeImgPanel').style.visibility = 'visible';
}
function unselectAll() {
    if(document.selection) document.selection.empty();
    if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
    obj.style.visibility = 'hidden';
}

CSS

#largeImgPanel {
    text-align: center;
    visibility: hidden;
    position: fixed;
    z-index: 100; 
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(100,100,100, 0.5);
}

正文

<body>
    <img src="images/small1.png" style="cursor:pointer" onclick="showImage('images/large1.jpg');" />
    <img src="images/small2.jpg" style="cursor:pointer" onclick="showImage('images/large2.jpg');" />
    <img src="3_small.jpeg" style="cursor:pointer" onclick="showImage('3_large.jpeg');" />

    <div id="largeImgPanel" onclick="hideMe(this);">
        <img id="largeImg" margin: 0; padding: 0;" />
    </div>

</body>
</html>
4

2 回答 2

0

好吧，如果是img你说的三个s标签，你必须设置它们的样式。就像是：

<img src="images/small1.png" class="smallimg" onclick="showImage('images/large1.jpg');" />
<img src="images/small2.jpg" class="smallimg" onclick="showImage('images/large2.jpg');" />
<img src="3_small.jpeg" class="smallimg" onclick="showImage('3_large.jpeg');" />

和

.smallimg {
    cursor: pointer;
    float: right;
    /* or whatever position/top/left values you need */
}

或者，如果您希望它们居中，您可以执行以下操作：

<div style="text-align: center;">
    <img src="images/small1.png" class="smallimg" onclick="showImage('images/large1.jpg');" />
    <img src="images/small2.jpg" class="smallimg" onclick="showImage('images/large2.jpg');" />
    <img src="3_small.jpeg" class="smallimg" onclick="showImage('3_large.jpeg');" />
</div>
于 2013-05-14T14:01:14.663 回答
0

基于我的评论的解决方案。也许你可以通过这个选项：

HTML

<div class="container">
    <img src="http://www.bit-101.com/blog/wp-content/uploads/2009/05/ball.png" alt="" />
    <img src="http://ecx.images-amazon.com/images/I/41P44yRoAPL._SL75_SS50_.jpg" alt="" />
    <img src="http://ecx.images-amazon.com/images/I/41B9Qbj2CBL._SL75_SS50_.jpg" alt="" />
</div>

CSS

.container
{
    height: 50px; /* img height */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px; /* half of the img height */
    margin-left: -75px; /* half of the img width's total */
    overflow: hidden;
}

.container > img
{
    display: inline;
}

http://jsfiddle.net/qFmhf/

于 2013-05-14T14:25:52.503 回答