Question

我的网络应用程序有一个条形码扫描监听器。我如何工作是另一回事。

无论如何，我需要能够在检测到扫描时提醒用户以及摄取该扫描的后端处理是否成功。

为了帮助我，我采取了2个div并覆盖它们。底部div有一些文字说＆＃34;准备扫描＆＃34;并且顶部div有一些描述上次扫描状态的文本。基本上，这将起作用的方式，用户将扫描＆＃34;然后div会显示100％的宽度，并显示一些消息，表示＆＃34; OK＆＃34;或者＆＃34;停止！＆＃34;或者＆＃34;做点什么......＆＃34;取决于一些业务逻辑。但大约2-3秒后，我希望div滑向左侧，露出底部div，表示＆＃34;准备扫描＆＃34;。这样，用户可以继续扫描并且他们知道他们的最后一次扫描被接受了。＆＃34;

这是代码。要让div滑动 - 点击空间栏。：

＆＃13;

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		
    });
  }

＆＃13;

#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;	
}

＆＃13;

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

＆＃13;

问题/问题：我使用JQuery来制作动画，我的文字位于顶部div的中心。我遇到的问题是，当我的div移动到屏幕的左侧时，div的大小不会缩小，而只是向左移动，因此不再看到居中的文本。如何调整移动div，但同时确保我的文字是＃34;居中＆＃34;？

Answer 1

您正在为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>

使用居中文本幻灯片div的动画

1 个答案: