反正有没有在 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。
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 上执行这个动画?的主要内容,如果未能解决你的问题,请参考以下文章