移动图像到不同的位置

我一直在试图移动小图像（缩略图），但它不会移动。它只是固定在左边。我试过给它一个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); 
}

HTML正文

<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>

来源

2013-05-14 Elvain

提供的jsfiddle例子吗？ – hjpotter92 2013-05-14 13:22:46

你是如何尝试移动它的？ – Aioros 2013-05-14 13:28:21

@Aioros把图像放入div然后给它一个id然后我尝试在css样式中设置边距 – Elvain 2013-05-14 13:31:11

好吧，如果这三个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-14 14:01:14 Aioros

这不会解决问题。他希望他们以页面为中心（或类似的东西）。你试图在这里实现的可以通过使用显示（内联，内联表等）来完成。没有浮动需要。 – melancia 2013-05-14 14:07:54

谢谢，我用另一种简单的可能性编辑了答案。让我们看看它是否有帮助。 – Aioros 2013-05-14 14:12:34

根据我的意见的溶液。也许你可以通过这个选项：

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-14 14:25:52 melancia

移动图像到不同的位置

回答

相关问题