0
ウェブアプリケーションにバーコードスキャンのリスナーがあります。私がそれをどのようにして得たかは別の話です。スライドテキストを中心としたdivのアニメーション
いずれにしても、スキャンが検出されたとき、およびそのスキャンを摂取したバックエンド処理が成功した場合、ユーザーに警告する必要があります。
これを助けるために、私は2つのdivを取り、それらを重ねました。 下のdivには "Ready To Scan"というテキストがあり、一番上のdivには最後のスキャンのステータスを示すテキストがあります。だから基本的には、これが動作する方法は、ユーザーが何か "スキャン"し、divの幅の100％を表示する "OK"または "停止を言ういくつかのメッセージ！ビジネスロジックに応じて「何かしてください...」と表示されます。しかし、約2〜3秒後に、divを左にスライドさせて、 "Ready to scan"と表示されている下のdivを表示させます。こうすることで、ユーザーはスキャンを続行でき、最後のスキャンが「受け入れられた」ことを認識します。
ここにコードがあります。 - スライドさせるのdivを取得するにはスペースバー：
var counter = 0; \t \t \t \t \t \t \t \t \t
window.onkeyup = function(e) {
var key = e.keyCode ? e.keyCode : e.which;
if (key == \t 32) {
if (counter == 0) {
slide();
}
} \t \t \t
} \t \t \t
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 \t \t
});
}#scanner-status {
position: relative; \t \t \t \t
}
#scanner-status img {
display: inline-block;
max-width: 15px;
margin-right: 3px;
}
#scanner-status-ready {
top: 0;
left: 0;
width: 100%; \t
position: absolute; \t \t
vertical-align: middle;
text-align: center; \t \t
background-color: #939598;
max-height: 28px;
font-family: "Times New Roman", Times, serif;
font-weight: bold; \t
}
#scanner-status-error {
top: 0;
left: 0;
width: 100%;
position: absolute; \t \t \t \t
vertical-align: middle;
text-align: center; \t \t
background-color: #e54a5c;
max-height: 28px;
font-family: "Times New Roman", Times, serif;
color: white;
font-weight: bold;
z-index: 10; \t \t \t \t
}
.scanner-status-message {
display: inline-block;
line-height: 30px; \t
} \t \t \t<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> \t
</div>
</div>質問/問題
ヒット：私はアニメーションを行うためのjQueryを使用していますが、私のテキストは、トップのdivの中央に配置され。私が実行している問題は、私のdivが画面の左側に移動すると、divのサイズが小さくなるのではなく、ちょうど左側に移動するので、中心のテキストは見えなくなるということです。移動divを調整するにはどうすればよいですか？同時に、テキストが「中央に配置されている」ことを確認しますか？
すでにコードスニペットを作成した際にフィドルを提供する理由はありません。 –
あなたは 'left'プロパティをアニメーション化しています。そのため、要素が画面の端から滑っているのです。代わりに、 'width'プロパティをアニメートします。 –
よろしくお願いします。ばかな質問かもしれませんが、jQueryはどのようにその変更を見ますか？ –