使用Javascript在網頁上旋轉的圖像不起作用

我正在嘗試爲網站製作一個圖片，該圖片隨鼠標位置旋轉，但我無法啓用它，希望有人能夠解釋我爲什麼。這裏的腳本我有：使用Javascript在網頁上旋轉的圖像不起作用

<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

來源

2012-10-09 Wesley Gijzen

正常工作對我來說，在FF，Opera和IE9測試。 http://jsfiddle.net/mzBEc/ – Aletheios

查看[this]（http://juanjvallejo.com/files/rnd/）jQuery插件 – ICoffeeConsumer

在Chrome中正常工作。您是否使用了90年代的某個版本的Internet Explorer？ – Rhyono

<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-09 13:04:48

使用Javascript在網頁上旋轉的圖像不起作用

回答

相關問題