这篇文章上次修改于 1116 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

前导

觉得挺好玩的,打算自己实现这个功能(当然是"借鉴"别人的了,怎么可能自己写)

相关链接:给首页加上图片随鼠标移动的“视差”效果

虽然效果差不多,但我一行代码都没抄

这是我的效果,也就是目前的首页:酢豚的个~人~博~客~!

现在开工(18:31)

思路

我看到的是通过监听鼠标来修改backgroundPosition属性实现的,但我觉得这里可以用一下之前学的mxtrix属性,嗯....就是看起来更高大上,好像并没有什么区别.说干就干!

首先需要确定div模块的偏移范围是多少,我拿太极图做个测试,姑且设成±1/8的直径吧.然后拿鼠标和浏览器中心点的距离乘最大偏移来实现效果.

然后把首页图给copy一下,直接上手.

开始

这是我一开始写的方案,其中xy为当前浏览器的长宽,e.pageXY为鼠标在页面内的坐标,offset是鼠标当前位置相对于屏幕正中间(太极圆心)的偏移量的平方,screenstring是浏览器的弦长平方,单位均为px

let x = document.documentElement.clientWidth;
let y = document.documentElement.clientHeight;
// 设置XY轴坐标和中心点

let myorigin = {
'x': e.pageX,
'y': e.pageY,
'origin': [e.pageX, e.pageY]
};
// 距离为:xy/2的原点到origin[xy]的距离,再拿这个距离除以xy的弦,乘1R/8,然后直接利用下面的矩阵即可

let offsetx = Math.abs(e.pageX - x / 2);
let offsety = Math.abs(e.pageY - y / 2);
let offset = Math.pow(offsetx, 2) + Math.pow(offsety, 2);
let screenstring = x * x + y * y;

写完马上发现了问题,出在了平方上,如果拿平方去进行操作,因为平方的特性首先偏移量会特别奇怪,其次,XY轴偏移量是一样的.所以得分开写,让XY轴的偏移分别为XY轴的鼠标相对于原点的坐标

问题

1.首先是...嗯....就是那个.....由于不可抗力因素,动画变得异常卡顿(明明我还什么都没干啊喂)

一看任务管理器,果然是这样.只能杀点进程再开始了.

2.挺尴尬的,还是计算失误了,以至于出现下面这种情况(很明显,以px为单位的div已经远远超出了浏览器显示的范围.明明上面已经意识到了平方的问题,结果还是出现了这种情况,虽然比平方好点.

完工

现在是19:44,用时大约75分钟.我果然还是太鶸了,这个效率实在是太低了.

还有个问题就是不能调用其他函数中的变量,这个卡了一下,最后的解决方法是把控制矩阵的那段复制进去了,以后再改吧.还有个折中方案:把需要的XY值给添加到两个hidden的input的value属性上,这样就能轻松绕过.(但这样太傻了,就没去试.

最后的完整代码:

document.onmousemove = ((e) => {
let x = document.documentElement.clientWidth;
let y = document.documentElement.clientHeight;
// 更合理的方法

var screenoffsetx = (e.pageX - x / 2) / x / 2 * 40;
var screenoffsety = (e.pageY - y / 2) / y / 2 * 40;

function set(type) {
if (type == 'x') return screenoffsetx;
if (type == 'y') return screenoffsety;
}

let main = (elect) => {
let select = $(elect);
select.css('transform', 'matrix(' +
1 + ',' +
0 + ',' +
0 + ',' +
1 + ',' +
set('x') + ',' +
set('y') +
')'
);
}
main('div.bigCircle');
}

考虑到分了象限,也不能用绝对值了,所以更简洁.

40是R/8的值,对于背景图来说也能看出效果,具体细调吧.

目前的效果还是挺low的,能用就行能用就行.