思路：给一个div设置一个背景图片1.jpg，然后在这个div上面用两个for循环动态的创建一个列数为C行数为R数量的span，并给这些span设置宽高、定位并设置背景图片0.jpg，然后设置每个span的background-position，使这组span平铺在div上。当点击div时换图，换图的实现方法是循环每个span，以div的宽度的中线为定位线，让这组span随机进行transform，然后在结束的时候让span的透明度变为透明，并且瞬间拉回全部span到原始位置并更换span和div的背景图片为下一组的图片（注意div的背景图片永远是span的背景图片的下一张）；可以将此效果自动进行图片的更换，变成选项卡

转载请注明‘转载于Jason齐齐的博客http://www.cnblogs.com/jasonwang2y60/’

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>爆炸效果换图</title>

    <link rel="stylesheet" href="stylesheets/base.css">

    <style>

        body{

            background:#000;

        }

        body,html{

            width: 100%;

            height: 100%;

            overflow:hidden;

        }

        #box{

            width:900px;

            height:500px;

            background:url(images/img_tabs/1.jpg) no-repeat;

            background-size:cover;

            margin:100px auto;

            position:relative;

        }

        #box span{

            width: 100%;

            height: 100%;

            position:absolute;

            top: 0;

            left: 0;

            background:url(images/img_tabs/0.jpg);

            transform:rotateY(0deg);

        }

    </style>

    <script>

        function rnd(m,n){

            return parseInt(Math.random()*(n-m)+m);

        }

        window.onload=function(){

            var oBox=document.getElementById('box');

            var C=7;

            var R=8;

            for(var i=0;i<R;i++){

                for(var j=0;j<C;j++){

                    var oSpan=document.createElement('span');

                    oSpan.style.width=oBox.offsetWidth/R+'px';

                    oSpan.style.height=oBox.offsetHeight/C+'px';

                    oSpan.style.left=i*oBox.offsetWidth/R+'px';

                    oSpan.style.top=j*oBox.offsetHeight/C+'px';

                    oBox.appendChild(oSpan);

                    oSpan.style.backgroundPosition=-oSpan.offsetLeft+'px -'+oSpan.offsetTop+'px';

                }

            }

            var bReady=false;

            var iNow=0;

            oBox.onclick=function(){

                if(bReady){return;}

                bReady=true;

                iNow++;

                var aSpan=oBox.children;

                for(var i=0;i<aSpan.length;i++){

                    aSpan[i].style.transition='.4s all ease';

                    var x=aSpan[i].offsetWidth/2+aSpan[i].offsetLeft-oBox.offsetWidth/2;

                    var y=aSpan[i].offsetHeight/2+aSpan[i].offsetTop-oBox.offsetHeight/2;

                    aSpan[i].style.transform='perspective(800px) translateX('+x+'px) translateY('+y+'px) rotateX('+rnd(-180,180)+'deg) rotate('+rnd(-180,180)+'deg) scale(1.4)';

                    aSpan[i].style.opacity='0';

                }

                aSpan[0].addEventListener('transitionend',function(){

                    bReady=false;

                    for(var i=0;i<aSpan.length;i++){

                        aSpan[i].style.transition='none';

                        aSpan[i].style.transform='perspective(800px) translateX(0) translateY(0) rotateX(0) rotateY(0) scale(1)';

                        aSpan[i].style.opacity=1;

                        aSpan[i].style.backgroundImage='url(images/img_tabs/'+iNow%3+'.jpg)';

                        oBox.style.backgroundImage='url(images/img_tabs/'+(iNow+1)%3+'.jpg)';

                    }

                },false);

            };

        };

    </script>

</head>

<body>

    <div id="box">

    </div>

</body>

</html>

　　

