用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. 使用div创建选取框

    使用div实现了选取框效果. 代码如下 <!DOCTYPE html> <html> <head> <title>myCanvasTest</ti ...

  2. PowerDesign设置列名与表名的大小写规则

    因为设计的Model是要用到Oracle 11g的,Oracle 11g的表名和列名默认是大写,在设计模型当中小写转大写一直很苦闹,发现PowerDedign可以直接设置,见下文: 打开Tools-- ...

  3. pycharm安装与实践

    PyCharm简介 PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理.代码跳转.智能提示.自动完成. ...

  4. vector,arraylist, linkedlist的区别是什么

    LinkedList类 LinkedList实现了List接口,允许null元素. 此外LinkedList提供额外的get,remove,insert方法在LinkedList的首部或尾部. Lin ...

  5. CSS 相邻选择器(七)

    一.相邻选择器 相邻选择器前后部分之间用一个加号(+)隔开,前后两部分选择反符在结构上属于同级关系,如 相邻选择器,是根据左侧选择符指定相邻元素,然后在该相邻元素后面寻找匹配匹配右侧选择符的相信元素 ...

  6. IOS xib在tableview上的简单应用（通过xib自定义cell）

    UITableView是一种常用的UI控件,在实际开发中,由于原生api的局限,自定义UITableViewCell十分重要,自定义cell可以通过代码,也可以通过xib. 这篇随笔介绍的是通过xib ...

  7. 【转】IOS开发资源汇总

    转自:http://blog.csdn.net/favormm/article/details/6664970 如何用Facebook graphic api上传视频: http://develope ...

  8. Unity3D事件函数的执行顺序 - 包含渲染等模块的完整版，中英文对照

    原文地址: http://www.cnblogs.com/ysdyaoguai/p/3746828.html In Unity scripting, there are a number of eve ...

  9. 阶乘 求n！中质因数的个数

    在n!中末尾有几个0 取决于n!中5的个数(2肯定比5多) 所以遍历从1到n的数,看总共有几个5即可 ..N do j = i; == ) ++ret; j /= ; end end 有个nb的方法: ...

  10. Effective Java 23 Don't use raw types in new code

    Generic types advantage Parameterized type can provide erroneous check in compile time. // Parameter ...