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


    思路:给一个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{
                 100%;
                height: 100%;
                overflow:hidden;
            }
            #box{
                900px;
                height:500px;
                background:url(images/img_tabs/1.jpg) no-repeat;
                background-size:cover;
                margin:100px auto;
                position:relative;
            }
            #box span{
                 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>
    

      

  • 相关阅读:
    使用Word发布文章到 WordPress 博客
    Wordpress上传到阿里云服务器
    IntelliJ设置鼠标悬浮提示和修改快捷键
    梅塔幻灯片如何设置图片高度不被裁减
    更改XAMPP中MySQL数据库的端口号
    PHP开启cURL功能
    Android Studio使用百度地图示例BaiduMapsApiASDemo
    CocosCreator反射在Android中的使用
    Android Studio新建一个HelloWorld 程序(App)
    无法中止进程无法访问操作拒绝访问
  • 原文地址:https://www.cnblogs.com/jasonwang2y60/p/6041259.html
Copyright © 2020-2023  润新知