活动边框(.showBorder)在文本移动时居中 [英] Active border (.showBorder) centered under text as it moves
本文介绍了活动边框(.showBorder)在文本移动时居中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
// Get references to the two sets of boxes
var numbers = document.querySelectorAll(".clicked");
var letters = document.querySelectorAll(".border");
// Turn each node list into proper arrays:
numbers = Array.prototype.slice.call(numbers);
letters = Array.prototype.slice.call(letters);
// Loop through all the number boxes
numbers.forEach(function(box, index) {
// Set up the click event handlers for all the number boxes
box.addEventListener("click", function() {
// Remove borders from each of the letter boxes
letters.forEach(function(box) {
box.classList.remove("showBorder");
});
// Apply the border to only the one clicked element
var info = document.getElementsByClassName('box-tip')[0];
info.style.left = 10 + (index * 45) + 'px';
info.style.visibility = 'visible';
letters[index].classList.add("showBorder");
});
});
$(document).on("click", '.clicked', function(){
$('.clicked').removeClass('selected');
$(this).addClass('selected');
});
.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.list-box {margin:15px auto;padding:0;}
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.box-sleeve {margin:15px auto;padding:0;}
.showBorder { border: 3px dashed black; }
.box-tip {
display:inline;
margin: auto;
position: relative;
visibility: hidden;
}
.numberCircle {
border-radius: 50%;
font-size: 12px;
border: 5px solid #000;
color: #fff;
background: #000;
}
.numberCircle span {
text-align: center;
display: block;
}
li.selected {color:#fff;background-color:#000;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-box">
<li class="clicked">1</li>
<li class="clicked">2</li>
<li class="clicked">3</li>
<li class="clicked">4</li>
<li class="clicked">5</li>
<li class="clicked">6</li>
<li class="clicked">7</li>
<li class="clicked">8</li>
</ul>
<div class="box-tip">
<span class="info">Regular length for your collar size</span>
<span class="numberCircle">?</span>
</div>
<ul class="box-sleeve">
<li class="border">a</li>
<li class="border">b</li>
<li class="border">c</li>
<li class="border">d</li>
<li class="border">e</li>
<li class="border">f</li>
<li class="border">g</li>
<li class="border">h</li>
</ul>
当文本移动时，活动字母框(.showBorder)必须位于文本领口大小的常规长度"的中心.文本开始位置应保持当前对齐.为了使边框位于居中位置，仅在命中字母"C"时才开始移动.欢迎所有建议.这是我的代码:
The active letter box (.showBorder) needs to be in the centre of the text 'Regular length for your collar size' as the text moves. The text start position should be left aligned as it currently is. In order to be centered with the border box it needs to only start moving when hits letter 'C'. All recommendations are welcome. Here's my code:
// Get references to the two sets of boxes
var numbers = document.querySelectorAll(".click");
var letters = document.querySelectorAll(".border");
// Turn each node list into proper arrays:
numbers = Array.prototype.slice.call(numbers);
letters = Array.prototype.slice.call(letters);
// Loop through all the number boxes
numbers.forEach(function(box, index) {
// Set up the click event handlers for all the number boxes
box.addEventListener("click", function() {
// Remove borders from each of the letter boxes
letters.forEach(function(box) {
box.classList.remove("showBorder");
});
// Apply the border to only the one clicked element
var info = document.getElementsByClassName('box-tip')[0];
info.style.left = 10 + (index * 45) + 'px';
info.style.visibility = 'visible';
letters[index].classList.add("showBorder");
});
});
.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.list-box {margin:50px auto;padding:0;}
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.box-sleeve {margin:50px auto;padding:0;}
.showBorder { border: 3px dashed black; }
.box-tip {
display:inline;
margin: auto;
position: relative;
visibility: hidden;
}
.numberCircle {
border-radius: 50%;
font-size: 12px;
border: 5px solid #000;
color: #fff;
background: #000;
}
.numberCircle span {
text-align: center;
display: block;
}
<ul class="list-box">
<li class="click">1</li>
<li class="click">2</li>
<li class="click">3</li>
<li class="click">4</li>
<li class="click">5</li>
<li class="click">6</li>
<li class="click">7</li>
<li class="click">8</li>
</ul>
<div class="box-tip">
<span class="info">Regular length for your collar size</span>
<span class="numberCircle">?</span>
</div>
<ul class="box-sleeve">
<li class="border">a</li>
<li class="border">b</li>
<li class="border">c</li>
<li class="border">d</li>
<li class="border">e</li>
<li class="border">f</li>
<li class="border">g</li>
<li class="border">h</li>
</ul>
推荐答案
而不是info.style.left = 10 + (index * 45) + 'px';
if (index > 2) {
info.style.left = 10 + ((index - 3) * 45) + 'px';
}
else {
info.style.left = 0 + 'px';
}
这是它的小提琴: https://jsfiddle.net/flish/fm6821d5/ 现在更新，效果更好
this is the fiddle for it: https://jsfiddle.net/flish/fm6821d5/ Updated now and works better
这篇关于活动边框(.showBorder)在文本移动时居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
