JavaScript 30 Day -- 15 文字阴影

实现效果：

文字阴影的鼠标随动效果

关键点：

1.在script标签中，我们使用3个变量，一个指向div元素，一个指向其子元素h1，最后一个变量factor用于标记阴影距离h1中心的距离和鼠标距离h1中心距离的比例，用于计算阴影的具体位置。

2.在hero元素上监听鼠标移动事件mousemove，并添加事件处理的回调函数shadowMove.

hero.addEventListener('mousemove',shadowMove);

3.为获得第一个阴影的瞬时位置，需要通过鼠标位置距离h1中心的距离乘以factor系数来获得，pos表示鼠标当前位置的坐标,range指代hero元素的宽和高：

var disX = parseInt((pos.x-range.x/2)*factor);
var disY = parseInt((pos.y-range.y/2)*factor);

4.从事件发生的event对象中获取需要的值：

var range = {
x:hero.offsetWidth,
y:hero.offsetHeight
}
var pos = {
x:e.target.offsetLeft+e.offsetX,
y:e.target.offsetTop+e.offsetY
}

5.计算出h1元素第一个阴影位置后，可以以坐标镜像或旋转90°等不同的方式来生成其他阴影，本例中我们采用绕h1元素中心旋转90°的方式共生成4个阴影：

text.style.textShadow = `
${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
`;

javascript

const hero = document.querySelector('.hero');
const text = hero.querySelector('h1');
const walk = 400;

function shadow(e){
// console.log(e);
// const width = hero.offsetWidth;
// const height = hero.offsetHeight;
const { offsetWidth:width,offsetHeight:height } = hero;
// console.log(hero);

let { offsetX:x,offsetY:y } = e;
// console.log(e);
if(this !== e.target){
// console.log(e);
x = x + e.target.offsetLeft;
y = y + e.target.offsetTop;
}
// console.log(x,y);
const xWalk = Math.round(( x / width * walk) - ( walk / 2));
const yWalk = Math.round(( y / height * walk) - ( walk / 2));
// console.log(xWalk,yWalk);
text.style.textShadow = `
${xWalk}px ${yWalk}px 0px rgba(255,0,255,0.6),
${xWalk * - 1}px ${yWalk}px 0px rgba(0,0,255,0.6),
${yWalk}px ${xWalk * - 1}px 0px rgba(0,0,0,0.6),
${yWalk * - 1}px ${xWalk}px 0px rgba(255,0,0,0.6)
`
}
hero.addEventListener('mousemove',shadow);

var hero = document.querySelector('.hero');
var text = hero.querySelector('h1');
var factor = 0.4;//当鼠标移动至显示区域边界时，阴影距离占hero元素宽和高的比例
//在div范围内监听
hero.addEventListener('mousemove',shadowMove);
//文字阴影效果及移动函数
function shadowMove(e){
var range = {
x:hero.offsetWidth,
y:hero.offsetHeight
}
var pos = {
x:e.target.offsetLeft+e.offsetX,
y:e.target.offsetTop+e.offsetY
}//计算阴影移动距离
var disX = parseInt((pos.x-range.x/2)*factor);
var disY = parseInt((pos.y-range.y/2)*factor);//修改阴影样式
text.style.textShadow = disX+'px '+disY+'px 0 #3498db,'+(-disX)+'px '+disY+'px 0 #1abc9c,'+disY+'px '+(-disX)+'px 0 #9b59b6,'+(-disY)+'px '+(-disX)+'px 0 #e74c3c';
}