首页 > 代码库 > css3爆炸效果更换图片轮播图
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="http://www.mamicode.com/stylesheets/base.css"> <style> body{ background:#000; } body,html{ width: 100%; height: 100%; overflow:hidden; } #box{ width:900px; height:500px; background:url(images/img_tabs/1.jpg) no-repeat; background-size:cover; margin:100px auto; position:relative; } #box span{ width: 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>
css3爆炸效果更换图片轮播图
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。