無論如何要在HTML5，CSS3和Jquery上執行此動畫？

所以基本上我想要實現的是，無論如何要在HTML5，CSS3和Jquery上執行此動畫？

當人們點擊第一個圖像，其餘的將滑動和掉色，然後將內容加載起來，
當人們靠近，這將是回4圖像，
當人們點擊第二張圖片;圖像1,3和4將滑動並淡出，內容顯示等等。

我試圖玩弄jquery，仍然以零結果結束。

這裏是鏈接： http://homethai.com.au/testing/test.swf

來源

2012-07-08 Konstara Prawiro

這是definietly achieveable，但我完全不知道有人要如何去了解它。無論如何，我認爲這是一個非常酷的照片動畫的想法。對不起，對於那些認爲這是無用的評論的人.. – maxhud 2012-07-08 04:15:39

實際上，這可以通過CSS實現，只需使用普通的JavaScript切換類名（當單擊塊並單擊關閉鏈接時）。

如果CSS .block.active被替換.block:hover使每塊將擴大懸停和密切的聯繫（和樣式）被移除，則沒有JS是必需的。

HTML：

<div class="block"> 
    <div class="closelink">X</div> 
</div> 
<div class="block"> 
    <div class="closelink">X</div> 
</div> 
<div class="block"> 
    <div class="closelink">X</div> 
</div> 
<div class="block"> 
    <div class="closelink">X</div> 
</div>

CSS：

body { 
    text-align: center 
} 
.block { 
    display: inline-block; 
    position: relative; 
    width: 60px; 
    height: 60px; 
    background: #08f; 
    margin: 50px; 
    cursor: pointer; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    transition: margin 1s; 
    -moz-transition: margin 1s; 
    -webkit-transition: margin 1s; 
    -o-transition: margin 1s; 
    -ms-transition: margin 1s; 
    user-select: none; 
    -moz-user-select: none; 
    -webkit-user-select: none 
} 
.block .closelink { 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    right: -20px; 
    top: -20px; 
    visibility: hidden; 
    font-size: 14px; 
    font-family: Segoe UI, Tahoma, Arial, Verdana, sans-serif; 
    background: #ccc; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px 
} 
.block.active { 
    margin-left: 200px; 
    margin-right: 200px 
} 
.block.active .closelink { 
    visibility: visible 
}

的JavaScript：

window.addEventListener('load', init, false); 
function init() { 
    var blocks = document.getElementsByClassName('block'); 
    var closeLinks = document.getElementsByClassName('closelink'); 
    for(i = 0; i < blocks.length; i++) { 
     blocks[i].addEventListener('click', blockClicked, false); 
    } 
    for(i = 0; i < closeLinks.length; i++) { 
     closeLinks[i].addEventListener('click', closeLinkClicked, false); 
    } 
} 
function blockClicked(e) { 
    var blocks = document.getElementsByClassName('block'); 
    for(i = 0; i < blocks.length; i++) { 
     blocks[i].className = 'block'; 
    } 
    e.target.className = 'block active'; 
} 
function closeLinkClicked(e) { 
    e.stopPropagation(); 
    e.target.parentElement.className = 'block'; 
}

來源

2012-07-08 09:44:43

非常感謝你的朋友，隨着腳本提供，我終於設法修改它，讓它工作完美。再次感謝！ – 2012-07-09 03:48:02

是的，當然。

的設立是：

絕對在正確的位置的每個元素的位置。
製作一個名爲.leftOffscreen的類，其左側設置爲-100px，而.rightOffscreen將其設置爲您想要的任何最大值。（一旦它工作，使用變換，而不是左/右，因爲它會在某些瀏覽器上硬件加速，因此性能更高）
向每張圖片添加CSS轉場。

算法：

點擊之後，發現你使用.index()哪個圖像。
使用.each()循環顯示圖像。如果它們的索引小於點擊的索引，則添加類leftOffscreen，如果它們大於，則添加rightOffscreen。
單擊x時，從所有圖像中刪除這些類。

來源

2012-07-08 08:17:26

無論如何要在HTML5，CSS3和Jquery上執行此動畫？

回答

相關問題