案例介紹 歡迎來的我的小院，我是霍大俠，恭喜你今天又要進步一點點了！我們來用JavaScript編程實戰案例，做一個滑鼠愛心特效。滑鼠在頁面移動時會出現彩色愛心特效。通過實戰我們將學會createElement方法、appendChild方法、setTimeout方法。 案例演示 頁面出現後，滑鼠在 ...
案例介紹
歡迎來的我的小院，我是霍大俠，恭喜你今天又要進步一點點了！
我們來用JavaScript編程實戰案例，做一個滑鼠愛心特效。滑鼠在頁面移動時會出現彩色愛心特效。通過實戰我們將學會createElement方法、appendChild方法、setTimeout方法。
案例演示
案例設計
JavaScript實戰案例-滑鼠特效
我們來看此案例的思維導圖設計，包括需求描述，頁面設計和技術架構。
其中架構設計包含了HTML，CSS，JavaScript 共三部分代碼。
源碼學習
進入核心代碼學習，我們先來看CSS中的核心代碼。
@keyframes animate {
0% {
transform: translate(-50%, -50%);
opacity: 1;
filter: hue-rotate(0);
}
100% {
transform: translate(-50%, -5000%);
opacity: 0;
filter: hue-rotate(720deg);
}
}
然後我們來編寫核心的JavaScript代碼，通過offsetX和offsetY獲取滑鼠位置，在所獲得的位置上創建一個span元素，使用random函數生成大小不等的愛心，使用appendChild向body中添加新創建的span元素，使用setTimeout設置愛心顯示的間隔。
<script>
//有個小院-興趣編程
const bodyEI=document.querySelector("body");
bodyEI.addEventListener("mousemove",(event)=>{
const xPos=event.offsetX;
const yPos=event.offsetY;
const spanEI=document.createElement("span");
spanEI.style.left=xPos+"px";
spanEI.style.top=yPos+"px";
const size=Math.random()*100;
spanEI.style.width=size+"px";
spanEI.style.height=size+"px";
bodyEI.appendChild(spanEI);
setTimeout(()=>{
spanEI.remove();
},3000);
});
</script>
總結思考
學習點
1、createElement() 方法通過指定名稱創建一個元素。
2、appendChild() 方法可向節點的子節點列表的末尾添加新的子節點。
3、setTimeout() 方法用於在指定的毫秒數後調用函數或計算表達式。
問答
1、setTimeout() 方法指定的是秒數還是毫秒數？
2、createElement() 方法可以通過指定名稱來創建一個元素嗎？
關註我，跟著我每天學習一點點，讓你不在枯燥，不在孤單..
全網可搜：小院里的霍大俠， 免費獲取簡單易懂的實戰編程案例。編程/就業/副業/創業/資源。
私微信：huodaxia_xfeater
二維碼： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公眾號：有個小院（微信公眾號：yougexiaoyuan）
github：yougexiaoyuan (視頻源碼免費獲取)
（部分素材來源於互聯網，如有保護請聯繫作者）
