Question

我按循环顺序排列了一个列表，我希望通过按住循环按循环顺序旋转列表。我使用GreenSock JavaScript插件来旋转<div>，但<div>不会围绕其中心旋转，这就是我想要的。

代码在这里。

<!DOCTYPE html>
<html>
    <head>
        <title>CryVault</title>
        <link rel="stylesheet" href="ui/css/style.css" type="text/css">
        <script src="ui/js/TweenLite.min.js"></script>
        <script src="ui/js/Draggable.min.js"></script>
        <script src="ui/js/CSSPlugin.min.js"></script>
    </head>
    <body>
        <div align="center">
            <ul class='circle-container'>
                <li>A</li>
                <li>B</li>
                <li>C</li>
                <li>D</li>
                <li>E</li>
                <li>F</li>
                <li>H</li>
                <li>I</li>
                <li>J</li>
                <li>K</li>
                <li>L</li>
                <li>M</li>
                <li>N</li>
                <li>O</li>
                <li>P</li>
                <li>Q</li>
                <li>R</li>
                <li>S</li>
                <li>T</li>
                <li>U</li>
                <li>V</li>
                <li>W</li>
                <li>X</li>
                <li>Y</li>
                <li>Z</li>
                <li>0</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>!</li>
                <li>@</li>
                <li>#</li>
                <li>$</li>
                <li>%</li>
                <li>^</li>
                <li>&</li>
                <li>*</li>
                <li>-</li>
                <li>_</li>
                <li>+</li>
                <li>=</li>

            </ul>
        </div>
        <script>            
            Draggable.create(".circle-container", {type: "rotation", throwProps: true});
        </script>
    </body>
</html>

我是JavaScript的新手，并且不知道它是如何运作的。任何有关这方面的帮助将不胜感激。

以下是输出的屏幕截图。

Answer 1

我认为您想要在圆圈中拖动鼠标时围绕中心旋转字符。前段时间我需要做类似的事情，我已根据您的需求调整了我的代码。我使用CSS3 transforms来转换字符的位置：

//---Vars
var container = document.getElementById("container"),
    offset = container.getBoundingClientRect(),
    elements = container.querySelectorAll("li"),
    radius = container.offsetWidth / 2,
    angle = (360 / elements.length) * Math.PI / 180,
    sangle = 0,
    eangle = 0,
    increment = 0;

//---Get the angle formed between the mouse and the center
function getAngle(x, y) {

  x = x - offset.left;
  y = y - offset.top;

  return Math.atan2(radius - y, radius - x);

}

//---Move elements
function moveElements() {

  var x = 0,
      y = 0,
      itemAngle = 0,
      transform = "";

  [].forEach.call(elements, function(item, index) {

    itemAngle = index * angle + increment;
    x = radius + Math.cos(itemAngle) * radius;
    y = radius + Math.sin(itemAngle) * radius;
    transform = "translate(" + x + "px, " + y + "px)";

    item.style.msTransform = transform;
    item.style.webkitTransform = transform;
    item.style.MozTransform = transform;
    item.style.transform = transform;

  });

}

//---Start drag
function startDrag(evt) {

  sangle = getAngle(evt.pageX, evt.pageY);

  document.addEventListener("mousemove", moveDrag);
  document.addEventListener("mouseup", endDrag);

}

//---Move drag
function moveDrag(evt) {

  increment = getAngle(evt.pageX, evt.pageY) - sangle + eangle;

  moveElements();

}

//---End drag
function endDrag(evt) {

  eangle = increment;

  document.removeEventListener("mousemove", moveDrag);
  document.removeEventListener("mouseup", endDrag);

}

//---Start drag event
document.addEventListener("mousedown", startDrag);

//---Set the initial position
moveElements();

#container {
  cursor: default;
  height: 400px;
  position: relative;
  width: 400px;
}

#container span {
  color: #666;
  display: block;
  font-family: Arial;
  font-size: 12px;
  left: 50%;
  position: absolute;
  top: 50%;
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.circle {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

.circle li {
  color: #666;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  list-style-type: none;
  position: absolute;
}

<div id="container">
  <span>Drag in circle</span>
  <ul class='circle'>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>H</li>
    <li>I</li>
    <li>J</li>
    <li>K</li>
    <li>L</li>
    <li>M</li>
    <li>N</li>
    <li>O</li>
    <li>P</li>
    <li>Q</li>
    <li>R</li>
    <li>S</li>
    <li>T</li>
    <li>U</li>
    <li>V</li>
    <li>W</li>
    <li>X</li>
    <li>Y</li>
    <li>Z</li>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>!</li>
    <li>@</li>
    <li>#</li>
    <li>$</li>
    <li>%</li>
    <li>^</li>
    <li>&</li>
    <li>*</li>
    <li>-</li>
    <li>_</li>
    <li>+</li>
    <li>=</li>
  </ul>
</div>

这里有一个Codepen，其代码与上述代码段相同：

http://codepen.io/elchininet/pen/WRvZRx

修改

使用Codepen的上一个TouchEvents的一个小分支：

http://codepen.io/elchininet/pen/rjYgBE

Answer 2

如果我理解正确，你可以使用transformOrigin左右旋转：“left 50％”。要围绕中心旋转，请使用“50％50％”。 e.g。

TweenLite.to(element, 2, {rotation:90, transformOrigin:"left 50%"});

要在单击按钮时放置动画，您必须使用mousedown功能：

$('#Clicker').mousedown(function () {
TweenLite.to(element, 2, {rotation:90, transformOrigin:"left 50% 50%"});
timeout = setInterval(function () {
   TweenLite.to(element, 2, {rotation:90, transformOrigin:"left 50% 50%"});
}, 500);

return false;
});
$('#Clicker').mouseup(function () {
  clearInterval(timeout);
  return false;
});
$('#Clicker').mouseout(function () {
  clearInterval(timeout);
  return false;
});

使用javascript在<ul>中旋转<li>？

2 个答案: