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

时间：2016-02-07 19:54:21

标签： javascript jquery html css

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

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

任何想法如何做到这一点？

enter image description here

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

$(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>

答案 1 :(得分：0)

使用onclick函数传入每个按钮的x，y坐标。 您可以在jquery中使用position来获取这些内容。 在此函数中，使用left属性（css）为activedot div设置动画以水平滑动到相关位置。有一个很好的JSFiddle here 

$("#coolDiv").css({left:left}).animate({"left":"0px"}, "slow");

答案 2 :(得分：0)

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

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

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

JSFiddle或摘要：

＆＃13;
＆＃13; 
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";
}
＆＃13; 
: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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题