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