思路：给一个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. JavaScript基础11——js的全局函数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Vue方法与事件

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson10 一 vue方法实现 <!DOCTYPE html> ...

  3. ALV用例大全

    一.ALV介绍  The ALV Grid Control (ALV = SAP List Viewer)是一个显示列表的灵活的工具,它提供了基本功能的列表操作,也可以通过自定义来进行增强,因此可以允 ...

  4. SAP Basis常用事务代码

    事务码 描述(中英文)     SBIT Menu 菜单     SBTA Test background processing 后台处理测试     SBTU Background processi ...

  5. [转]一些NSArray,NSDictionary,NSSet相关的算法知识

    iOS编程当中的几个集合类:NSArray,NSDictionary,NSSet以及对应的Mutable版本,应该所有人都用过.只是简单使用的话,相信没人会用错,但要做到高效(时间复杂度)精确(业务准 ...

  6. 通过StoryBoard加载视图控制器问题

    如果通过拉线的方式拉进来一个UIViewController,再将它绑定一个UIViewController类.创建的时候通过alloc,init创建出来并不会创建出一个你拉进来的UIViewCont ...

  7. iOS之UI--CAGradientLayer

    1.CAGradientLayer 简介 如果说CAShapeLayer是用于提供设置形状的,那么CAGradientLayer是用于提供设置颜色的 英语单词:Gradient:梯度,渐变 那么Gra ...

  8. Linux文件I/O学习

    Linux内核的VFS子系统: 文件描述符     对于内核而言,所有打开的文件都通过文件描述符引用.文件描述符是一个非负整数.当打开一个现有文件或创建一个新文件时,内核向进程返回一个文件描述符.当读 ...

  9. 《ASP.NET MVC 5 框架揭秘》

    <ASP.NET MVC 5 框架揭秘> 基本信息 作者: 蒋金楠 出版社:电子工业出版社 ISBN:9787121237812 上架时间:2014-8-1 出版日期:2014 年8月 开 ...

  10. 你所不知道的SQL Server数据库启动过程（用户数据库加载过程的疑难杂症）

    前言 本篇主要是上一篇文章的补充篇,上一篇我们介绍了SQL Server服务启动过程所遇到的一些问题和解决方法,可点击查看,我们此篇主要介绍的是SQL Server启动过程中关于用户数据库加载的流程, ...