Question

在我学习Javascript / jQuery的过程中 - 我一直试图弄清楚如何做到这一点，我想我已经完全弄乱了JSFiddle。

小提琴： http://jsfiddle.net/y7qWw/

我要做的是围绕圆圈旋转div，使其位于指定点。

1）用户点击链接电影左 - id = goLMovies ，将div移动到圆圈的左侧

example1

1）用户点击电影权限 - id = goRMovies 的链接，将div移至圆圈顶部

div周围会有几个不同id的框。根据单击id的链接，相对div将围绕圆的顶部旋转。

重要的是内部html元素不要旋转，就像圆圈中的文字一样。

jQuery的：

jQuery(function($){

!jQuery.easing && (jQuery.easing = {});
!jQuery.easing.easeOutQuad && (jQuery.easing.easeOutQuad = function( p ) { return 1 - Math.pow( 1 - p, 2 ); });

var squareController = {
create: function( square ){
  var obj = {
    angle: square.data('angle'),
    element: square,
    measure: $('<div />').css('width', 360 * 8 + parseFloat(square.data('angle'))),
    update: squareController.update,
    reposition: squareController.reposition,
  };
  obj.reposition();
  return obj;
},
update: function( angle ){
  this.angle = angle;
  this.reposition();
},
reposition: function(){
  var radians = this.angle * Math.PI / 180, radius = 600 / 2;
  this.element.css({
    marginLeft: (Math.sin( radians ) * radius - 50) + 'px',
    marginTop: (Math.cos( radians ) * radius - 50) + 'px'
  });
}
};

var spin = {
squares: [],
left: function(group){
  var self = this;
  $.each(this.squares, function(i, square){
      if(square.element.data("group")==group||group==""){
        square.measure.stop(true, false).animate(
          { 'width': '-=45' },
          {
            easing: 'easeOutQuad',
            duration: 1000,
            step: function( now ){ square.update( now ); }
          }
        );
      }          
  });
},
right: function(){
  var self = this;
  $.each(this.squares, function(i, square){
    square.measure.stop(true, false).animate(
      { 'width': '+=45' },
      {
        easing: 'easeOutQuad',
        duration: 1000,
        step: function( now ){ square.update( now ); }
      }
    );
  });
},
prep: function( squares ){
  for ( var i=0, square; i<squares.length; i++ ) {
    this.squares.push(squareController.create($(squares[i])));
  }
}
};

var dataGroup;  

$('#goL').click(function(){ spin.left() });
$('#goR').click(function(){ spin.right() });

$('#goLMovies').click(function(){ 
  dataGroup = "movies";
  spin.left(dataGroup) 
});

$('#goLSomething').click(function(){ 

  dataGroup = "something";
  spin.left(dataGroup) 
});

$('#goLAnimation').click(function(){ 

  dataGroup = "animation";
  spin.left(dataGroup) 
});

spin.prep($('.square'));

});

HTML：

<a id="goR" href="javascript:void(0);">Left All</a><br/>
<a id="goL" href="javascript:void(0);">Right All</a><br/><br/>

<a id="goLMovies" href="javascript:void(0);">Go Left Movies</a><br/>
<a id="goLSomething" href="javascript:void(0);">Go Left Something</a><br/>
<a id="goLAnimation" href="javascript:void(0);">Go Left Animation</a><br/>

<div class="maincircle">
    <div class="inner">
        <div class="squareOne square" data-angle="180" data-group="movies">Movies</div>
        <div class="squareTwo square" data-angle="5" data-group="animation">Animation</div>
        <div class="squareThree square" data-angle="90" data-group="something">Something?</div>
    </div>
</div>

提前感谢您的帮助。如果有人可以评论他们的代码也帮助我发展我会非常感激。

Answer 1

这是一种方法：

<div class="circle">
  <p>top</p>
  <p>right</p>
  <p>bottom</p>
  <p>left</p>
  <div class="box">Wheee!</div>
</div>

.circle {
  position: relative;
  width: 400px;
  height: 400px;
  border-radius: 200px;
}
.box {
  height: 2rem;
  width: 4rem;
  position: absolute;
  /*  Transfom origin at the center of the circle  */
  top: 50%;
  left: 50%;
  /*  The first translate centers the element,
      the second rotates it,
      the third offsets it to the circle's edge,
      the fourth rotates it back to preserve the element's orientation */
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-200px) rotate(90deg);
  transition: transform 1s ease-out; /* this thing animates it! */
}

$(".circle").on("click", "p",  function(e) {
  var deg = $(e.target).html()
  deg = deg === "top"    ? 0 : // corresponding angle values
        deg === "right"  ? 90 :
        deg === "bottom" ? 180 :
        deg === "left"   ? 270 : -30;
  rotateTo(deg);
});
function rotateTo(deg) {
  var bplate = [
    "translate(-50%,-50%) rotate(", -90, "deg) translateY(-200px) rotate(", 90, "deg)"
  ];
  bplate[1] = deg;
  bplate[3] = 0-deg;
  $(".circle>.box").css({
    "transform": bplate.join("")
  });
}

CSSdeck example

如果您希望旋转元素的方向保持与圆相切，只需从css＆amp;中删除第四个变换。 JS。

围绕圆圈旋转框

1 个答案: