時間：2023-07-26 09:42:01 | 來源：網(wǎng)站運營
時間：2023-07-26 09:42:01 來源：網(wǎng)站運營
HTML+CSS+JS制作愛心表白代碼 520情人節(jié)源碼HTML 七夕情人節(jié)表白代碼制作 生日祝福代碼：
在線咨詢
一年一度的/520情人節(jié)/七夕情人節(jié)/生日禮物/告白師妹/圣誕節(jié)/元旦節(jié)跨年/程序員表白,<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><link href="favicon.ico" rel="shortcut icon" class="icon-love" type="images/x-ico"><link rel="stylesheet" href="css/love.css"></head><body><div class="container" onselectstart="return false;" unselectable="on" style="-moz-user-select:none;"> <div class="body_left"> <img src="images/biubiubiu.gif" alt="" ondragstart='return false;'> </div> <div class="body_center love"> <div class="block"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> </div> </div></div><div class="footer"> <div class="border"> <div class="border-top"></div> <div class="border-bottom"></div> </div></div><script type="text/javascript" src="js/love.js"></script> ... 可關(guān)注下方↓ 公眾號獲取源碼</body></html>let blocks = document.getElementsByClassName("block"), block = blocks[0], love = document.getElementsByClassName("love")[0], timer = null, index = 0, //記錄拼接愛心的動畫步驟 clone_block; //用于克隆方塊function Next() { if (++index >= 24) { clearInterval(timer); Rise(); // alert("已經(jīng)是最后一個了！"); return; } block.style.visibility = "visible"; //升空動畫前允許可見 //2.移動方塊到指定的位置-即是移動【自身中心】到目標(biāo)位置 block.style.left = block_left + 40 * offset_pitn["block" + index][0] + "px"; block.style.top = block_top - 40 * offset_pitn["block" + index][1] + "px"; for (let i = 0; i < block.children.length; i++) { // block.children[1].innerText = index; //編號便于調(diào)試 block.children[i].style.left = blk_pitn["block" + index][i][0] * -40 + "px"; /* -40 是因為邏輯坐標(biāo)和瀏覽器的x，y軸方向不一樣*/ block.children[i].style.top = blk_pitn["block" + index][i][1] * -40 + "px"; } //3.克隆方塊—保存現(xiàn)在的位置 /* 一共會克隆23個方塊，加上原先的一個方塊block，共24個方塊，即多出原先的block方塊*/ clone_block = block.cloneNode(true); love.appendChild(clone_block); if (love.children.length >= 24) { blocks[blocks.length - 1].children[2].style.display = "none"; //去掉多余的小方塊 block.style.display = "none"; //隱藏多出的block方塊 }}function Rise() { //4.愛心升高，多出的那個小方塊開始掉落 console.log("開始升空"); let timer2 = null, distance = 0; /* 升高時，移動的距離*/ const target = 120, /* 目標(biāo)距離*/ speed = 1; /*移動速度*/ let love_top = parseFloat(window.getComputedStyle(love, null).top.slice(0, -2)); //愛心盒子距離屏幕頂部的距離 timer2 = setInterval(() => { distance += speed; // console.log(distance); if (distance >= target) { clearInterval(timer2); console.log("升空完畢"); } love.style.top = (love_top - distance) + "px"; }, 22);}window.onload = function () { setTimeout(() => { timer = setInterval(() => { Next(); }, 300); }, 12000); //gif圖播放完畢所需時間為11.73s};關(guān)鍵詞：表白,七夕,祝福,生日
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
