如何立即改變選取框 onclick 的方向

Question

在這里，我試圖通過單擊方向按鈕來更改滾動選取框的方向。 確切的情況是，在 IE 和 Firefox 中，它按預期完美運行，當我單擊方向按鈕時，選框立即改變其方向。 但在 chrome 中它不是預期的，而是當我單擊 chrome 中的選框時，選框完成其循環，然后開始沿單擊的方向流動。

這是我到目前為止所做的代碼。

 $(document).ready(function() { $('.leftbutton').on('click', function() { var marquee = $('.scrollermarquee'); marquee[0].stop(); marquee[0].direction = 'left'; marquee[0].start(); }) $('.rightbutton').on('click', function() { var marquee = $('.scrollermarquee'); marquee[0].stop(); marquee[0].direction = 'right'; marquee[0].start(); }) })

 .rightbutton { background: red; padding: 15px; right: 20px; position: absolute; cursor: pointer; }.leftbutton { background: red; padding: 15px; position: absolute; cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="leftbutton">&lt;</span> <marquee class="scrollermarquee"> <ul> <li> <div class="views-field views-field-title"><span class="field-content"><a href="#" hreflang="en">test 1</a></span></div> </li> <li> <div class="views-field views-field-title"><span class="field-content"><a href="#" hreflang="en">test 2</a></span></div> </li> <li> <div class="views-field views-field-title"><span class="field-content"><a href="#" hreflang="en">test 3</a></span></div> </li> </ul> </marquee> <span class="rightbutton">&gt;</span>

Answer 1

選框已貶值。 您可以改用它。

 $('#change').click(function(){ if($('.ltr').length) { $('.ltr').removeClass('ltr').addClass('rtl'); $('#text').text('Right to left...'); } else { $('.rtl').removeClass('rtl').addClass('ltr'); $('#text').text('Left to right...'); } })

 .ltr { height: 50px; overflow: hidden; position: relative; }.ltr h3 { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position */ -moz-transform:translateX(-100%); -webkit-transform:translateX(-100%); transform:translateX(-100%); /* Apply animation to this element */ -moz-animation: ltr 15s linear infinite; -webkit-animation: ltr 15s linear infinite; animation: ltr 15s linear infinite; } /* Move it (define the animation) */ @-moz-keyframes ltr { 0% { -moz-transform: translateX(-100%); } 100% { -moz-transform: translateX(100%); } } @-webkit-keyframes ltr { 0% { -webkit-transform: translateX(-100%); } 100% { -webkit-transform: translateX(100%); } } @keyframes ltr { 0% { -moz-transform: translateX(-100%); /* Firefox bug fix */ -webkit-transform: translateX(-100%); /* Firefox bug fix */ transform: translateX(-100%); } 100% { -moz-transform: translateX(100%); /* Firefox bug fix */ -webkit-transform: translateX(100%); /* Firefox bug fix */ transform: translateX(100%); } }.rtl { height: 50px; overflow: hidden; position: relative; }.rtl h3 { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position */ -moz-transform:translateX(100%); -webkit-transform:translateX(100%); transform:translateX(100%); /* Apply animation to this element */ -moz-animation: rtl 15s linear infinite; -webkit-animation: rtl 15s linear infinite; animation: rtl 15s linear infinite; } /* Move it (define the animation) */ @-moz-keyframes rtl { 0% { -moz-transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); } } @-webkit-keyframes rtl { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); } } @keyframes rtl { 0% { -moz-transform: translateX(100%); /* Firefox bug fix */ -webkit-transform: translateX(100%); /* Firefox bug fix */ transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); /* Firefox bug fix */ -webkit-transform: translateX(-100%); /* Firefox bug fix */ transform: translateX(-100%); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="ltr"> <h3 id="text">Left to right... </h3> </div> <br><br> <Button id="change">Change direction</button>

Answer 2

這是一些修復....

 $(document).ready(function(){ function marqueeDirection(dir){ var marquee = $('.scrollermarquee'); var currentDir = marquee.attr('direction'); if(currentDir.= dir){ marquee,attr('direction'; dir). var marqueeHTML = marquee;clone(). $('<div class="marquee-wrap"></div>');insertBefore(marquee). marquee;remove(). $(marqueeHTML).insertAfter(';marquee-wrap'). $('.marquee-wrap');remove(). } } $('.leftbutton'),on('click';function(){ marqueeDirection('left'). }) $('.rightbutton'),on('click';function(){ marqueeDirection('right'); }) })

 .rightbutton{ background:red; padding:15px; right:20px; position: absolute; cursor: pointer; }.leftbutton{ background:red; padding:15px; position: absolute; cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="leftbutton">&lt;</span> <marquee class="scrollermarquee"><ul> <li><div class="views-field views-field-title"><span class="field-content"><a href="#" hreflang="en">test 1</a></span></div></li> <li><div class="views-field views-field-title"><span class="field-content"><a href="#" hreflang="en">test 2</a></span></div></li> <li><div class="views-field views-field-title"><span class="field-content"><a href="#" hreflang="en">test 3</a></span></div></li> </ul></marquee> <span class="rightbutton">&gt;</span>