用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. js中创建对象的几种方式

    创建对象指创建一个object并给这个对象添加属性和方法,有以下几个方式: 最基本的: var Person={}; Person.name='tom'; Person.age='20'; Perso ...

  2. SharePoint 如何找到List的Template ID

    在我们添加Ribbon操作,或者对特定模板进行操作的时候,经常需要ListTemplate的数值,我们经常需要搜索各种网页,来查找匹配的ListTemplate值,其实,有个比较简便的方法. 像定义R ...

  3. Android-BaseLine基础性开发框架

    比较基础性的Android快速开发框架Android-BaseLine,Android-BaseLine实现的功能远远没有其他框架多,一个很好的框架不应该显得太过臃肿,很多功能一般情况下我们可能用不到 ...

  4. 安卓开发--android library projects cannot be launched错误

    最新因为学习,问技术友要了几个源代码,导入源代码的时候无法进行真机或者虚拟机测试. 原因:android library projects cannot be launched 百度了一下,解决方法很 ...

  5. App开发流程之配置Info.plist文件

    Info.plist文件控制应用的全局配置,例如bundle name,display name. 先来看一下默认创建的Info.plist文件 右键左侧的Info.plist文件,可以open as ...

  6. Spring(三)Bean继续入门

    一.Aware相关接口 对于应用程序来说,应该尽量减少对Sping Api的耦合程度,然而有些时候为了运用Spring所提供的一些功能,有必要让Bean了解Spring容器对其进行管理的细节信息,如让 ...

  7. (传输层)TCP协议

    目录 首部格式数据单位特定注意自动重传请求ARQ具体实现发送缓存接收缓存滑动窗口确认丢失和确认迟到超时重传时间选择报文段的发送时机运输连接发送TCP请求客户端拥塞处理相关概念避免拥塞具体实现TCP 的 ...

  8. android JSON解析之JSONObject与GSON

    1.写在前面 JSON数据是android网络开发中常见的数据格式,JSON最常见的传输方法是使用HTTP协议,关于android开发中HTTP协议的使用方法可参考我的另一篇随笔android网络编程 ...

  9. Effective Java 37 Use marker interfaces to define types

    Marker interface is an interface that contains no method declarations, but merely designates (or &qu ...

  10. 大写金额字符串生成 C#实现

    思路: 中文对金额的描述以四位为一组, 只考虑一万亿以内的数字则每组内以千.百.十和[亿\万\元]区分各位 连续的零按一个处理,组内最低位的零可略去 无角无分说整,有角无分只说角,无角有分说零X分,有 ...