1

Rotating an element based on cursor position in a別の要素 と http://jsfiddle.net/JqBZb/のコードを試しています

以下のリンクの完全なコードで書き直しましたが、動作しません..

https://www.dropbox.com/s/z1tqv56vjzsq0f0/rotateonmousedown.html.txt

何か考えはありますか??

jqueryコード

var img = $('.image');
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).mousedown(mouse);
}

​
4

4 に答える 4

2

次のような js コードを記述する必要があります。

注意: script タグの src 属性を設定すると、埋め込まれたすべての js コードがエンジンによって取り除かれます。他の script タグを使用してください。

<script src="jquery-1.7.2.js"></script>
<script>
$(function(){
var img = $('.image');
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).mousedown(mouse);
}
});
</script>
于 2013-05-20T18:09:49.387 に答える
0

次のようなものにする必要があります。

また、不適切なスクリプト参照があります。以下の CDN を使用するか、ローカルにダウンロードします。使用していた特定の要件と古いバージョンの jQuery がない限り。

最後に、ブラウザの種類ごとに img.css(key,val) を呼び出すのではなく、それをオブジェクトとして渡す必要があります。img.css({ key:val, key:val }) など。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
    var img = $('.image');
    var offset = img.offset();
    $(document).mousedown(function (e) {
        var center_x = (offset.left) + (img.width() / 2);
        var center_y = (offset.top) + (img.height() / 2);
        var mouse_x = e.pageX;
        var mouse_y = e.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)');
    });
});


</script>
于 2013-05-20T18:10:10.440 に答える