2
달성하려는 작업 예제를 발견했습니다. http://jsfiddle.net/JFZ7a/. 나는이 함수를 내 웹 페이지에 삽입하려고 시도했지만 많은 문제가 발생했다. 나는 이것을 기본으로 되돌리고 HTML을 표준 빈 HTML 문서 본문에 복사했습니다. 그런 다음 파일을 test.html로 저장했습니다. 나는 Arachnophilia를 사용하여 프로그래밍을하고 있습니다. IE에서 페이지를로드하면 이미지가 올바르게 표시됩니다. 그런 다음 CSS 스크립트를 jsFiddle에서 똑바로 1 대 1로 복사하여 헤드에 삽입했습니다. CSS는 필요한대로 이미지를 배치했습니다. 나는 그 때 자바 스크립트를 삽입하고 그것이 내가 뭔가 잘못하고있는 것을 보여 줬을 때이다. 나는이 문서와 함께 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>
IE의 어떤 버전을 사용하고 있습니까? transfor CSS는 IE9 이상에서만 작동합니다. http://stackoverflow.com/questions/4865167/css3-transform-rotate- in-ie9 –
IE 9를 사용하고 있습니다. Firefox에서 같은 문제가 있습니다. 그의 모범은 내 작품이 아니다. –