我尝试使用下面的网址创建以下内容。
到目前为止，在加载时成功创建了div但在鼠标拖动时无法旋转你能帮忙吗？这是我的文件
我只需要知道在圆周运动中单击并拖动鼠标时如何完成旋转。半圆内的所有div项都有类.items，我是动画的新手。
此外，我已将我的html代码添加为代码段文件以供参考。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#pantone {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 10;
opacity: 0;
}
.show-pantone {
opacity: 1!important;
transition: opacity .5s cubic-bezier(.55, .055, .675, .19);
-moz-transition: opacity .5s cubic-bezier(.55, .055, .675, .19);
-webkit-transition: opacity .5s cubic-bezier(.55, .055, .675, .19);
-o-transition: opacity .5s cubic-bezier(.55, .055, .675, .19)
}
.items {
display: block;
width: 220px;
height: 310px;
position: absolute;
}
.item-button {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 99;
border:1px solid red;
}
#root {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
min-width: 900px;
min-height: 771px;
//height: 645px;
background-color: #fff;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #fff;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
font-family: 'Roboto',sans-serif;
font-weight: 400;
}
.item-txt {
pointer-events: none;
width: 400px;
height: 220px;
position: absolute;
left: -90px;
top: -310px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
color: #bcbbc5;
font-size: 18px;
transition: color .2s linear;
-moz-transition: color .2s linear;
-webkit-transition: color .2s linear;
-o-transition: color .2s linear;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/utils/Draggable.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
var V=0.017453292519943295, S=951, al=900, A=110, R=1299, J=155, b=36, an=10, G=26, a=0, c=16, ao=20, f={}, p=[],y={pos:0}, az=0, U = 0, M = false;
f.posArr =[];
function loadDivs(){
for (var a = 0; a < G; a++) {
var itemsDiv = document.createElement("div");
itemsDiv.id = "items" + a;
itemsDiv.className = "items";
p[a] = {
item: itemsDiv,
use: 0,
no: 0,
click: 0,
bg: -1
};
E(itemsDiv, a, p[a]);
document.getElementById("pantone").appendChild(itemsDiv);
}
for (var i = 0; i < b; i++) {
f.posArr[i] = {
pos: i * an - 90,
use: 0,
cur: 0,
item: null,
no: i
};
}
l();
}
function E(aE, aF, aC) {
var aD = document.createElement("div");
aD.className = "item-button";
aD.setAttribute("data-id", aF);
aE.appendChild(aD);
$(aD).on("click", T);
B(aC)
}
function l() {
var aD, aB, aC;
aD = f.posArr[0];
aC = aD.pos;
for (var aB = 0; aB < b; aB++) {
aD = f.posArr[aB];
af(aD, aC + (an * aB), aB)
}
aj()
}
function af(aE, aB, aD) {
aB = aB % 360;
if (aB < 0) {
aB = aB + 360
}
aE.pos = aB;
if (aB > 190 && aB < 350) {
if (aE.use == 0 || aE.item == null) {
aE.use = 1;
var aC;
if (aD < 18) {
aC = o(aD + a, ao)
} else {
aC = o(aD - c + a, ao)
}
aE.cur = aC;
aE.item = au(aD, aC)
}
if (aE.item != null) {
ap(aE.item, aB)
}
} else {
if (aE.use == 1) {
aE.use = 0;
if (aE.item != null) {
aE.item.use = 0;
aE.item.bg = -1;
B(aE.item);
aE.item = null
}
}
}
}
function o(aC, aB) {
return (aC + (aB * (Math.abs((aC / 10) | 0) + 1))) % aB
}
function T(aC) {
if (Math.abs(az) > 10) {
return
}
var aE = aC.currentTarget.getAttribute("data-id") | 0,
aB = p[aE].bg,
M = true;
U = 0;
}
function ap(aE, aG) {
var aF = 270 - aG,
aB = Math.abs(aF),
aC = 100 - aB | 0,
aH = 1 - (aB * 0.006),
aD = Y(aG + (aF * aF * aF * aF * aF * 5e-9));
aE.item.style["transform"] = "translate3d(" + aD.x + "px, " + aD.y + "px, 0px) rotate(" + (aG + 90) + "deg) scale(" + aH + ")";
if (aE.click == 1) {
aE.item.style.zIndex = 110
} else {
aE.item.style.zIndex = aC
}
}
function Y(aF) {
var aE = Math.cos(aF * V),
aB = Math.sin(aF * V),
aD = (aE) * al + S - A,
aC = (aB) * al + R - J;
return {
x: aD,
y: aC
}
}
function au(aF, aE) {
var aD, aC, aB, aG;
var ab = 26;
for (aC = 0; aC < ab; aC++) {
aD = p[aC];
if (aD.use == 0) {
aD.use = 1;
aD.no = aF;
aD.bg = aE;
//aB = ConfigModel.imgArr[aE] + "_c.png";
//aG = ConfigModel.configArr[aE].poster;
aD.item.style.border = "1px solid red";
/*aD.item.style.background = aG.itemcolor + " url(" + aB + ") no-repeat";
g[aC].innerHTML = (aG.title).toLowerCase();
n[aC].innerHTML = aG.date;*/
return aD
}
}
}
function aj() {
var aB = 0.8;
//CMDetect.isDevice == false
if (false) {
y.pos = 0;
aB = 1.2
} else {
y.pos = 320
}
TweenLite.to(y, 2, {
pos: -90,
ease: Back.easeOut,
easeParams: [aB],
onUpdate: ax,
onUpdateParams: [0]
//onComplete: q
});
document.getElementById("pantone").className = "chand show-pantone"
}
function ax(aD) {
var aC = y.pos,
aE, aB;
for (aB = 0; aB < b; aB++) {
aE = f.posArr[aB];
af(aE, aC - (an * (aD - aB)), aB)
}
}
function B(aB) {
aB.item.style["transform"] = "translate3d(-500px, -500px, 0px) rotate(0deg)"
}
$(document).ready(function(){
loadDivs();
});
</script>
</head>
<body>
<div id="root">
<div id="pantone" class="show-pantone">
<div id="pantone-loading" style="display: none; background-color: rgb(221, 221, 221); transform: matrix(1, 0, 0, 1, 0, 0);"></div>
</div>
</div>
</body>
</html>