私が達成しようとしていることの実例を見つけました。http://jsfiddle.net/JFZ7a/。この関数を自分のWebページに挿入してみましたが、多くの問題が発生しました。これを基本に戻そうとし、HTMLを標準の空のHTMLドキュメント本文にコピーしました。次に、ファイルをtest.htmlとして保存しました。私はArachnophiliaを使用してプログラミングを行っています。次に、ページをIEにロードすると、画像が表示されます。次に、CSSスクリプトをヘッドに挿入しました。これは、jsFiddleからの1対1のコピーです。CSSは画像を適切に配置しました。次に、JavaScriptを挿入しました。そのとき、何か間違ったことをしていることがわかりました。私はこのドキュメントをtweekedしましたが、私の人生の間、それは機能しません。隠し文字を最初にメモ帳に貼り付けてから、もう一度コピーして検索しました。誰かがこれを見て、私が欠けているものを教えてくれませんか、私はあなたの借金の中で最も多いでしょう。
<!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>