Сделайте изображение, следуя указателю мыши

Мне нужна ракета, чтобы следить за перемещениями указателя мыши на моем сайте. Это означает, что он должен вращаться в направлении движения и, если возможно, ускоряться в зависимости от расстояния, которое он должен покрыть. Возможно ли это? jquery возможно?

Ответ 1

используя jquery для регистрации .mousemove для документа, чтобы изменить изображение .css слева и сверху на event.pageX и event.pageY.

пример ниже http://jsfiddle.net/BfLAh/1/

обновляется, чтобы следовать медленно

http://jsfiddle.net/BfLAh/3/

для ориентации, вам нужно получить текущие css left и css top и сравнить с event.pageX и event.pageY, а затем установить ориентацию изображения с помощью

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);

для скорости вы можете установить длительность janery.animation до определенной суммы.

Ответ 2

Хорошо, вот простое поле, которое следует за курсором:

<script type="text/javascript">

function getMouseCoords(e) {
  var e = e || window.event;
  document.getElementById('msg').innerHTML = e.clientX + ', ' + 
           e.clientY + '<br>' + e.screenX + ', ' + e.screenY;
}


var followCursor = (function() {
  var s = document.createElement('div');
  s.style.position = 'absolute';
  s.style.margin = '0';
  s.style.padding = '5px';
  s.style.border = '1px solid red';

  return {
    init: function() {
      document.body.appendChild(s);
    },

    run: function(e) {
      var e = e || window.event;
      s.style.left  = (e.clientX - 5) + 'px';
      s.style.top = (e.clientY - 5) + 'px';
      getMouseCoords(e);
    }
  };
}());

window.onload = function() {
  followCursor.init();
  document.body.onmousemove = followCursor.run;
}

</script>

<div id="msg" style="width: 1000px; height: 1000px; border: 1px solid blue;"></div>

Выполнение остального - это простой случай запоминания последней позиции курсора и применения форумалы, чтобы ящик мог двигаться, кроме того, где находится курсор. Тайм-аут также будет полезен, если поле имеет ограниченное ускорение и должно догнать курсор после его остановки. Замена окна на изображение - это простой CSS (который может заменить большую часть кода установки для окна). Я думаю, что фактический код мышления в примере составляет около 8 строк.

Выберите правильное изображение (используйте спрайт) для ориентации ракеты.

Да, досадно, как черт.: -)

Ответ 3

Здесь мой код (не оптимизированный, но полный рабочий пример):

<head>
<style>
#divtoshow {position:absolute;display:none;color:white;background-color:black}
#onme {width:150px;height:80px;background-color:yellow;cursor:pointer}
</style>
<script type="text/javascript">
var divName = 'divtoshow'; // div that is to follow the mouse (must be position:absolute)
var offX = 15;          // X offset from mouse position
var offY = 15;          // Y offset from mouse position

function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}

function follow(evt) {
    var obj = document.getElementById(divName).style;
    obj.left = (parseInt(mouseX(evt))+offX) + 'px';
    obj.top = (parseInt(mouseY(evt))+offY) + 'px'; 
    }
document.onmousemove = follow;
</script>
</head>
<body>
<div id="divtoshow">test</div>
<br><br>
<div id='onme' onMouseover='document.getElementById(divName).style.display="block"' onMouseout='document.getElementById(divName).style.display="none"'>Mouse over this</div>
</body>