css3爆炸效果更换图片轮播图

最新推荐文章于 2021-08-10 10:32:57 发布

weixin_30764137

最新推荐文章于 2021-08-10 10:32:57 发布

阅读量37

点赞数

原文链接：http://www.cnblogs.com/jasonwang2y60/p/6041259.html

版权

思路：给一个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.οnlοad=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.οnclick=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>

转载于:https://www.cnblogs.com/jasonwang2y60/p/6041259.html

weixin_30764137

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3爆炸效果更换图片轮播图

思路：给一个div设置一个背景图片1.jpg，然后在这个div上面用两个for循环动态的创建一个列数为C行数为R数量的span，并给这些span设置宽高、定位并设置背景图片0.jpg，然后设置每个span的background-position，使这组span平铺在div上。当点击div时换图，换图的实现方法是循环每个span，以div的宽度的中线为定位线，让这组span随机进行tran...
复制链接

扫一扫