我创建了一个图像数组,在刷新页面时随机加载,并使用onmouseMove
函数跟随光标。并在一段时间后淡出。您可以在此处找到一个有效的示例 - JSFiddle
我遇到了另一个 Question ,它提供了一个 JSFiddle ,允许图片跟随光标并为其添加一些缓动。整体流程和体验更具吸引力,这正是我想要实现的目标。
我想知道的是,是否可以对我创建的设计实施缓和?我已经读到有一些缓动插件,但我觉得我的情况可能有点不同,但我可能错了,在JS和jQuery方面我很缺乏经验。
任何关于如何实现这一目标的反馈将不胜感激。
JS
(function() {
var pictures = ['http://www.iconsdb.com/icons/preview/white/x-mark-4-xxl.png', 'http://www.iconsdb.com/icons/preview/white/x-mark-xxl.png'];
var selectedPicture = Math.floor(Math.random() * pictures.length);
var randImg = pictures[selectedPicture];
document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
var imgFollow, eventDoc, doc, body, pageX, pageY;
event = event || window.event; // IE-ism
// If pageX/Y aren't available and clientX/Y
// are, calculate pageX/Y - logic taken from jQuery
// Calculate pageX/Y if missing and clientX/Y available
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
// Add an image to follow the cursor
var pictures = new Array ('http://www.etamcru.com/pub/img/toolbar_x_icon.png', 'http://www.schultzlawoffice.com/img/icons/blue/arrow-up-50-white.png', 'http://www.fullscope.com/SiteCollectionImages/Icons/White/Right-Arrow-Icon.png');
var selectedPicture = Math.floor(Math.random() * pictures.length);
imgFollow = document.createElement('div');
imgFollow.className = "imgFollow";
imgFollow.style.left = event.pageX + "px";
imgFollow.style.top = event.pageY + "px";
imgFollow.style.backgroundImage = 'url('+ randImg +')';
console.log(randImg);
document.body.appendChild(imgFollow);
setTimeout(function () {
imgFollow.className = "imgFollow fade-out"
}, 200);
}
})();