logo标签列表

将元素移动到活动元素位置

javascriptjqueryhtmlcss
3
我有一个列表中未知数量的可点击点。如果我点击其中一个元素，我希望将另一个元素移动到它的位置。
因此，装饰元素会滑动到被点击的点上。对我来说困难的是，这些点的数量是不断变化的。
有什么想法如何完成这个操作？
图片示例请见链接：enter image description here 

.container {
  position: absolute;
  height: 300px;
  width: 600px;
  background-color: #222;
}

.SubNavigation {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 70px;
  line-height: 50px;
  text-align: center;
  background-color: #fff;
}

.activedot {
  width: 100%;
  height: 20px;
  position: absolute;
  top: -20px;
  transition: transform .3s ease-out;
  -webkit-transition: -webkit-transform .3s ease-out;
  
/*   
Slide here:
transform: translate3d(-34px, 0px, 0px); 
*/

}

.activedot span {
  display: block;
  background: #fff;
  width: 100%;
  height: 100%;
  border-top-right-radius: 20px;
  position: absolute;
  left: 0;
}

.activedot span:nth-child(1) {
  left: -50%;
  border-top-right-radius: 20px;

}

.activedot span:nth-child(2) {
  border-top-left-radius: 20px;
  left: 50%;
}

#dotnav-0.active .activedot{
transform: translate3d(-34px, 0px, 0px);
}

.SubNavigation ul {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.SubNavigation ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0 13px;
  width: 10px;
  height: 10px;
  cursor: pointer;
}

.SubNavigation ul li span {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: none;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
  position: absolute;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.SubNavigation ul li.active span {
  background-color: #9c27b0;
  width: 140%;
  height: 140%;
  top: -2px;
}
<div class="container">

<div class="SubNavigation">
  <ul id="dots">
    <li class="dotnav active"><span></span></li>
    <li class="dotnav"><span></span></li>
    <li class="dotnav"><span></span></li>
    <li class="dotnav"><span></span></li>
    <li class="dotnav"><span></span></li>
    <li class="dotnav"><span></span></li>
    <li class="dotnav"><span></span></li>
    <li class="dotnav"><span></span></li>
    <li class="dotnav"><span></span></li>
    <li class="dotnav"><span></span></li>
    <li class="dotnav"><span></span></li>
    <li class="dotnav"><span></span></li>
  </ul>

  <div class="activedot">
    <span></span>
    <span></span>
  </div>

</div>
</div>

3个回答
3

$(function() {

  $(".dotnav").on('click', function() {

    var posLeft = $(this).position().left + 19 + 'px';

    $('.activedot').animate({
      left: posLeft
    }, 500);

    $(".dotnav").removeClass('active');

    $(this).addClass('active');

  });

});
.container {
  position: absolute;
  height: 150px;
  width: 600px;
  background-color: #222;
  color: #fff;
}
.SubNavigation {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 70px;
  line-height: 50px;
  text-align: center;
  background-color: #fff;
}
.activedot {
  background: #333;
  width: 33px;
  height: 16px;
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -16px;
  transition: transform .3s ease-out;
  -webkit-transition: -webkit-transform .3s ease-out;
  /*   
Slide here:
transform: translate3d(-34px, 0px, 0px); 
*/
}
.activedot span {
  display: block;
  background: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
}
.activedot span:nth-child(1) {
  left: -50%;
  border-top-right-radius: 20px;
}
.activedot span:nth-child(2) {
  border-top-left-radius: 20px;
  left: 50%;
}
#dotnav-0.active .activedot {
  transform: translate3d(-34px, 0px, 0px);
}
.SubNavigation ul {
  font-size: 0;
  position: relative;
  width: 100%;
  text-align: center;
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.SubNavigation ul li {
  position: relative;
  display: inline-block;
  margin: 0 13px;
  width: 10px;
  height: 10px;
  cursor: pointer;
}
.SubNavigation ul li span {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: none;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
  position: absolute;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.SubNavigation ul li.active span {
  background-color: #9c27b0;
  width: 140%;
  height: 140%;
  top: -2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">

  <div class="SubNavigation">
    <ul id="dots">
      <li class="dotnav"><span></span></li>
      <li class="dotnav"><span></span></li>
      <li class="dotnav"><span></span></li>
      <li class="dotnav active"><span></span></li>
      <li class="dotnav"><span></span></li>
      <li class="dotnav"><span></span></li>
      <li class="dotnav"><span></span></li>
    </ul>

    <div class="activedot">
      <span></span>
      <span></span>
    </div>

  </div>
</div>

在这个程序中，你可以增加或减少点的数量，位置将保持准确。 - undefined
0

将每个按钮的x、y坐标作为onclick函数的参数传入。 你可以使用jquery中的position来获取这些坐标。 在这个函数内部，使用left属性（css）使activedot div水平滑动到相应的位置。这里有一个很好的JSFiddle here

$("#coolDiv").css({left:left}).animate({"left":"0px"}, "slow");
但是如果我只有5个按钮呢？x坐标会不同。 - undefined
无法理解你的句子。每个按钮都将有自己的onclick属性（http://www.w3schools.com/jsref/event_onclick.asp）。 - undefined
0

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

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

只需将指针的左边距调整到点击点的offsetLeft（x）。

JSFiddle或代码片段：

var dots = document.getElementsByClassName("dot"),
    pointer = document.querySelector(".pointer");

for (var i = 0; i < dots.length; i++) {
    dots[i].addEventListener("click", dotClick);
}

function dotClick(e) {
 pointer.style.opacity = "1";
    
    var prev = document.querySelector(".dot.active");
    if (prev) prev.classList.remove("active");

    e.target.classList.add("active");
    // 28 IS a magic number
    pointer.style.marginLeft = e.target.offsetLeft - 28 + "px";
}
:root {
  background-color: white;
  font-family: sans-serif;
}

:root * {
  transition: all 0.2s ease-out;
}

.box .content {
  width: 50%;
  height: 100px;
  background-color: black;
}

.box .pointer {
  display: inline-block;
  background-color: black;
  height: 25px;
}

.box .pointer::before {
  background-color: white;
  content: '';
  display: inline-block;
  width: 25px;
  height: 25px;
  border-top-right-radius: 15px;
}

.box .pointer::after {
  background-color: white;
  content: '';
  display: inline-block;
  width: 25px;
  height: 25px;
  border-top-left-radius: 15px;
}

.dots {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-left: 30px;
}

.dots .dot {
  display: inline-block;
  background-color: #ccc;
  cursor: pointer;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 5px;
}

.dots .dot.active {
  background-color: #f88;
  transform: scale(1.3);
}
<div class="box">
    <div class="content"></div>
    <div class="pointer" style="opacity: 0;"></div>
</div>
<ul class="dots">
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <!-- Works with any number of dots -->
</ul>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接