CSS / HTML圖庫

Question

目前我有一個純HTML / CSS圖片庫，但由於它使用<a>標簽來更改圖像，它還會將頁面向下碰到圖像。 我有一個固定的導航欄，不用說，它只是在頁面被撞倒時覆蓋圖像。

我目前用於畫廊的可愛CSS

#images {
    width: 400px;
    height: 200px;
    overflow: hidden;
    position: relative;
    margin: 20px auto;
}
#images img {
    width: 400px;
    height: 200px;
    position:absolute;
    opacity: 0;
    transition: all linear 500ms;
    -o-transition: all linear 500ms;
    -moz-transition: all linear 500ms;
    -webkit-transition: all linear 500ms;
}
#images img:target {
    opacity: 1;
}

#slider a {
    text-decoration: none;
    margin-top:5px;
    border: 1px solid #4D3132;
    padding: 0px 6px;
    color: #FFF;
}
#slider a:hover {
    background: #282F40;
    color: #FFF;
}

和HTML （當然不是整個頁面，只是元素。）

<div id="images">
<img id="image1" src="http://i.imgur.com/dL3io.jpg" />
<img id="image2" src="http://i.imgur.com/qASVX.jpg" />
<img id="image3" src="http://i.imgur.com/fLuHO.jpg" />
<img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" />
</div>  
<div class="center">
<div id="slider">
<a href="#image1">1</a>
<a href="#image2">2</a>
<a href="#image3">3</a>
<a href="#image4">4</a>

</div></div>

那么，是否有可能創建一個不會碰到頁面的HTML / CSS庫，或dosnt使用<a>標簽......？

我還應該指出，我不打算制作“幻燈片”，圖片不必自動更換。

編輯：

圖像本身沒有移動，因為使用了<a>標簽而被抬高了。

Answer 1

如果您不想使用JavaScript，可以通過為鏈接設置目標屬性來在iframe中加載圖片。

<div id="slider">
    <a target="pictureFrame" href="http://i.imgur.com/dL3io.jpg">1</a>
    <a target="pictureFrame" href="http://i.imgur.com/qASVX.jpg">2</a>
    <a target="pictureFrame" href="http://i.imgur.com/fLuHO.jpg">3</a>
    <a target="pictureFrame" href="http://i.imgur.com/5Sd3Q.jpg">4</a>
</div>
<iframe id="images" src="http://i.imgur.com/dL3io.jpg" name="pictureFrame">
</iframe>

在這里小提琴： http ： //jsfiddle.net/Nillervision/rvtrq/

Answer 2

你需要的是一點點javascript魔法。 你可以用vanilla js和jQuery來做到這一點。 我將為您的問題演示一個簡單的jQuery解決方案。

由於您使用錨點來定位圖像，因此瀏覽器將自動滾動到您選擇的圖像。 如果瀏覽器窗口很小並且圖像移位，則會出現丑陋的跳躍效果。

Jquery代碼：

$('#slider a').click(function(event){

    // prevent default behavior of anchors
    event.preventDefault();

    // get the id of selected image
    var $id = $(this).attr('href');

    // hide previous image (if there is one)
    $('#images .target').removeClass('target');

    // show the selected image
    $('#images ' + $id).addClass('target');
});

CSS更改：

#images img:target

變

#images img.target

我希望這會有所幫助，不要忘記將jQuery庫包含在您的代碼中。

祝好運！