反正有没有在 HTML5、CSS3 和 Jquery 上执行这个动画?

Posted

技术标签:

【中文标题】反正有没有在 HTML5、CSS3 和 Jquery 上执行这个动画?【英文标题】:Is there anyway to perform this animation on HTML5, CSS3, and Jquery? 【发布时间】:2012-07-07 23:40:48 【问题描述】:

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

当人们点击第一张图片时,其余的会滑动并淡出,然后内容加载, 当人关闭时,它会重新变成4张图片, 当人们点击第二张图片时;图片 1、3 和 4 会滑动并淡出,内容会显示等等。

我尝试使用 Jquery,但结果仍然为零。

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

【问题讨论】:

这是绝对可以实现的,但我不知道有人会怎么做。无论如何,我认为这是一个非常酷的照片动画创意。对那些认为这是无用评论的人感到抱歉.. 【参考方案1】:

这(经过一些试验和错误)实际上主要通过 CSS 实现,纯 javascript 仅用于切换类名(当单击块和单击关闭链接时)。

如果将 CSS 中的 .block.active 替换为 .block:hover 以便每个块在悬停时展开,并删除关闭链接(和样式),则根本不需要 JS。

Demo Fiddle Fiddle without displaying code, much less cramped

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';

【讨论】:

非常感谢哥们,有了提供的脚本,我终于设法修改它并让它完美运行。再次感谢!【参考方案2】:

是的,当然。

设置是:

    将每个元素绝对定位在正确的位置。 创建一个名为 .leftOffscreen 的类,将 left 设置为 -100px,.rightOffscreen 将其设置为您想要的任何最大值。 (一旦它工作,尽可能使用转换而不是左/右,因为它将在某些浏览器上进行硬件加速,因此性能更高) 为每张图片添加 CSS 过渡效果。

算法:

    点击后,使用.index()查找您的图片。 使用.each() 循环浏览图像。如果它们的索引小于点击的索引,则添加类leftOffscreen,如果大于则添加rightOffscreen。 单击 x 时,从所有图像中删除这些类。

【讨论】:

以上是关于反正有没有在 HTML5、CSS3 和 Jquery 上执行这个动画?的主要内容,如果未能解决你的问题,请参考以下文章

让低版本IE兼容H5+CSS3新特性的方法

使用 HTML5/CSS3 而不是 JavaScript 滚动滚动/羊皮纸

ECMAScript 6初探附查询手册

html5+css3初级程序员

前端学习总结HTML5+CSS3+JavaScript

网页设计:CSS3HTML5JS和框架