jQuery和CSS3照片排列成爱心墙动画特效-插件特效-星河码客

jQuery心形图片签到墙代码是一款基于jQuery+CSS3随机分布照片最后排布成爱心动画特效。核心Js代码$(function () { var count = 0; var selectFlag = false; var startFlag = false; var roundBox; $("#container").css("width", window.innerHeight * 4 / 3) var appendPic = function (item) { if (selectFlag) { return } var x = Math.random() * 4, y = Math.random() * 4 if (!heartFunc(x, y)) { appendPic(item) } else { var back = "jpg"; var imgNum = 10; if (item % imgNum == 1) { back = "gif" } if (item % imgNum == 2 || item % imgNum == 3 || item % imgNum == 4) { back = "png" } var html = '' $("#container").append(html) setTimeout(function () { $("#pic-" + item).css("top", 45 + 25 * (2 - y) * 0.85 + "%").css("left", 50 + 25 * (2 - x) * 0.85 + "%") .css("transform", "rotate("+(25 * (0.5 - Math.random())) + "deg) translate(-50%,-50%)") .css("width", "100px").css("height", "100px") }, 500); } } var init = function () { for (var i = 1; i < 100; i++) { appendPic(i) count++ } // setTimeout(function () { // if(selectFlag){ // return // } // appendPic(count) // count++; // init() // }, 1000); } var selectFunc = function () { $(".surprise").removeClass("surprise").css("transform", "rotate("+(25 * (0.5 - Math.random())) + "deg) ") $("#pic-" + Math.floor(Math.random() * count)).addClass("surprise") $(".start").removeClass("start") } var comfirmFunc = function () { startFunc(); } var startFunc = function () { $(".surprise").removeClass("surprise") roundBox= window.setInterval(function(){ $(".start").removeClass("start") for (var i = 1; i < count; i++) { if(i%20==Math.floor(Math.random() * 20)){ $("#pic-" + i).addClass("start") } } },200) } var enterNum=0 $(document).keydown(function (e) { selectFlag = true; if (!e) var e = window.event; if (e.keyCode == 32) { //选 if(enterNum%2==0){ startFunc(); }else{ startFlag=true window.clearInterval(roundBox) $(".start").removeClass("start") selectFunc(); } enterNum++ // startFunc(); } if (e.keyCode == 13) { //存 comfirmFunc(); } }); var heartFunc = function (x, y) { // console.log(x,y) if (x >= 0 && x < 1) { if (y < (x + 3) && y > (-x + 2)) { return true } } else if (x >= 1 && x < 2) { if (y < (-x + 5) && y > (-x + 2)) { return true } } else if (x >= 2 && x < 3) { if (y < (x + 1) && y > (x - 2)) { return true } } else if (x >= 3 && x < 4) { if (y < (-x + 7) && y > (x - 2)) { return true } } return false } init(); })