在这里,我有一支带tryimg的笔来找出错误。
问题是光标位置是页面加载的位置。而且我无法对不同的链接产生多重影响。
我想要达到的结果也是相同的:
https://laerkeandersen.com/
笔的链接在这里:
https://codepen.io/Killrockstar/pen/VVNoMa
var cursor = document.querySelector('.cursor');
var short_headline = document.querySelector('#__short_headline');
var short_headline_position = short_headline.getBoundingClientRect();
var brand = document.querySelector('#__brand');
var brand_position = brand.getBoundingClientRect();
var sales = document.querySelector('#__sales');
var sales_position = sales.getBoundingClientRect();
var interdisciplinary = document.querySelector('#__interdisciplinary');
var interdisciplinary_position = interdisciplinary.getBoundingClientRect();
var menu_about = document.querySelector("a[href='/#about']");
var menu_about_position = menu_about.getBoundingClientRect();
document.body.onmousemove = function(e) {
/*Adjust the position of the cursor*/
cursor.style.left=e.pageX-20+'px';
cursor.style.top=e.pageY-20+'px';
/*Adjust the radial-gradient*/
short_headline.style.setProperty('--x',(e.pageX-short_headline_position.left)+'px');
short_headline.style.setProperty('--y',(e.pageY-short_headline_position.top)+'px');
/*Adjust the position of the cursor*/
/*Adjust the radial-gradient*/
brand.style.setProperty('--x',(e.pageX-brand_position.left)+'px');
brand.style.setProperty('--y',(e.pageY-brand_position.top)+'px');
/*Adjust the position of the cursor*/
/*Adjust the radial-gradient*/
sales.style.setProperty('--x',(e.pageX-sales_position.left)+'px');
sales.style.setProperty('--y',(e.pageY-sales_position.top)+'px');
/*Adjust the position of the cursor*/
/*Adjust the radial-gradient*/
interdisciplinary.style.setProperty('--x',(e.pageX-interdisciplinary_position.left)+'px');
interdisciplinary.style.setProperty('--y',(e.pageY-interdisciplinary_position.top)+'px');
menu_about.style.setProperty('--x',(e.pageX-menu_about_position.left)+'px');
menu_about.style.setProperty('--y',(e.pageY-menu_about_position.top)+'px');
}