不重要 11 發表於 July 16, 2011 檢舉 Share 發表於 July 16, 2011 之前日本大海嘯時看到一個國外的網路新聞裡面有幾張災前災後的比較圖那個比較圖很特別是以兩張圖重疊,然後中間有一個直桿直桿左邊是災前,右邊是災後滑鼠在圖上左右移動,就會把桿子就會根著動然後一張圖片會因為移動而被遮閉另一張則會顯示被遮閉的部份請問一下有沒有人知道那是怎麼弄的??? 鏈接文章 分享到其他網站
j100002ben 10 發表於 July 16, 2011 檢舉 Share 發表於 July 16, 2011 有範例或是Demo嗎?原則上是Javascript做的,不過詳細節看到網站比較準 鏈接文章 分享到其他網站
不重要 11 發表於 July 17, 2011 作者 檢舉 Share 發表於 July 17, 2011 http://www.abc.net.au/news/specials/japan-quake-2011/this 鏈接文章 分享到其他網站
j100002ben 10 發表於 July 17, 2011 檢舉 Share 發表於 July 17, 2011 兩張圖片用position跌在同一個區域,然後上面那張圖片設定右邊的黑色框線,之後在設定Javascript當滑鼠滑在這兩個DIV上面的時候,動態調整上面那個DIV的寬度 鏈接文章 分享到其他網站
伊達政宗 11 發表於 July 18, 2011 檢舉 Share 發表於 July 18, 2011 (已編輯) $(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 ,由 伊達政宗 鏈接文章 分享到其他網站
Recommended Posts
請登入後來留意見
在登入之後,您才能留意見
立即登入