用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. 关于谷歌浏览器不能播放背景音乐的问题（与IE的不同之处）

    第一篇博文 忍受寂寞,抵制诱惑,持之以恒. 开发时,以下代码在IE浏览器上能顺利播放背景音乐,可在谷歌浏览器上却没有动静. <html> <body> <bgsound ...

  2. 一台电脑存放多个git账户的多个rsa秘钥

    未命名.html div.oembedall-githubrepos{border:1px solid #DDD;border-radius:4px;list-style-type:none;marg ...

  3. 被混淆的C#类库的反编译

    今天看公司以前的代码,用的是.NRT Reactor v4.4.7.5进行的混淆,直接使用.NET Reflector v8.5.0.179 是无法查看的,提示:Invalid number of d ...

  4. CRM Look Up 解决方案

    CRM 前瑞开发中关于lookup的开发工作肯定会遇到,例如选中一个客户或者联系人后自动把相关的信息映射到相关记录上,这样可以减少用户的输入工作.我们在CRM 的映射关系中可以配置相关字段的映射可以解 ...

  5. andriod 动态创建控件

    Button btNext=(Button)findViewById(R.id.next); btNext.setOnClickListener(new Button.OnClickListener( ...

  6. SharePoint 2010 文档管理之文档推送

    前言:文档推送功能,不是一个复杂的功能,我们这里简单的应用了Ribbon定制.Js使用.对象模型推送(Server端),下面,我们来简单介绍下文档推送功能吧. 一. 功能设计: 文档推送功能,主要就是 ...

  7. sudo gem install cocoapods 没反应问题

    1. 尝试更新 sudo gem update --system 2. 查看安装详细 sudo gem install cocoapods -V 3.详细使用有个链接 http://blog.csdn ...

  8. CSS 伪类和伪对象选(五)

    一.伪选择器 伪选择器包括:伪类选择器和伪对象选择器,以冒号(:)作为前缀,冒号后紧跟伪类或者伪对象名称,冒号前后没有空格,否则解析为包含选择器 如: div:hover{ font-size:12p ...

  9. float类型转对象 对象转float类型（一）

    //float类型转化为对象CGFloat fValue = 1.f;NSNumber *objNo = [NSNumber numberWithFloat:fValue];数值.BOOL型都可以转成 ...

  10. Android 启动过程简析

    首先我们先来看android构架图: android系统是构建在linux系统上面的. 所以android设备启动经历3个过程. Boot Loader,Linux Kernel & Andr ...