前不久看见了一款JavaScript特效，觉得很有意思，就自己模仿了个粗略版，做成了JQuery插件，需要引入JQuery
原地址传送门
1 (function(win, undefined){ 2 var rows = 0; 3 var cols = 0; 4 $.fn.boomPic = function() { 5 $(this).click(function(event){ 6 var img = $(this)[0]; 7 BoomPic(img) 8 }); 9 } 10 11 function BoomPic(img) { 12 var container = document.getElementsByTagName("body")[0]; 13 var w = img.width; 14 var h = img.height; 15 var offsetLeft = elementLeft(img); 16 var offsetTop = elementTop(img); 17 img.style.visibility = "hidden"; 18 var divWidth = 0; 19 var divHeight = 0; 20 var max = gcd(w, h); 21 var num = w/max; 22 if(w == h) { 23 rows = cols = divWidth = divHeight = w / 10; 24 } else if( num < 10) { 25 divWidth = divHeight = max / 2; 26 rows = num * 2; 27 cols = h / max * 2 28 } else if(num > 100){ 29 divWidth = divHeight = max * 20; 30 rows = num / 20; 31 cols = h / max / 20; 32 } else { 33 divWidth = divHeight = max; 34 rows = num; 35 cols = h / max; 36 } 37 for (var i = 1; i <= rows; i++) { 38 for(var j = 1; j <= cols; j++) { 39 // var scaleImg = parseFloat(Math.random() * 5); 40 var divTemp = document.createElement("div"); 41 var imgOffsetX = divWidth - i * divWidth; 42 var imgOffsetY = divHeight - j * divHeight; 43 divTemp.className = "imgboom"; 44 divTemp.style.display = "inline-block"; 45 divTemp.style.position = "fixed"; 46 divTemp.style["border-radius"] = "50%"; 47 divTemp.style.width = divWidth + "px"; 48 divTemp.style.height = divHeight + "px"; 49 divTemp.style.background = imgOffsetX + "px " + imgOffsetY + "px url(" + img.src + ") no-repeat"; 50 divTemp.style.left = offsetLeft - imgOffsetX + "px"; 51 divTemp.style.top = offsetTop - imgOffsetY + "px"; 52 divTemp.style["background-size"] = w + "px " + h + "px"; 53 // divTemp.style["transform"] = "scale(" + scaleImg + ")"; 54 container.appendChild(divTemp); 55 } 56 } 57 Boom(); 58 } 59 60 function Boom() { 61 var divs = $(".imgboom"); 62 for(var i = 0; i < divs.length; i++) { 63 var time = parseInt(Math.random() * 3 + 2); 64 var speed = parseFloat(Math.random()* 3000 + 2000); 65 var leftLength = parseFloat(Math.random() * 500); 66 var topLength = parseFloat(Math.random() * 500); 67 var that = $(divs[i]); 68 var left = parseFloat(that.css("left")); 69 var top = parseFloat(that .css("top")); 70 that.css("transition-duration", time + "s"); 71 that.css("left", left + leftLength + "px"); 72 that.css("top", top - topLength + "px"); 73 that.css("opacity", "0"); 74 } 75 } 76 77 /** 78 * 求最大公约数 79 */ 80 function gcd(a,b){ 81 if(b == 0){ 82 return a; 83 } 84 var r = a % b; 85 return gcd(b, r); 86 } 87 88 function elementLeft(e){ 89 var offset = e.offsetLeft; 90 if(e.offsetParent != null) { 91 offset += elementLeft(e.offsetParent) 92 } 93 return offset; 94 } 95 96 function elementTop(e){ 97 var offset=e.offsetTop; 98 if(e.offsetParent != null) { 99 offset += elementTop(e.offsetParent) 100 } 101 return offset; 102 } 103 })(window);