jQuery和CSS3照片排列成爱心墙动画特效5349
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 = '<img src="img/img' + item % imgNum + '.' + back + '" class="picBase" id="pic-' + item + '"  />'
				$("#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();
	})
      立即下载 ( 文件大小:0.26 M)

    浏览器兼容性

    1. IE 8
    2. IE 9
    3. Mozilla Firefox
    4. Google Chrome
    5. Oper
    6. Safari

    技术讨论区

    1. 请先登录

        发 布

    键盘快捷键: 上一个 下一个