思路：给一个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. JSP利用freemarker生成基于word模板的word文档

    利用freemarker生成基于word模板的word文档 freemarker简介 FreeMarker是一个用Java语言编写的模板引擎,它基于模板来生成文本输出.FreeMarker与Web容器 ...

  2. C# 线程同步

    Mutex 类 使用Mutex类来同步两个单独的程序.Mutex是一种原始的同步方式,其只对一个线程授予对共享资源的独占访问. const string NutexName = "C&quo ...

  3. MySQL数据库中字符集的问题

    今天在做Hibernate案例,往mysql中写记录的时候,出现ERROR: Incorrect string value: '\xE5\x8A\xA0\xE5\x86\x85...' for col ...

  4. 第一个JSP程序

    本文介绍如何写出第一个JSP程序 1.配置服务器 (1)在eclipse中选择Server视图,(ps:很多童鞋说找不到Server,那是因为eclipse的版本问题,请下载JEE版本的eclipse ...

  5. iOS 开发技巧-制作环形进度条

    有几篇博客写到了怎么实现环形进度条,大多是使用Core Graph来实现,实现比较麻烦且效率略低,只是一个小小的进度条而已,我们当然是用最简单而且效率高的方式来实现. 先看一下这篇博客,博客地址:ht ...

  6. iOS 正则表达式判断邮箱、身份证..是否正确

    //邮箱 + (BOOL) validateEmail:(NSString *)email { NSString *emailRegex = @"[A-Z0-9a-z._%+-]+@[A-Z ...

  7. myeclipse10安装findbugs

    尝试过myeclipse10环境下,在线安装findbugs,插件包是能下载到指定目录下,可是由于版本问题,findbugs插件是不能使用的.所以才有了下面的离线安装 离线安装findbugs 操作系 ...

  8. javascript中的 类初始化，遍历for in 以及with的用法

    <script type="text/javascript"> function member(name,gender){ this.name=name; this.g ...

  9. java注解框架

    我们经常会在java代码里面看到:“@Override”,“@Target”等等样子的东西,这些是什么? 在java里面它们是“注解”. 下面是百度百科的解释:java.lang.annotation ...

  10. paas架构之docker——安装

    1. 概要 本文描述docker的安装 参考官方文档:https://docs.docker.com/engine/installation/linux/ubuntulinux/ 安装操作系统: Ub ...