用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效果展示)的更多相关文章

  1. 创意HTML5文字特效 类似翻页的效果

    原文:创意HTML5文字特效 类似翻页的效果 之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也 ...

  2. 3D版翻页公告效果

    代码地址如下:http://www.demodashi.com/demo/12830.html 前言: 在逛小程序蘑菇街的时候,看到一个2D版滚动的翻页公告效果.其实看到这个效果的时候,一点都不觉得稀 ...

  3. jquery 实现智能炫酷的翻页相册效果

    jquery 实现智能炫酷的翻页相册效果巧妙的运用 Html 的文档属性,大大减少jquery 的代码量,实现了智能炫酷的翻页相册.兼容性很好,实现了代码与标签的完全分离​1. [代码]jquery ...

  4. Android 聊天表情输入、表情翻页带效果、下拉刷新聊天记录

    经过一个星期的折腾,最终做完了这个Android 聊天表情输入.表情翻页带效果.下拉刷新聊天记录.这仅仅是一个单独聊天表情的输入,以及聊天的效果实现.由于我没有写server,所以没有两方聊天的效果. ...

  5. jquery css3问卷答题卡翻页动画效果

    这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...

  6. 15个最佳jQuery的翻页书效果的例子

    在这里,你会发现15的jQuery的翻页书的插件,提供了良好的页面翻转的经验,并帮助创建类似书本的效果. jQuery的增添了一道亮丽的过渡到实际的页面在一本书或杂志HTML5. 1. BookBlo ...

  7. 49.CSS--- 特殊css3效果展示

    1.设置多行文本超出显示省略号<div class="caption"> <p>显示超过两行就显示省略号,其余隐藏,隐藏不了的情况下给这个模块添加一个高度和 ...

  8. 桌面浏览器实现滑动翻页效果(Swiper)

    还是那个号称很炫的B/S展示软件,在液晶屏上展示需要有滑动翻页的效果(在同一页面滑动切换内容,不是切换页面),最后确定使用功能很强大的Swiper类库. 具体优点可参考:http://www.chin ...

  9. 通过js实现整屏滑动+全屏翻页+动画展示+线性图

    技术:html+css+jquery+jquery-ui.js+jquery.fullPage.js   概述 本demo主要通过html+css+js实现整屏滑动,全屏翻页并带动画的功能效果,借助于 ...

随机推荐

  1. django使用笔记

    django的具体使用可以看官方手册http://djangobook.py3k.cn,这里主要记录使用django中遇到的问题. 1.中文编码问题. 因为我们用到的东西基本上都有中文,在settin ...

  2. 关于setInterval和setTImeout中的this指向问题

    前些天在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,如下例: var num = 0; function ...

  3. 数码管问题(c++实现)

    描述:液晶数码管用七笔阿拉数字表示的十个数字,把横和竖的一 个短划都称为一笔,即7有3笔,8有7笔等.对于十个数字一种排列,要做到 两相邻数字都可以由另一个数字加上几笔或减去几笔组成,但不能又加又减. ...

  4. Javascript面向对象编程(二)--- 构造函数的继承

    这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动 ...

  5. Windows 下Apace tomcat

    java JDK安装: 1. 官方www.oracle.com 下载jdk 2. 环境变量配置 (1)新建->变量名:JAVA_HOME变量值:C:\Program Files (x86)\Ja ...

  6. iOS开发网络篇—NSURLConnection基本使用(二)

    1.常用的类       NSURL:请求地址 NSURLRequest:一个NSURLRequest对象就代表一个请求,它包含的信息有:      一个NSURL对象      请求方法.请求头.请 ...

  7. 使用docker搭建lnmp环境

    Docker容器LNMP环境搭建 安装 制作镜像 启动并关联实例 安装 系统环境 硬件型号: ThinkPad T520 系统版本: ubuntu 14.04 CPU: i7 RAM: 8G 添加软件 ...

  8. android EditView ime

    1.android:imeOptions 可以用来配置输入法右下角的: 这可以在xml中添加相应的属性android:imeOptions actionGo  输入法右下角显示“去往” actionS ...

  9. ERROR: The partition with /var/lib/mysql is too full! failed!

    发现:ERROR: The partition with /var/lib/mysql is too full! failed! 然后df -h 发现硬盘100%   于是分析到底什么占用了这近两百G ...

  10. Effective Java 35 Prefer annotations to naming patterns

    Disadvantages of naming patterns Typographical errors may result in silent failures. There is no way ...