愛心點選特效

2021-10-05 21:30:36 字數 1020 閱讀 1783

這次練習的案例是點選時有愛心跑出來的效果,發表此文章用來記錄練習的心得與筆記!

實際演示請到 demo 裡觀看!!

首先先貼上這次作品的原作者

首先 第乙個學到的知識點是 :匿名函式

(

function

(w,d)

)(window,document)

; 等同於

function

funca

(arg)

funca

(window,document)

;

因為點選效果跟整個頁面的window和document息息相關,所以使用匿名函式變得更簡潔

整個案例想的最久的其實是能不能不用陣列裡儲存物件的方法來控制元素呢?後來字我總結了下這個用法,因為常常不知道何時以及為何要這樣用。

陣列鑲嵌著物件就像乙個div包裹另乙個dㄛv這樣的方式。效果中,愛心是隨著點選而產生不止乙個的,這麼多個愛心不可能另開個空間乙個乙個此時,』』 陣列 『』 就能個很好的對每個愛心做新增或刪減等動作,而 " 物件 ",可以儲存多個數值就和適合用來控制愛心在dom方面的問題!!

function

addlike

(e);

看到這段使用了兩個函式當時非常疑惑的是,除了跟程式碼簡潔有關係外,有其他理由需要特別把在另外個函式裡呼叫另外個函式嗎?答案是肯定的!!

w.

requestanimationframe

(movelike)

;

原因是上面這行程式碼。它是讓愛心動起來的關鍵,我們在movelike裡賦予愛心元素的top,left…移動起來的屬性(利用遞增或遞減),並且再次把這些賦值給div元素。而這樣的過程藉由requestanimationframe(),以每秒60幀重新整理,每次重新整理就呼叫一次movelike

這樣就可以讓愛心動起來,但是如果是讓兩個函式放在一起雖然每個元素雖然移動了,但是每次也新增乙個愛心,並不是我們要讓 『『乙個愛心』』 移動那樣的效果!!

1 文字點選特效

第乙個就是案例,加油 不提lang en charset utf 8 name viewport content width device width,initial scale 1.0 w.htmltitle canvas style head canvas src w.js script bod...

html點選圓形擴散顯示介面特效

不想聽逼逼的直接去原始碼 css的樣式 overflow hidden 隱藏超出部分 position fixed 用於懸浮 jquery的動畫 id animate 先建立乙個圓形div和乙個按鈕 點我擴散 side circle然後試著對齊進行animate放大動畫,效果是點選按鈕,圓圈逐漸放大...

部落格園之滑鼠點選特效

滑鼠點選效果為下圖 1.新增特效 點選 管理 設定 下拉找到 首頁html 將下面的 新增到框中 儲存 儲存按鈕在頁面左下角 2.修改引數 a.修改顯示符號 可以將中的改為自己喜歡的符號。其中例項的表情符號可以通過 點選搜狗輸入法 右鍵 表情 符號 顏文字,來選擇。若直接輸入不了,可以先將符號輸入到...