最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

第十六堂 – Mouse Move Shadow

XAMPP下载 admin 792浏览 0评论

今天的實作要做一個常見的特效,就是讓頁面上的文字陰影隨著滑鼠移動而跟著改變位置。而這次頁面上的文字是可編輯的,只要點選中間的文字即可進入編輯狀態,實作範例如下:

QQ截图20181105162839

 邏輯流程
取得容器div以及文字h1等元素
監聽mousemove事件
抓取容器的寬高以及滑鼠的XY坐標
換算陰影的XY方向位移
對文字元素設定陰影位置以及顏色
課程重點
contenteditable:讓element中的文字可以被編輯
destructured assignment:前面課程有用過的解構賦值,是ES6的一種快速給定變數值的方法。而這次的用法比上堂課又再進階一些
const hero = document.querySelector(‘.hero’);
function shadow(e) {
const { offsetWidth: width, offsetHeight: height } = hero;
let { offsetX: x, offsetY: y } = e;


}
上面的意思是將hero這個元素的屬性offsetWidth、offsetHeight指定給自訂的變數width和height。然後把mousemove事件e的屬性offsetX、offsetY指定給自訂變數x和y。
滑鼠在經過中間的h1元素時,mousemove event的offsetX、offsetY會以元素左上角為坐標原點,造成滑鼠位置坐標不連續,因此課程中加入一段Code來修正這個問題
if (this !== e.target) {
x = x + e.target.offsetLeft;
y = y + e.target.offsetTop;
}
this是hero.addEventListener(‘mousemove’, shadow)shadow()的this,所以永遠為hero。而e.target則根據滑鼠位置可能是hero或是h1元素。所以當this不等於e.target時,就代表滑鼠移動到別的元素中,需要修正坐標。

转载请注明:XAMPP中文组官网 » 第十六堂 – Mouse Move Shadow

您必须 登录 才能发表评论!