我正在尝试为一个网站制作一个随鼠标位置旋转的图像，但我无法让它工作，我希望有人能向我解释原因。 这是我的脚本:
<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
最佳答案
<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>
试试这个
关于javascript - 使用 Javascript 在网页上旋转图像不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12791296/