Question

所以基本上我想要实现的是，

当人们点击第一张图片时，其余部分会滑动并淡出，然后内容会加载，
当人们关闭时，它会回到4张图片中，
当人们点击第二张图片时;图像1,3和4将滑动和淡出，内容显示等等。

我试着玩Jquery，结果仍然没有结果。

这是链接： http://homethai.com.au/testing/test.swf

Answer 1

是的，当然。

设置为：

绝对将每个元素放在正确的位置。
创建一个名为.leftOffscreen的类，其左侧为-100px，.rightOffscreen将其设置为您想要的最大值。（一旦它正常工作，可以使用转换而不是左/右转换，因为它会在某些浏览器上加速硬件，因此性能更高）
为每个图片添加CSS过渡。

算法：

点击后，使用.index()找到您的图像。
使用.each()循环播放图像。如果他们的索引小于点击的索引，请添加类leftOffscreen，如果他们超过，请添加rightOffscreen。
单击x时，从所有图像中删除这些类。

Answer 2

这（通过一些试验和错误）实际上主要是通过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';
}

无论如何在HTML5，CSS3和Jquery上执行此动画？

2 个答案: