首页 > 代码库 > 颗粒翻页（css3效果展示）
颗粒翻页（css3效果展示）
用css3效果做了一个颗粒翻页效果，布局上，一张图片做底层，在这张图片上用js创建一层小的行和列各为r和c的小span，给这些span分别设置background-position；用来覆盖原来的一张图片（创建span的时候利用DOM操作，利用两个循环分别创建行和列，然后在循环中创建元素和设置元素css属性）；然后在点击的时候添加事件，使用transform设置翻转效果，这里，我们可以设置逐个翻转和斜线翻转（斜线翻转利用的是span的行和列相加值相等原理）；这里需要注意的是设置图片播放顺序，span上的图片永远比下面div的整张图片小一级，并且在更换图片的完成的时候瞬时间更换span和div的图片，使之继续符合上述的图片层级，这个时间差，人眼是无法识别的。
大体我的思路就是这样，写的不是很清楚，现在想来，做一个合格的优秀的程序员，语言表达确实是比较重要的，因为分享和学习才是一个人不断进步的基础。
话不多说，直接上代码，希望大家一起分享一起进步
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>颗粒翻转</title>
<style>
*{margin:0;padding:0;}
#box{width:700px;
height: 400px;
margin:50px auto;
position: relative;
}
#box span{
position: absolute;
width: 100%;
height: 100%;
transition:1s all ease;
transform:rotateY(0deg);
transform-style:preserve-3d;
}
#box span em{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#box .front{
background-image: url("img/0.jpg");
transform:translateZ(1px);
}
#box .back{
background-image: url("img/1.jpg");
transform:translateZ(-1px) scale(-1,1);
}
#box:active span{
/*transform:rotateY(180deg);*/
}
</style>
<script>
window.onload = function(){
var oBox = document.getElementById(‘box‘);
var C = 7;
var R = 4;
for(var r = 0;r<R;r++){
for(var c = 0;c<C;c++){
var oSpan = document.createElement(‘span‘);
oSpan.style.width = oBox.offsetWidth/C +‘px‘;
oSpan.style.height = oBox.offsetHeight/R +‘px‘;
oSpan.style.left = oBox.offsetWidth/C*c+‘px‘;
oSpan.style.top = oBox.offsetHeight/R*r+‘px‘;
oSpan.innerHTML =‘<em class="front"></em><em class="back"></em>‘;
oBox.appendChild(oSpan);
oSpan.children[0].style.backgroundPosition = -oSpan.offsetLeft+‘px ‘+-oSpan.offsetTop+‘px‘;
oSpan.children[1].style.backgroundPosition = -oSpan.offsetLeft+‘px ‘+-oSpan.offsetTop+‘px‘;
oSpan.r = r;
oSpan.c = c;
}
}
var iNow=0;
var bReady = true;
oBox.onclick = function(){
if(bReady==false){return;}
bReady = false;
iNow++;
var aSpan = oBox.children;
for(var i = 0;i<aSpan.length;i++){
aSpan[i].style.transition = ‘1s all ease ‘+100*(aSpan[i].r+aSpan[i].c)+‘ms‘;
aSpan[i].style.transform =‘rotateY(180deg)‘;
}
//换图
aSpan[aSpan.length-1].addEventListener(‘transitionend‘,function(){
bReady = true;
for(var i = 0;i<aSpan.length;i++){
aSpan[i].style.transition = ‘none‘;
aSpan[i].style.transform =‘rotateY(0deg)‘;
aSpan[i].children[0].style.backgroundImage =‘url("img/‘+(iNow%3)+‘.jpg")‘;
aSpan[i].children[1].style.backgroundImage =‘url("img/‘+(iNow+1)%3+‘.jpg")‘;
}
},false)
};
};
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>
颗粒翻页（css3效果展示）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。