简单图片爆炸效果

页面效果

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<style> 
    #box{
        width: 700px;
        height:400px;
        margin:50px auto;
        background: url(img/0.jpg) no-repeat;
        background-size:700px 400px;
        position: relative;
    }
    #box span{
        width:100px;
        height:100px;
        position: absolute;
        top:0;
        left:0;
        background: url(img/0.jpg) no-repeat;
        background-size:700px 400px;
        transition:1s all ease;
    }
</style>
<div id="box"></div>
<script>
   function rnd(m,n){
      return parseInt(Math.random()*(n-m))+m;
   }
   
   window.onload=function(){
      var oBox=document.getElementById('box');
      var R=7;
      var C=4;
        for (var c = 0; c < C; c++) {
          for (var r = 0; r < R; r++) {
            var oSpan=document.createElement('span');
            oSpan.style.left=r*100+'px';
            oSpan.style.top=c*100+'px';
            oSpan.style.backgroundPosition=-r*100+'px -'+c*100+'px'
            oBox.appendChild(oSpan);
          }
        }
      var aSpan=oBox.children;
      var inow=0;
      var ready=true;
        document.onclick=function(){
            if(!ready)return;
            ready=false;
            inow++;
            oBox.style.backgroundImage='url(img/'+inow%26+'.jpg)';
            for (var i = 0; i < aSpan.length; i++) {
                aSpan[i].style.transition='1s all ease';
                var x=aSpan[i].offsetLeft-oBox.offsetWidth/2+aSpan[i].offsetWidth/2;
                var y=aSpan[i].offsetTop-oBox.offsetHeight/2+aSpan[i].offsetHeight/2;
                aSpan[i].style.transform='perspective(800px) translate('+x+'px,'+y+'px) rotateX('+rnd(-180,180)+'deg) rotateY('+rnd(-180,180)+'deg) scale(1.5)';
                aSpan[i].style.opacity=0;
            }
        };
      aSpan[0].addEventListener('transitionend',function(){
	        ready=true;
	        for (var i = 0; i < aSpan.length; i++) {
		          aSpan[i].style.transition='none';
                aSpan[i].style.transform='perspective(800px) translate(0px,0px) rotateX(0deg) rotateY(0deg) scale(1)';
                aSpan[i].style.opacity=1;
                aSpan[i].style.backgroundImage='url(img/'+inow%26+'.jpg)';
	        }
      },false);
   };
</script>
【页面效果】, 简单图片爆炸效果