jQuery实现炸裂轮播
程序员文章站
2024-02-26 18:44:52
...
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>
效果图：
上一篇： Android仿微信拍摄短视频