图像跟随鼠标指针淡出
Image follow mouse pointer and fades
我正在尝试创建一个图像,该图像跟随光标并 'prints'/自行绘制,并在 x 秒后淡化 'printed'/绘制的每个单独图像。
到目前为止,我已经设法让图像跟随光标,只是不确定如何创建一个函数或一种方法来使每个单独的图像在一定时间后消失?
我创建了一个 JS Fiddle 来帮助解释。
JS
(function() {
"use strict";
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
imgFollow = document.createElement('div');
imgFollow.className = "imgFollow";
imgFollow.style.left = event.pageX + "px";
imgFollow.style.top = event.pageY + "px";
document.body.appendChild(imgFollow);
}
})();
CSS
.wrapper {
height: 100vh;
width:100%;
background-color:green;
overflow:hidden;
position:relative;
}
.imgFollow {
width: 32px;
height: 32px;
position: absolute;
opacity:0.3;
background-repeat:none;
background-image:url('http://static.wfu.edu/images/icon-help-32x32.png');
transform: translate(-50%, -50%);
}
添加它们。
JS
setTimeout(function () {
imgFollow.className = "imgFollow fade-out"
},1000);
CSS
.fade-out{
transition: opacity 1s;
opacity: 0 !important;
}
这是一种使用 jquery 实现您想要的方法。
$(document).ready(function() {
var init = true;
$(document).on('click', function() {
$(this)[init?'on':'off']('mousemove', follow);
init = !init;
}).trigger('click');
function follow(e) {
var xPos = e.pageX;
var yPos = e.pageY;
$("#imgFollow").addClass("imgFollow"); //adds the css class to a div with id "imgFollow"
$("#imgFollow").offset({
left: e.pageX,
top: e.pageY
});
}
});
所以在文档中包含 jquery 库并添加一个 div 和你命名的 id。
希望这对您有所帮助。
我正在尝试创建一个图像,该图像跟随光标并 'prints'/自行绘制,并在 x 秒后淡化 'printed'/绘制的每个单独图像。
到目前为止,我已经设法让图像跟随光标,只是不确定如何创建一个函数或一种方法来使每个单独的图像在一定时间后消失?
我创建了一个 JS Fiddle 来帮助解释。
JS
(function() {
"use strict";
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
imgFollow = document.createElement('div');
imgFollow.className = "imgFollow";
imgFollow.style.left = event.pageX + "px";
imgFollow.style.top = event.pageY + "px";
document.body.appendChild(imgFollow);
}
})();
CSS
.wrapper {
height: 100vh;
width:100%;
background-color:green;
overflow:hidden;
position:relative;
}
.imgFollow {
width: 32px;
height: 32px;
position: absolute;
opacity:0.3;
background-repeat:none;
background-image:url('http://static.wfu.edu/images/icon-help-32x32.png');
transform: translate(-50%, -50%);
}
添加它们。
JS
setTimeout(function () {
imgFollow.className = "imgFollow fade-out"
},1000);
CSS
.fade-out{
transition: opacity 1s;
opacity: 0 !important;
}
这是一种使用 jquery 实现您想要的方法。
$(document).ready(function() {
var init = true;
$(document).on('click', function() {
$(this)[init?'on':'off']('mousemove', follow);
init = !init;
}).trigger('click');
function follow(e) {
var xPos = e.pageX;
var yPos = e.pageY;
$("#imgFollow").addClass("imgFollow"); //adds the css class to a div with id "imgFollow"
$("#imgFollow").offset({
left: e.pageX,
top: e.pageY
});
}
});
所以在文档中包含 jquery 库并添加一个 div 和你命名的 id。
希望这对您有所帮助。