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>效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这里给大家分享的效果是像百度的搜索框一样，当用户在文本框输入前几个字母或是汉字的时候,该控件就能从存放数据的文或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,提供方便，增加用户体验。2015-07-07
在jquery中我们要动态的修改css属性我们只要使用css()方法就可以实现了，下面我来给各位同学详细介绍介绍。2016-09-09
有段时间没写什么了, 打算把jquery中的比较常用的数组处理方法汇总一下2011-06-06
contains 选择器选取包含指定字符串的元素。该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。经常与其他元素/选择器一起使用，来选择指定的组中包含指定文本的元素2013-04-04
下面小编就为大家带来一篇浅谈jQuery 选择器和dom操作。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要探讨了关于jQuery判断元素是否存在的问题,需要的朋友可以参考下2014-07-07
本文通过实例代码给大家分享了jQuery plugin animsition用法，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-09-09
这款导航当浏览器滚动条位于顶部时，导航高度较高，当浏览器滚动向下滚动时，导航高度自动减低，并位于顶部2014-11-11
这篇文章主要介绍了jQuery中innerWidth()方法用法,实例分析了innerWidth()方法的功能、定义及获取第一个匹配元素内部区域宽度的使用技巧,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了jQuery+AJAX实现遮罩层登录验证界面，并分享了源码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-10-10
最新评论