chnage marquee direction on mouse over [duplicate]

问题

this is the code I have:

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

for some reason, it's not changing the direction of the marquee.

any ideas?

回答1:

Marquee cannot change direction while running. You have to stop it, change direction then start again, but it will start from the beggining.

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>

来源：https://stackoverflow.com/questions/34267073/chnage-marquee-direction-on-mouse-over

标签

javascript

html

marquee