脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery炸裂轮播

jQuery实现炸裂轮播效果

 更新时间：2022年05月06日 10:47:25   作者：大兵的猫  
这篇文章主要为大家详细介绍了jQuery实现炸裂轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论