2

ずいぶん前から学びたいと思っていたのですが、なかなか思いつきませんでした。

http://jsfiddle.net/Mobilpadde/Xt7ag/

次に、マウスを動かします。これは簡単な部分ですが、私も回転させたいです。常にマウスの方向を見るようにしますが、それほど静的ではなく、マウスを上に動かすと、ちょっとしたはずです最初に回転させてから、マウスをさらに遠ざけると、マウスは再び追従し始めます (私の言いたいことがわかっている場合)。

それは簡単なことですか、それとも3k行ですか？(それとも jQuery プラグインでしょうか?)

4

3 に答える 3

6

こんにちは、私の古い投稿を使用して、もっと近づけました：デモ http://jsfiddle.net/Z3pGQ/3/

私はまだ作業中です。よりスムーズなバージョンをフリックするか、私の前に改善できるかどうか:

古い投稿:別の要素のカーソル位置に基づいて要素を回転する

それが役立つことを願っています、私は今それをよりスムーズにしようとしています、乾杯

サンプルコード

$(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);
}​

画像

ここに画像の説明を入力

于 2012-06-23T03:50:51.783 に答える
0

そのためのjQueryプラグインがありますhttp://pixelscommander.com/en/iphone-development/rotate-html-elements-with-mouse/

于 2014-02-04T15:04:49.753 に答える
0

これには、私が今やりたいことよりもはるかに多くの計算が必要になりますが、CSS を使用して回転を簡単に適用できます。Mozilla と Webkit のプロパティは次のとおりです。残りの (IE、Opera...)は、このページ で確認できます。これは、120 度の回転が適用された関数です。left適切な回転を計算し、それに応じてとを調整する必要がありますtop。

$(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)"});
            })
于 2012-06-23T03:43:34.227 に答える