Question

我正在寻找图像的旋转动画。我使用css转换

进行旋转工作

但我想以指向另一个元素的特定角度停止动画。这是我需要做的一个例子

enter image description here

我想旋转箭头图像并停止指向预定义的框。请帮帮我

Answer 1

类似的东西：

http://jsfiddle.net/UHwGe/5/

<强> HTML：

<div id="wrapper">
    <div id="pointer"></div>
    <div id="box1" class="box" onclick="rotate(-140, 'box1')"></div>
    <div id="box2" class="box" onclick="rotate(-125, 'box2')"></div>
    <div id="box3" class="box" onclick="rotate(-90, 'box3')"></div>
    <div id="box4" class="box" onclick="rotate(220, 'box4')"></div>
    <div id="box5" class="box" onclick="rotate(180, 'box5')"></div>
</div>

<span onclick="rotate(-140, 'box1')">Box1</span>
<span onclick="rotate(-125, 'box2')">Box2</span>
<span onclick="rotate(-90, 'box3')">Box3</span>
<span onclick="rotate(220, 'box4')">Box4</span>
<span onclick="rotate(180, 'box5')">Box5</span>
<span onclick="rotate()">Random</span>

<script>
function rotate(deg, box) {
        if (!deg) {
            deg = Math.floor(Math.random() * 360) + 0;
        }
    $('#pointer').css('transform', 'rotate(' + deg + 'deg)');

    $('.box').removeClass('active');
    box && $('#' + box).addClass('active');
} 
</script>

<强> CSS

#wrapper {
    width: 300px;
    height: 300px;
    position: relative;
}

.box {
    border: 2px solid #000;
    width: 50px;
    height: 50px;
    position: absolute;
    cursor: pointer;
}

.box.active {
    background: red;
}

#box1 { top: 0; left: 0; }
#box2 { top: 0; left: 60px; }
#box3 { top: 0; left: 120px; }
#box4 { top: 60px; left: 0; }
#box5 { top: 120px; left: 0; }

#pointer {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -30px;
    background: no-repeat center center url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZtJREFUeNrsmc9HBGEYx2eb1SkiolP0J2S7lA5Z6hLdIqK/oFNdEyWK1Kl/pNSlJR1Sp/QnxBKxpK4xpu/wHNZa9tHMO/PO+3wfPvYy5vXxfPf9NY00TSNLNRYZKwpTmMIUpjCFKUxhClOYwhRWVVPzUBzHLsaeBCdgH/wW8cIkSbzv8C54BnOWIt0Cb2DD0n84i/c1uADjliatPfAIZi3N0osS8XVLy9IUuAWn2SJR5IsbmltLLEstB1ITEt9R9QS2wEcRy5JWuOq73B7YBp26r8Pamgb34ChvxOvS4f56kG5/htzh/mrLLN62dHiYkYgfWoj0YHUk4r1QIz1YqxLxZUvn4Vi7Bw9BOJu15+U3eOFjsDZsicp14+FhqXZeoQir99YhRPoMrPxXtk4d/gI74C7vi7TCCxUeD18kwt0yz8MuupbdY32PeOYcHETKa1zNTqsZeoTrIFxohH2fpS9lFu66GsCXDv9IhG9cD+SD8CvYBO9lDFZ1pK/AUlmy6mUppOIHcQpTmMIUpjCFKUxhClOYwhQeVn8CDABMaF8WQYXUNAAAAABJRU5ErkJggg==);
    -webkit-transition: .6s;
    transition: .6s;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

刚刚编辑过，所以你可以将它应该旋转的度数传递给函数。

编辑2：以五个方框为例，点击方框或其下方的文字

Answer 2

这里是html

<div class="drop">
    <div>
        <img src="http://www.belugerinstudios.com/image/picturethumbnail/FunnyCatFootballIcon.JPG"/>
    </div>
</div>

和js

$(document).ready(function() {
  // the same as yours.
  function rotateOnMouse(e, pw) {
      var offset = pw.offset();
      var center_x = (offset.left) + ($(pw).width() / 2);
      var center_y = (offset.top) + ($(pw).height() / 2);
      var mouse_x = e.pageX;
      var mouse_y = e.pageY;
      var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
      var degree = (radians * (180 / Math.PI) * -1) + 100;
      //            window.console.log("de="+degree+","+radians);
      $(pw).css('-moz-transform', 'rotate(' + degree + 'deg)');
      $(pw).css('-webkit-transform', 'rotate(' + degree + 'deg)');
      $(pw).css('-o-transform', 'rotate(' + degree + 'deg)');
      $(pw).css('-ms-transform', 'rotate(' + degree + 'deg)');
  }

  $('.drop div img').mousedown(function(e) {
    e.preventDefault(); // prevents the dragging of the image.
    $(document).bind('mousemove.rotateImg', function(e2) {
      rotateOnMouse(e2, $('.drop div img'));
    });
  });

  $(document).mouseup(function(e) {
    $(document).unbind('mousemove.rotateImg');
  });
});

查看http://jsfiddle.net/rwBku/13/

<小时/> 享受：）

Answer 3

谢谢你们提供正确的提示。最后我得到了答案

绘图问题： http://www.smashingmagazine.com/2011/10/04/quick-look-math-animations-javascript/

轮播： Stephan Wagner的回答

使用jquery＆amp ;;旋转图像并以特定角度停止css变换

3 个答案: