我在列表中有未知数量的可点击点。如果我点击其中一个元素,我想将另一个元素移动到它的位置。
所以装饰元素滑动到点击的点。对我来说,困难在于我的点数不断变化。
知道如何做到这一点吗?
.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>
最佳答案
$(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>
关于javascript - 将元素移动到事件元素位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35258301/