2

我找到了一个我正在努力实现的工作示例。http://jsfiddle.net/JFZ7a/. 我尝试将这个功能插入我的网页，但我遇到了很多问题。我试图将其恢复为基础，并将 HTML 复制到标准的空 HTML 文档正文中。然后我将文件保存为 test.html。我正在使用 Arachnophilia 进行编程。然后我在 IE 中加载页面，它会向我显示应有的图像。然后我将 CSS 脚本插入头部，直接从 jsFiddle 一对一复制。CSS 将图像定位为应有的位置。然后我插入了 javascript，这就是它向我表明我做错了什么的时候。我已经阅读了这份文件，但在我的一生中它不会起作用。我首先将隐藏字符粘贴到记事本中，然后再次将其复制出来，从而搜索到隐藏字符。有人可以看看这个并告诉我我缺少什么，我最亏欠你。

<!doctype html>
<html>
<head>
<title>
</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<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>  
     <style type="text/css">
     #apDiv1 {
position:absolute;
width:400px;
height:327px;
z-index:1;
left: 105px;
top: 98px;
}  
</style>  </head>

<body>
<div id="apDiv1">
 <img src="http://i347.photobucket.com/albums/p472/lcope24/corgi.jpg" class="image" />
 <br>(Not actual picture I'm trying to rotate, but it'll do for now)</div>
 </body>
  </html>
4

1 回答 1

2

你忘了$(document).ready( function(){ });。那个小提琴已经有$(window).load( function(){ });相当于$(document).ready( function(){ });

于 2013-02-14T16:59:45.783 回答