前端html爱心源码0_前端爱心代码,html爱心代码资源-CSDN下载

共3个文件

png：1个

html：1个

css：1个

html

javascript

开发语言

需积分: 1 193 浏览量 2022-04-02 11:46:47 上传评论 4 收藏 117KB ZIP 举报

资源详情

资源评论

资源推荐

收起资源包目录

love-herat.zip （3个子文件）

love-herat

img

img.png 118KB

loveHeart.html 3KB

style.css 2KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>照片墙</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="container" id="container"></div> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(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' + '.png' + '" 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++ } } 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(); }) </script> </body> </html>