我的 Web 应用程序有一个用于条形码扫描的侦听器。我是如何开始工作的则是另一回事。
无论如何，我需要能够在检测到扫描时提醒用户以及摄取该扫描的后端处理是否成功。
为了帮助解决这个问题，我取了 2 个 div 并覆盖了它们。底部 div 有一些文本显示“准备扫描”，顶部 div 有一些文本描述上次扫描的状态。所以基本上，这将起作用的方式是，用户将“扫描”某些东西，然后 div 将显示其宽度的 100% 一些消息，上面写着“OK”或“停止！” 或“做某事...”取决于某些业务逻辑。但大约 2-3 秒后，我希望该 div 向左滑动，露出底部的 div，上面写着“准备扫描”。这样用户就可以继续扫描并且他们知道他们的最后一次扫描被“接受”。
这是代码。要让 div 滑动 - 点击space栏。：
var counter = 0;
window.onkeyup = function(e) {
var key = e.keyCode ? e.keyCode : e.which;
if (key == 32) {
if (counter == 0) {
slide();
}
}
}
function slide() {
var $lefty = $('#scanner-status-error');
var $percentage = $lefty.outerWidth() - ($lefty.outerWidth() * .15);
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$percentage : 0
});
} #scanner-status {
position: relative;
}
#scanner-status img {
display: inline-block;
max-width: 15px;
margin-right: 3px;
}
#scanner-status-ready {
top: 0;
left: 0;
width: 100%;
position: absolute;
vertical-align: middle;
text-align: center;
background-color: #939598;
max-height: 28px;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
}
#scanner-status-error {
top: 0;
left: 0;
width: 100%;
position: absolute;
vertical-align: middle;
text-align: center;
background-color: #e54a5c;
max-height: 28px;
font-family: "Times New Roman", Times, serif;
color: white;
font-weight: bold;
z-index: 10;
}
.scanner-status-message {
display: inline-block;
line-height: 30px;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scanner-status">
<div id="scanner-status-error">
<div class="scanner-status-message">Stop!</div>
</div>
<div id="scanner-status-ready">
<div class="scanner-status-message">Ready to Scan</div>
</div>
</div>问题/问题：我正在使用 JQuery 来制作动画，并且我的文本在顶部 div 中居中。我遇到的问题是，当我的 div 移动到屏幕左侧时，div 的大小没有缩小，而只是向左移动，因此不再看到居中的文本。如何调整移动的 div 但同时确保我的文本“居中”？
您正在为该left属性而不是该width属性设置动画。
var counter = 0;
window.onkeyup = function(e) {
var key = e.keyCode ? e.keyCode : e.which;
if (key == 32) {
if (counter == 0) {
slide();
}
}
}
function slide() {
var $lefty = $('#scanner-status-error');
var $percentage = $lefty.outerWidth() - ($lefty.outerWidth() * .15);
$lefty.animate({
width: "40"
});
}#scanner-status {
position: relative;
}
#scanner-status img {
display: inline-block;
max-width: 15px;
margin-right: 3px;
}
#scanner-status-ready {
top: 0;
left: 0;
width: 100%;
position: absolute;
vertical-align: middle;
text-align: center;
background-color: #939598;
max-height: 28px;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
}
#scanner-status-error {
top: 0;
left: 0;
width: 100%;
position: absolute;
vertical-align: middle;
text-align: center;
background-color: #e54a5c;
max-height: 28px;
font-family: "Times New Roman", Times, serif;
color: white;
font-weight: bold;
z-index: 10;
}
.scanner-status-message {
display: inline-block;
line-height: 30px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scanner-status">
<div id="scanner-status-error">
<div class="scanner-status-message">Stop!</div>
</div>
<div id="scanner-status-ready">
<div class="scanner-status-message">Ready to Scan</div>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句