鼠标上的chnage选框方向

时间:2015-12-14 12:28:18

标签: javascript html marquee

这是我的代码:

<a href="#" onMouseOver="document.getElementById('image_runner').direction='left';">LEFT</a>
     - <a href="#" onMouseOver="document.getElementById('image_runner').direction='right';">RIGHT</a>
<marquee direction="left" style="width: 900px; margin: auto;" id="image_runner" onMouseOver="document.getElementById('image_runner').stop();" onMouseOut="document.getElementById('image_runner').start();">
<ul style="margin-top:0px;">
  <li>asda</li>
  <li class="right">asdsa</li>
  <li class="right">assda</li>
</ul>
</marquee>

出于某种原因,它并没有改变选框的方向。

任何想法?

1 个答案:

答案 0 :(得分:0)

Marquee在跑步时无法改变方向。你必须停止它,改变方向然后重新开始,但它将从开始停止。

document.getElementById('left').addEventListener('mouseover', function() {
  var marquee = document.getElementById('image_runner');
  marquee.stop();
  marquee.direction = 'left';
  marquee.start();
});
document.getElementById('right').addEventListener('mouseover', function() {
  var marquee = document.getElementById('image_runner');
  marquee.stop();
  marquee.direction = 'right';
  marquee.start();
});
<marquee direction="left" style="width: 900px; margin: auto;" id="image_runner" onMouseOver="document.getElementById('image_runner').stop();" onMouseOut="document.getElementById('image_runner').start();">
  <ul style="margin-top:0px;">
    <li>asda</li>
    <li class="right">asdsa</li>
    <li class="right">assda</li>
  </ul>
</marquee>
<a href="#" id="left">LEFT</a>
- <a href="#" id="right">RIGHT</a>