我正在使用Jquery Rotate来旋转图像周围的图像,并且它工作得很好但是在IE7和IE8中它被推高了约200像素并且在图像周围有黑色笔划/边框.
我正在使用jQueryRotate3.js,它有效,但位置关闭,不确定黑色边框来自哪里？
JS:
var start = 0;
// Sets the Value of the City for now
var angle = 1 + Math.floor(Math.random() * 180);
$("img.pointer").rotate({
angle: start,
animateTo: angle,
easing: $.easing.easeInOutSine
})
HTML:
<div class="city-details">
<div class="details">
<img class="pointer" src="http://demo.omnigon.com/christian_bovine/shamelesscity/images/pointer.png" alt="" />
</div>
</div>?
你可以在这里看到代码:http://jsfiddle.net/xtian/6gcS8/1/
我真的想在IE7和IE8中使用它.
如何使用jQuery-rotate插件旋转图像？
我尝试了以下内容,似乎不起作用:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>View Photo</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.rotate.1-1.js"></script>
<script type="text/javascript">
var angle = 0;
setInterval ( function (e) {
rotate();
}, 100 );
function rotate() {
angle = angle + 1;
$('#pic').rotate(angle);
}
</script>
</head>
<body>
<img border="0" src="player.gif" name="pic" id="pic">
</body>
</html>
大多数浏览器都支持其他方法,谢谢!
请查看我的jsfiddle以了解我的问题：黄色是您可以使用红色圆圈旋转的父 div，它也是可拖动的，在此 div 内还有另一个带有黑色边框的 div，我们可以将其视为包含到蓝色圆圈。蓝色圆圈可在包含边界内拖动，仅需要 y 坐标，如果旋转黄色 div ex 会出现问题；90 度或更多，鼠标坐标与预期的拖动位置不匹配，我试图通过使用三角学和反转轴来解决这个问题，但它是徒劳的，我希望有人能解决这个问题并留下一个 jsfiddle 用于工作样品受到高度赞赏。“请不要将我引向其他帖子，因为我认为我已阅读与此问题相关的所有内容”
HTML
<div id="container">
<div id="containment">
<div id="circle"></div>
</div>
</div>
CSS
#container{width:100px;
height:140px;
background:#FFEB3B;
position:absolute;
top:50%;
bottom:50%;
margin-top:-70px;
margin-right:-50px}
.ui-rotatable-handle {
height: 30px;
width: 30px;
cursor: pointer;
background:#ff0000;
border-radius:50%;
right: -15px;
bottom: -15px;
position:absolute;
z-index:1}
#containment{width:30px;
height:190px;
position:absolute;
bottom:70px;
left:35px;
border:solid 1px #000}
#circle{width:30px;
height:30px;
position:absolute;
top:0;
left:0;
border-radius:50%;
background:#3F51B5}
JavaScript
$(function(){
$('#container').draggable().rotatable();
$('#circle').draggable({containment: $('#containment')
});
});