一個網頁圖片的語法

[不重要 11]

之前日本大海嘯時

看到一個國外的網路新聞

裡面有幾張災前災後的比較圖

那個比較圖很特別

是以兩張圖重疊，然後中間有一個直桿

直桿左邊是災前，右邊是災後

滑鼠在圖上左右移動，就會把桿子就會根著動

然後一張圖片會因為移動而被遮閉

另一張則會顯示被遮閉的部份

請問一下有沒有人知道那是怎麼弄的???

[j100002ben 10]

有範例或是Demo嗎？

原則上是Javascript做的，不過詳細節看到網站比較準

[不重要 11]

http://www.abc.net.au/news/specials/japan-quake-2011/

this

[j100002ben 10]

兩張圖片用position跌在同一個區域，

然後上面那張圖片設定右邊的黑色框線，

之後在設定Javascript當滑鼠滑在這兩個DIV上面的時候，動態調整上面那個DIV的寬度

[不重要 11]

有沒有詳細的語法....

[伊達政宗 11]

$(function(){
  // Loop through all the sets of before and after pics
  $(".beforeafter").each(function(){
    // Set the container's size to the size of the image
    $(this).width($(this).find("img[rel=before]").attr("width")).height($(this).find("img[rel=before]").attr("height"));
    // Convert the images into background images on layered divs
    $(this).append("<div class='after'></div>").find(".after").css({"background": "url(" + $(this).find("img[rel=after]").attr("src") + ")", "width": $(this).find("img[rel=after]").attr("width") + "px", "height": $(this).find("img[rel=after]").attr("height") + "px"});
    $(this).append("<div class='before'></div>").find(".before").css({"background": "url(" + $(this).find("img[rel=before]").attr("src") + ")", "width": $(this).find("img[rel=before]").attr("width") - 40 + "px", "height": $(this).find("img[rel=before]").attr("height") + "px"});
    // Add a helpful message
    $(this).append("<div class='help'>Hover over the image to toggle before/after</div>");
    // Remove the original images
    $(this).find("img").remove();
    // Event handler for the mouse moving over the image
    $(this).mousemove(function(event){
      // Need to know the X position of the parent as people may have their browsers set to any width
      var offset = $(this).offset().left;
      // Don't let the reveal go any further than 50 pixels less than the width of the image
      // or 50 pixels on the left hand side
      if ((event.clientX - offset) < ($(this).find(".after").width() -50) && (event.clientX - offset) > 50) {
        // Adjust the width of the top image to match the cursor position
        $(this).find(".before").width(event.clientX - offset);
      }

    });
    // Fade out the help message after the first hover
    $(this).hover(function(){
      $(this).find(".help").animate({"opacity": 0}, 400, function(){ $(this).find(".help").remove(); });
    });
  });
});

http://www.abc.net.au/news/code/2734244/Before+and+after+JavaScript.js

應該是這個

補充一下，還要加上這個CSS，將兩張圖重疊

http://www.abc.net.au/news/code/2734242/Before+and+after+CSS.css

此內容已被編輯, July 19, 2011 ,由 伊達政宗