使图像跟随鼠标指针

Question

使图像跟随鼠标指针

sup*_*oob 20 javascript jquery

我需要一个火箭来跟踪我网站上鼠标指针的移动.这意味着它应该旋转以面向运动方向,并且如果可能,根据它必须覆盖的距离加速.这甚至可能吗？jquery也许？

Answer 1

wiz*_*tjh 26

通过使用jquery注册.mousemove来记录文件以将图像.css左侧和顶部更改为event.pageX和event.pageY.

示例如下 http://jsfiddle.net/BfLAh/1/

更新后慢慢跟进

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

对于方向,你需要保持当前的CSS和css顶部并与event.pageX和event.pageY进行比较,然后设置图像方向

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

Run Code Online (Sandbox Code Playgroud)

对于速度,您可以将jquery .animation持续时间设置为一定量.

Answer 2

Rob*_*obG 8

好的,这是一个跟随光标的简单框:

<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>

Run Code Online (Sandbox Code Playgroud)

完成剩下的工作是一个简单的例子,它记住了最后一个光标位置,并应用了一个论坛来使框移动而不是光标所在的位置.如果盒子具有有限的加速度,则超时也会很方便,并且在停止移动后必须赶上光标.用图像替换盒子是简单的CSS(可以替换盒子的大部分设置代码).我认为示例中的实际思维代码大约是8行.

选择正确的图像(使用精灵)来定向火箭.

是的,很烦人的地狱.:-)

Answer 3

小智 5

这是我的代码（未优化，但有完整的示例）：

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，2 月前
查看次数：	102097 次
最近记录：	9 年，2 月前