使鼠标指针图像

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

2011-08-22 supernoob

+11

请使用这样的烦恼，在网站上，除非它是一个游戏避免。 – ThiefMaster

这是可能的.. – qwertymk

你不需要jQuery。您需要获取光标坐标（查看mousemove事件）并相应地定位您的图像。至于加速度和方向，可以使用应用于当前光标位置的相对于前一个的位置来找到它们。在不支持现代CSS属性的浏览器中，方向可能存在问题，您可能需要多个不同方向的图像并使用最接近的图像。 – RobG

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

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

更新跟着慢慢

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

为主导方向，你需要获得当前的CSS左和css顶部，并与event.pageX和事件进行比较。 pageY，然后设置图像方向为

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

编辑，你可以设置jquery.animation持续时间到一定的数量。

来源

2011-08-22 06:34:47 wizztjh

这似乎是完美的，你能给我如何比较css顶部和event.pageX，Y左？ – supernoob

*一个如何的例子... – supernoob

这是一个很好的变换例子http://www.the-art-of-web.com/css/css-animation/ – wizztjh

好吧，这里是跟随光标一个简单的框：

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

做剩下的就是记住最后一次的光标位置和应用forumula拿到盒子的一个简单的例子来比的确切位置移动等游标是。如果盒子具有有限的加速度并且在停止移动之后必须赶上光标，超时也会很方便。用图像替换盒子是简单的CSS（它可以代替盒子的大部分设置代码）。我认为这个例子中的实际思维代码大约有8行。

选择正确的图像（使用精灵）来定位火箭。

是啊，讨厌地狱。 :-)

来源

2011-08-22 06:54:05 RobG

出于某种原因，这只是不工作：（ – supernoob

这并不意味着要完成代码，只是一个简单的例子，你还需要处理滚动。 – RobG

这里是我的代码（不是优化而是一个完整的工作示例）：

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

来源

2013-10-03 16:01:10 user2843469

我需要的最好的工作示例。非常感谢！ –

使鼠标指针图像

回答

相关问题