jQuery实现炸裂轮播

最新推荐文章于 2024-07-08 11:32:20 发布

大兵的猫

最新推荐文章于 2024-07-08 11:32:20 发布

阅读量219

点赞数

分类专栏： JQuery 文章标签： jquery js css html

本文链接：https://blog.csdn.net/Error_ABC/article/details/108628363

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery实现炸裂轮播图

最终效果：
图片炸裂成碎片，同时更换图片
css代码：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 600px;
        height: 400px;
        border:1px solid #000000;
        background-color: darkslategrey;
        position: relative;
        margin:100px auto;
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
    }
    .child{
        width: 60px;
        height: 40px;
        box-sizing: border-box;
        text-align: center;
        position: relative;
        line-height: 40px;
        background-image: url(./images/01.jpg);
        background-size: 600px 400px;
        transition: 0.5s;
        
    }
</style>

HTML+JS代码：

<body>
    <div class="box"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        var str=''
        var timerId=null
        var a=1;
        for(var i=0;i<=99;i++){
        str+='<div class="child">'+i+'</div>'    
        $('.box').html(str)                       //循环添加子节点
        }
        init()                                        //调用初始化函数
        function init(){                         //初始化函数，确定初始样式
            for(var i=0;i<100;i++){
                var x=-($('.child').eq(i).offset().left-$('.box').offset().left-1)+'px'
                var y=-($('.child').eq(i).offset().top-$('.box').offset().top-1)+'px'   //找到每一个子元素的位置
               console.log(x,y)
          $('.child').eq(i).css('background-position',x+' '+y)   //将背景图片的相对位置设置到子元素（每一个child取图片的不同位置，以此拼成大的图片）
        }
        }

         function boom(){             //炸裂函数
             for(var i=0;i<100;i++){
                var num  =parseInt(Math.random()*100)        
                var numx1=parseInt(Math.random()*100)
                var numy1=parseInt(Math.random()*100)
                var numx=parseInt(Math.random()*180)           //获取随机数
                var numx=numx1-num                                     //实现正负随机数
                var numy=numy1-num 
                $('.child').eq(i).css('marginLeft',numx+'px')         //随机改变图片的位置
                $('.child').eq(i).css('marginTop',numy+'px')
                $('.child').eq(i).css('transform','rotateX('+numx+'deg)')
                $('.child').eq(i).css('opacity','0.5')
             }
         }

        function guiwei(a){          //还原函数
                $('.child').css('marginLeft','')           //将原来的属性清空，就会还原初始状态
                $('.child').css('marginTop','')
                $('.child').css('opacity','1')
                $('.child').css('transform','')
                $('.child').css('background-image','url(./images/0'+a+'.jpg)')  //同时改变图片路径
        }

         timerId=setInterval(function(){       //定时器
            boom()
            setTimeout(function(){
                a++
                if(a>4){
                    a=1
                }
                guiwei(a)
               
            },1000)
         },2000)
    </script>
</body>

效果图：
炸裂轮播效果图

大兵的猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery实现炸裂轮播

jQuery实现炸裂轮播图最终效果：图片炸裂成碎片，同时更换图片css代码：<style> *{ margin: 0; padding: 0; } .box{ width: 600px; height: 400px; border:1px solid #000000; background-color: darkslategrey; position:
复制链接

扫一扫