Как изменить изображение курсора при падении над изображением с помощью JavaScript или jQuery? ⇐ Jquery

[Anonymous]

Я работаю над задачей, где, когда я наведу на изображении, я должен получить пользовательский курсор (150x150).
я сделал некоторые обходные пути, но не могу получить плавное зависание. class = "Snippet">

Код: Выделить всё

var mouseX = 0;
var mouseY = 0;

function getMousePosition(e) {
var eObj = window.event ? window.event : e;
mouseX = eObj.clientX;
mouseY = eObj.clientY + document.documentElement.scrollTop;
}

function moveImg() {
var m_x = parseInt(document.getElementById('badge1').style.left.replace('px', ''));
var m_y = parseInt(document.getElementById('badge1').style.top.replace('px', ''));

document.getElementById('badge1').style.left = Math.round(m_x + ((mouseX - m_x - 120) / 2)) + 'px';
document.getElementById('badge1').style.top = Math.round(m_y + ((mouseY - m_y - 1005) / 2)) + 'px';
}

document.onmousemove = getMousePosition;
var moveInterval = setInterval("moveImg()", 10);

$(".article-thumbnail-div").mousemove(function(e) {
// e.preventDefault();
$(".badge1").addClass("on");
}).mouseout(function(e) {
$('.badge1').removeClass("on");
console.log("out");
});< /code>
.article-thumbnail-section {
position: relative;
min-height: 400px;
}

.article-thumbnail-section img {
position: absolute;
}

.article-thumb-inner {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}

.article-thumb-inner-sec {
position: absolute;
z-index: 999;
height: 100%;
width: 100%;
}

.article-thumbnail-div {
position: absolute;
width: 212px;
cursor: pointer;
z-index: 10;
height: 226px;
}

.article-thumbnail-div img {
z-index: 5;
}

.article-thumbnail-div:nth-child(1) {
left: 0%;
}

.article-thumbnail-div:nth-child(2) {
left: 27%;
}

.article-thumbnail-div:nth-child(3) {
right: 27%;
}

.article-thumbnail-div:nth-child(4) {
right: 0%;
}

.article-thumbnail-div.even {
top: 20%;
}

.article-thumbnail-ellipse {
top: 50%;
}

.article-thumbnail-ellipse:nth-child(1) {
left: -90px;
}

.article-thumbnail-ellipse:nth-child(2) {
left: 22%;
}

.article-thumbnail-ellipse:nth-child(3) {
right: 20%;

}

.article-thumbnail-ellipse:nth-child(4) {
right: -90px;
}

.article-thumbnail-ellipse.odd {
top: 10%;
}

.article-thumbnail-ellipse.even {
top: -2%;
}

.article-thumbnail-section .article-thumb-inner-sec .img {}

#badge1 {
position: absolute;
width: 150px;
height: 150px;
background: url('https://3boysandadog.com/wp-content/uploads/2014/09/icon_circle_150x150.png') no-repeat;
display: none;
z-index: 250;
}

#badge1.on {
display:  block;
}< /code>



[img]../assets/images/thumbnail-bg1.svg[/img]
[img]../assets/images/thumbnail-bg2.svg[/img]
[img]../assets/images/thumbnail-bg3.svg[/img]
[img]../assets/images/thumbnail-bg4.svg[/img]



[img]https://vignette1.wikia.nocookie.net/cityville/images/5/58/Viral_basketballcomplex_basketball_200x200.png/revision/latest?cb=20130613014636[/img]
[img]https://vignette1.wikia.nocookie.net/cityville/images/5/58/Viral_basketballcomplex_basketball_200x200.png/revision/latest?cb=20130613014636[/img]
[img]https://vignette1.wikia.nocookie.net/cityville/images/5/58/Viral_basketballcomplex_basketball_200x200.png/revision/latest?cb=20130613014636[/img]
[img]https://vignette1.wikia.nocookie.net/cityville/images/5/58/Viral_basketballcomplex_basketball_200x200.png/revision/latest?cb=20130613014636[/img]

Пример скриншота на парящем изображение с использованием изображения cursor:


Подробнее здесь: https://stackoverflow.com/questions/737 ... pt-or-jque