1

マウスの位置に合わせて回転するウェブサイトの画像を作成しようとしていますが、うまくいきません。誰かが理由を説明してくれることを願っています。私が持っているスクリプトは次のとおりです。

<body background="images/x.jpg">

<div id="container">
<div id="html1" style="position:absolute; overflow:hidden; left:480px; top:180px;     width:500px; height:500px; z-index:0">
<div class="content">
<img class="Circ" src="images/img.png" style="-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);">
<script type="text/javascript">
var img = $('.Circ');
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);
}
</script>
</div></div>


</div></body>
</html>

スクリプトはhttp://metatroid.com/articlesから入手しました。

4

1 に答える 1

0 
<body background="images/x.jpg">
<script type="text/javascript" src="jquery.js?1320880975"></script>
<div id="container">
<div id="html1" style="position:absolute; overflow:hidden; left:480px; top:180px;     width:500px; height:500px; z-index:0">
<div class="content">
<img class="image" src="img1.jpg" style="-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);">
<script type="text/javascript">
    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).mousemove(mouse);
    }
</script>
</div></div>


</div></body>
</html>

これを試して

于 2012-10-09T13:04:48.533 に答える