思路：给一个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. Bonobo Git Server (Simple git server for Windows.) 测试备忘

    Bonobo Git Server是一款Windows上的Git Server,它使用IIS即可,走的是Http协议,只要简单的安装就能使用,但是因为我的项目大小有1.35GB在 push 的时候一直 ...

  2. iOS-代理反向传值<转>

    在上篇博客 iOS代理协议 中,侧重解析了委托代理协议的概念等,本文将侧重于它们在开发中的应用. 假如我们有一个需求如下:界面A上面有一个button.一个label.从界面A跳转到界面B,在界面B的 ...

  3. centos 安装完Nginx后，为什么访问不了？

    很多时候,安装完成后,服务也启动了 但是访问不了 看看是不是防火墙开启了: 本地试下端口是否可访问telnet 192.168.4.155 80 CentOS 7默认使用的是firewall作为防火墙 ...

  4. Effective Java 52 Refer to objects by their interfaces

    Principle If appropriate interface types exist, then parameters, return values, variables, and field ...

  5. Effective Java 76 Write readObject methods defensively

    Principle readObject method is effectively another public constructor, and it demands all of the sam ...

  6. wait方法和sleep方法的区别

    一.概念.原理.区别 Java中的多线程是一种抢占式的机制而不是分时机制.线程主要有以下几种状态:可运行,运行,阻塞,死亡.抢占式机制指的是有多个线程处于可运行状态,但是只有一个线程在运行.      ...

  7. jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验

    一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...

  8. IP工具类-自己动手做个ip解析器

    IP工具类-自己动手做个ip解析器 一.资料准备 导入依赖包:

  9. mysql管理（一）

    创建数据库,并指定默认字符集和排序规则:help create database;create {database|schema} [if not exists] db_name [character ...

  10. ubuntu + hadoop2.5.2分布式环境配置

    ubuntu + hadoop2.5.2分布式环境配置 我之前有详细写过hadoop-0.20.203.0rc1版本的环境搭建 hadoop学习笔记——环境搭建 http://www.cnblogs. ...