如何创建鼠标跟随元素,延迟和基于方向?

我正在寻找一种解决方案,让图像跟踪鼠标光标的方向。


基于https://codepen.io/redspiderfish/pen/MYmeYz我处理了这个代码:https : //jsfiddle.net/h78wm1nz/


尝试使用基于http://jsfiddle.net/dPDF3的以下代码添加旋转。但是蜜蜂看起来醉了。


 var img = $('#wunderbiene img');

//if (img.length > 0) {

var offset = img.offset();


function beeMouse(evt) {

  var center_x = (offset.left) + (img.width() / 2);

  var center_y = (offset.top) + (img.height() / 2);

  var mouse_x = evt.pageX;

  var mouse_y = evt.pageY;

  var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);

  var degree = (radians * (180 / Math.PI) * -1) + 180;

  img.css('-moz-transform', 'rotate(' + degree + 'deg)');

  img.css('-webkit-transform', 'rotate(' + degree + 'deg)');

  img.css('-o-transform', 'rotate(' + degree + 'deg)');

  img.css('-ms-transform', 'rotate(' + degree + 'deg)');

}


//}




$(window).mouseenter(function() {

  $(document).mousemove(beeMouse);

}).mouseleave(function() {

  $(document).unbind();

});


犯罪嫌疑人X
浏览 193回答 2
2回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript