用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. 程序中条用其他程序中已经存在的PERFORM

    PARAMETERS p_sub(40) TYPE c. DATA fssub(40) TYPE c. fssub = p_sub. TRY.     PERFORM (fssub) IN PROGR ...

  2. RecyclerView解析--onViewDetachedFromWindow()/onViewAttachedToWindow()

    先看这段源码介绍: /** * Called when a view created by this adapter has been detached from its window. * * &l ...

  3. python+Eclipse+pydev环境搭建(转)

    编辑器:Python 自带的 IDLE 简单快捷, 学习Python或者编写小型软件的时候.非常有用. 编辑器: Eclipse + pydev插件 1. Eclipse是写JAVA的IDE, 这样就 ...

  4. 我对XCode Objective-c Cocoa的简单理解

    我对XCode Objective-c Cocoa的简单理解 Xcode Xcode说的通俗一点就是开发OS X 和 iOS 应用程序的. 如果我们想要认真点说 ,Xcode 是运行在操作系统Mac ...

  5. swift 字符转为类，代码创建控件

    在使用类之前要先获得 命名空间 通过json来获取 字符型的类名 然后创建类对象,这时候就要用到字符转类 // 从info字典中获取到 命名空间 转为字符型 let NS = NSBundle.mai ...

  6. iOS之UI--使用SWRevealViewController实现侧边菜单功能详解实例

    使用SWRevealViewController实现侧边菜单功能详解 下面通过两种方法详解SWRevealViewController实现侧边菜单功能: 1.使用StoryBoard实现   2.纯代 ...

  7. Office 2013 激活工具

    早上装机,顺便装了下Office 2013,界面还是不错的.网上找了下相关的激活工具. 发现还是独木成林做的最好呀,直接把别人的链接给拿过来好了,下载地址 http://pan.baidu.com/s ...

  8. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

  9. 修复ORACLETNS-12545 因目标主机或对象不存在错误

    现象: ORACLE启动不了,输入cmd->lsnrctl后,出现如下错误, 经查资料,发现是主机名可能解析有问题,后来在D:\oracle\ora92\network\admin下打开list ...

  10. Effective Java 25 Prefer lists to arrays

    Difference Arrays Lists 1 Covariant Invariant 2 Reified at runtime Erased at run time 3 Runtime type ...