思路：给一个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. 【翻译】Netscaler真实表现性能调整

    源地址:https://msandbu.wordpress.com/2014/10/31/netscaler-and-real-performance-tuning/ 作者显然不是以英语为母语的,所以 ...

  2. jQuery owlcarousel 旋转木马

    owlcarousel是一款猫头鹰旋转木马插件.OwlCarousel优势兼容所有浏览器支持响应式支持 CSS3 过度支持触摸事件支持 JSON 及自定义 JSON 格式支持进度条支持自定义事件支持延 ...

  3. JavaScript中的null与nudefined

    null和undefined 概述 null与undefined都可以表示"没有",含义非常相似.将一个变量赋值为undefined或null,老实说,语法效果几乎没区别. var ...

  4. C# 点绕某点旋转某角度

    /// <summary> /// 以中心点旋转Angle角度 /// </summary> /// <param name="center"> ...

  5. Objective-C

    1.OC基础 第一个OC的类 Objective-C: 字符串NSString与NSMutableString iOS开发的入门总结的第一篇 iOS开发的入门总结的第二篇

  6. App开发流程之通用宏定义及头文件

    工欲善其事,必先利其器. 在正式实现各种炫酷的功能和UI前,做好准备工作是提高后续开发效率的必经之路. 所以,这个系列,我不是在各种堆技术,更关注的是“兵马动”之前的“粮草行”,有些繁琐,但当清晰理出 ...

  7. 【读书笔记】iOS-使用应用内支付注意事项

    一,iOS端开发. 如果购买成功,我们需要将凭证发送到服务器上进行验证.考虑到网络异常情况,iOS端的发送凭证操作应该可以持久化,如果程序退出,崩溃或网络异常,可以恢复重试. 二,服务器端开发. 服务 ...

  8. IOS 网络浅析－（五 xml解析）

    XML 可扩展标记语言 用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言 易读性高,编码手写难度小,数据量大 NSXMLPars ...

  9. C语言中的字符和字符串

    C语言在中常常出现字符和字符串,而一串字符或者字符串其实就是数组 字符数组的定义 char arr[]={'h','e','l','l','o','\0'}; 而定义字符串: char arr1[]= ...

  10. iOS开发网络篇—网络编程基础（二）

    下面叙述的是关于几个必须要知道的iOS网络编程入门级别的要点:       1.客户端如何找到连接的服务器    客户端通过URL找到想要连接的服务器   2.什么是URL     URL的全称是Un ...