我正在尝试在我的网站头部添加跟踪鼠标的眼睛。我正在使用我找到的代码,这是我的
jsfiddle
.我发现了很多关于鼠标后面某个对象的例子和帖子。但问题是,他们都只为他们所在的部门工作。为了证明这一点,我在示例中在眼睛周围添加了红线。当鼠标位于该框中时,眼睛会跟随所有鼠标移动。但是,如果鼠标滚动到框外,则不会再跟随鼠标。不管鼠标在页面上的哪个位置,有没有一种方法可以让眼睛跟随鼠标?
<style>
.move-area{/*normally use body*/
width: 100vw;
height: 100vh;
padding: 10% 45%;
}
.container {
width: 100%;
}
.eye {
position: relative;
display: inline-block;
border-radius: 50%;
height: 30px;
width: 30px;
background: #CCC;
}
.eye:after { /*pupil*/
position: absolute;
bottom: 17px;
right: 10px;
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
content: " ";
}
</style>
<div style="height:200px;">
<div class="move-area" style="height:30px;border:1px solid red;">
<div class='.container'>
<div class='eye'></div>
<div class='eye'></div>
</div>
</div>
<div>Text below the eyes</div>
</div>
<script>
//This is a pen based off of Codewoofy's eyes follow mouse. It is just cleaned up, face removed, and then made to be a little more cartoony. https://codepen.io/Codewoofy/pen/VeBJEP
$(".move-area").mousemove(function(event) {
var eye = $(".eye");
var x = (eye.offset().left) + (eye.width() / 2);
var y = (eye.offset().top) + (eye.height() / 2);
var rad = Math.atan2(event.pageX - x, event.pageY - y);
var rot = (rad * (180 / Math.PI) * -1) + 180;
eye.css({
'-webkit-transform': 'rotate(' + rot + 'deg)',
'-moz-transform': 'rotate(' + rot + 'deg)',
'-ms-transform': 'rotate(' + rot + 'deg)',
'transform': 'rotate(' + rot + 'deg)'
});
});
</script>