最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Rotating on mouse move - Stack Overflow

programmeradmin4浏览0评论

Something I've wanted to learn for quite a time now, but haven't been able to figure out.

/

Then you move the mouse, it follows, which is the easy part, but I want to rotate too, like always look in the direction of the mouse, but not so static, more like, if you move your mouse up, it should kinda rotate first, and then you move the mouse further away, it should begin to follow again (If you know what I mean).

Is that something simple to do, or 3k lines? (Or maybe a jQuery plugin?)

Something I've wanted to learn for quite a time now, but haven't been able to figure out.

http://jsfiddle/Mobilpadde/Xt7ag/

Then you move the mouse, it follows, which is the easy part, but I want to rotate too, like always look in the direction of the mouse, but not so static, more like, if you move your mouse up, it should kinda rotate first, and then you move the mouse further away, it should begin to follow again (If you know what I mean).

Is that something simple to do, or 3k lines? (Or maybe a jQuery plugin?)

Share Improve this question edited Jun 23, 2012 at 14:09 Mobilpadde asked Jun 23, 2012 at 3:33 MobilpaddeMobilpadde 1,8813 gold badges23 silver badges30 bronze badges 4
  • Rotation can only be achieved via CSS or the canvas element. JavaScript alone can't do it. – j08691 Commented Jun 23, 2012 at 3:43
  • @j08691 I know, it's just how you do it... – Mobilpadde Commented Jun 23, 2012 at 3:47
  • If you know then you should tag your question accordingly. – j08691 Commented Jun 23, 2012 at 4:45
  • Through it was kind of implicit – Mobilpadde Commented Jun 23, 2012 at 14:06
Add a ment  | 

3 Answers 3

Reset to default 6

Hiya I got it something more closer by using an old post of mine : demo http://jsfiddle/Z3pGQ/3/

I am still working, will flick you more smoother version or if you can improve before me:

Old post: Rotating an element based on cursor position in a separate element

Hope it helps, I am trying to make it smoother now, cheers

Sample code

$(document).ready(function() {
    $(document).mousemove(function(e) {
        $(".firefly").css({
            "top": (e.pageY * 2) + "px",
            "left": (e.pageX * 2 + 130) + "px"
        });
    })
})
var img = $(".firefly");
if (img.length > 0) {
    var offset = img.offset();

    function mouse(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) + 90;
        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)');
    }
    $(document).mousemove(mouse);
}​

Image

This is going to involve a lot more math than I want to do right now, but you can apply rotations with css easily. Here are the properties for mozilla and webkit, you can see the rest of the (IE,Opera...) at this page. Here is your function with a 120deg rotation applied. You will still need to calculate the proper rotation, and adjust the left and top accordingly.

$(document).mousemove(function(e){
                $(".firefly").css({
                    "top":(e.pageY*2)+"px",
                    "left":(e.pageX*2+130)+"px",
                    "-moz-transform": "rotate(120deg)",
                    "-webkit-transform": "rotate(120deg)"});
            })

There is a jQuery plugin for that http://pixelsmander./en/iphone-development/rotate-html-elements-with-mouse/