css3爆炸效果更换图片轮播图的更多相关文章

  1. 图片轮播图插件的使用 unslider！！！

    1.百度图片轮播图unslider,第一个就会出现jquery unslider轮播图,点击进去,下载网站提供的文件,解压,内部有我们需要使用的各种js,图片等. 2.在自己的eclipse或者int ...

  2. iOS 图片轮播图（自动滚动）

    iOS 图片轮播图(自动滚动) #import "DDViewController.h" #define DDImageCount 5 @interface DDViewContr ...

  3. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  4. CSS3——animation的基础（轮播图）

    作为前端刚入门的小菜鸟,只想记录一下每天的小收获 对于animation动画 1.实现动画效果的组成: (1)通过类似Flash的关键帧来声明一个动画 (2)在animation属性中调用关键帧声明的 ...

  5. BannerDemo【图片轮播图控件】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 这里简单记录下一个开源库youth5201314/banner的运用.具体用法请阅读<youth5201314/banner& ...

  6. css3 - 纯css实现一个轮播图

    这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...

  7. CSS3之动画模块实现轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 3d效果的图片轮播

    CSS3的3d变换 CSS3给我们提供了一个新的功能,那就是3d变换.3d变换和2d变换的基本API函数类似,只不过多了些在Z轴上的操作,不难使用. 但是,为了让元素拥有3d变换的功能,我们需要给他的 ...

  9. android 使用图片轮播图---banner 使用

    转自:https://github.com/youth5201314/banner 使用步骤 Step 1.依赖banner Gradle dependencies{ compile 'com.you ...

随机推荐

  1. RHEL7文件归档与压缩

    本文介绍RHEL7.2文件的归档和压缩 文件归档 归档的好处:方便使用.查询.阅读,易于管理 (批量删除文件) 常用操作 命令:tar 作用:将许多文件一起保存至一个单独的磁带或磁盘归档,并能从归档中 ...

  2. yii url美化 urlManager组件

    yii的官方文档对此的解释如下: urlSuffix  此规则使用的url后缀,默认使用CurlManger::urlSuffix,值为null.例如可以将此设置为.html,让url看起来“像”是一 ...

  3. IOS中把字符串加密/IOS中怎么样MD5加密/IOS中NSString分类的实现

    看完过后,你会学到: 1学习IOS开发中的分类实现, 2以及类方法的书写, 3以及字符串的MD5加密/解密. ---------------------------wolfhous---------- ...

  4. C++中static类成员

    static局部变量 static局部变量确保不迟于在程序执行流程第一次经过该对象的定义语句时进行初始化 这种对象一旦被创建,在程序结束前不会被撤销.在该函数被多次调用的过程中,静态局部对象会持续存在 ...

  5. iOS多线程技术

    iOS多线程技术主要分配NSThread.NSOperation和GCD.下边来简单的介绍一下吧. 随性一点,就不按照顺序来了.所以先介绍一下NSOperation. ---------------- ...

  6. 多线程之NSOperation和NSOperationQueue

    这篇文章里我将不过多的谈及理论知识,这些东西会的自然会,不会的,看多了也是云里雾里.下面我讲更多的用代码+注释的方式来讲如何使用NSOperation和NSOperationQueue. 1.NSOp ...

  7. INFORMATICA 的调优之一 源数据的优化

    5W1H法来实现源数据的优化 做数据仓库项目的朋友都能感到数据质量和数据抽取展现的性能是整个数据仓库项目的重点.下面谈谈我在DW项目中处理源数据质量问题的5W1H方法. 5W : WHO ,WHAT, ...

  8. 第1章　Java中常用字符串方法总结

    1.1 charAt方法——提取指定字符 1.2 codePointAt方法——提取索引字符代码点 1.3 codePointBefore方法——获取索引前一个字符的代码点 1.4 codePoint ...

  9. MFC 窗口分割

    动态分割窗口: BOOL CMainFrame::OnCreateClient(LPCREATESTRUCT lpcs, CCreateContext* pContext) { , , CSize(, ...

  10. 令人哭笑不得的org.hibernate.MappingException: Unknown entity

    今天处理的任务是从一套系统中分离出微信易信功能代码添加到另一套系统中..本来是一个很简单的任务,但是分离移植过去后,一运行报了个错: nested exception is org.hibernate ...