Javascript 将图元移动到活动图元位置

列表中有未知数量的可点击点。如果我点击其中一个元素，我会将另一个元素移动到它的位置

因此，装饰元素滑动到单击的点。对我来说，困难在于我有一个不断变化的点数

你知道怎么做吗

.container{
位置：绝对位置；
高度：300px；
宽度：600px；
背景色：#222；
}
1.亚航行{
位置：绝对位置；
底部：0px；
宽度：100%；
高度：70像素；
线高：50px；
文本对齐：居中；
背景色：#fff；
}
.活性点{
宽度：100%；
高度：20px；
位置：绝对位置；
顶部：-20px；
转变：转变。3秒放松；
-webkit转换：-webkit转换。3s轻松输出；
/*   
在此幻灯片：
转换：translate3d（-34px，0px，0px）；
*/
}
.活性点跨度{
显示：块；
背景：#fff；
宽度：100%；
身高：100%；
边框右上角半径：20px；
位置：绝对位置；
左：0；
}
.activedot跨度：第n个子项（1）{
左-50%；
边框右上角半径：20px；
}
.activedot跨度：第n个子项（2）{
边框左上半径：20px；
左：50%；
}
#dotnav-0.active.activedot{
转换：translate3d（-34px，0px，0px）；
}
亚航空{
位置：相对位置；
显示：内联块；
保证金：0；
填充：0；
列表样式：无；
游标：默认值；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
亚航空公司{
位置：相对位置；
显示：块；
浮动：左；
边际：0.13px；
宽度：10px；
高度：10px；
光标：指针；
}
.亚航空ul li span{
排名：0；
左：0；
宽度：100%；
身高：100%；
大纲：无；
边界半径：50%；
背景色：#ccc；
光标：指针；
位置：绝对位置；
-webkit过渡：背景色0.2s；
过渡：背景色0.2s；
}
.次导航ul li.有效跨度{
背景色：#9c27b0；
宽度：140%；
身高：140%；
顶部：-2px；
}

使用onclick功能输入每个按钮的x、y坐标。 您可以在jquery中获得这些。 在此函数中，使用left属性（css）设置activedot div的动画，使其水平滑动到相关位置。有一个漂亮的桥

---

这可以通过一点JavaScript来实现，例如（单击）：

只需将指针的左边距调整到单击点的

偏移左侧

（x）

或片段：

var dots=document.getElementsByClassName（“dot”），
指针=document.querySelector（“.pointer”）；
对于（变量i=0；i

：根目录{
背景色：白色；
字体系列：无衬线；
}
：根*{
过渡：所有0.2秒缓解；
}
.box.content{
宽度：50%；
高度：100px；
背景色：黑色；
}
.盒子.指针{
显示：内联块；
背景色：黑色；
高度：25px；
}
.box.pointer:：之前{
背景色：白色；
内容：''；
显示：内联块；
宽度：25px；
高度：25px；
边框右上角半径：15px；
}
.box.pointer:：after{
背景色：白色；
内容：''；
显示：内联块；
宽度：25px；
高度：25px；
边框左上半径：15px；
}
.圆点{
列表样式类型：无；
保证金：0；
填充：0；
左边距：30px；
}
点，点{
显示：内联块；
背景色：#ccc；
光标：指针；
宽度：10px；
高度：10px；
边界半径：50%；
保证金：5px；
}
.点.点.激活{
背景色：#f88；
转换：比例（1.3）；
}

$（函数（）{
$（“.dotnav”）。在（'click'，function（）上{
var posLeft=$（this.position（）.left+19+'px'；
$（'.activedot'）。设置动画({
左：左
}, 500);
$（“.dotnav”）.removeClass（'active'）；
$（this.addClass（'active'）；
});
});
.container{
位置：绝对位置；
高度：150像素；
宽度：600px；
背景色：#222；
颜色：#fff；
}
1.亚航行{
位置：绝对位置；
底部：0px；
宽度：100%；
高度：70像素；
线高：50px；
文本对齐：居中；
背景色：#fff；
}
.活性点{
背景：#333；
宽度：33px；
高度：16px；
位置：绝对位置；
顶部：0px；
左：50%；
左边距：-16px；
转变：转变。3秒放松；
-webkit转换：-webkit转换。3s轻松输出；
/*   
在此幻灯片：
转换：translate3d（-34px，0px，0px）；
*/
}
.活性点跨度{
显示：块；
背景：#fff；
宽度：100%；
身高：100%；
位置：绝对位置；
左：0；
}
.activedot跨度：第n个子项（1）{
左-50%；
边框右上角半径：20px；
}
.activedot跨度：第n个子项（2）{
边框左上半径：20px；
左：50%；
}
#dotnav-0.active.activedot{
转换：translate3d（-34px，0px，0px）；
}
亚航空{
字号：0；
位置：相对位置；
宽度：100%；
文本对齐：居中；
显示：内联块；
保证金：0；
填充：0；
列表样式：无；
光标
$("#coolDiv").css({left:left}).animate({"left":"0px"}, "slow");

pointerElement.style.marginLeft = clickedDot.offsetLeft + "px";