如何立即更改字幕onclick的方向 [英] How to change direction of marquee onclick immediately
本文介绍了如何立即更改字幕onclick的方向的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在这里,我试图通过单击方向按钮来更改滚动选取框的方向. 确切的是,在IE和Firefox中,它按预期运行正常,当我单击方向"按钮时,选取框会立即更改其方向.但是在chrome中,这不是预期的,而是当我单击chrome中的选取框时,该选取框完成了其循环,然后开始沿单击的方向流动.
Here i'm trying to change the scrolling marquee direction on click on the direction buttons. Exactly whats happening is that in IE and Firefox its working perfectly as expected, when i click on the direction button, the marquee immediately changes its direction. but in chrome its not expected, instead when i click the marquee in chrome, the marquee completes its cycle and then starts flowing in the direction clicked.
这是我到目前为止所做的代码.
here is the code for what i have done so far.
$(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"><</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">></span>
推荐答案
以下是一些解决方法....
Here is some fix....
$(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"><</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">></span>
这篇关于如何立即更改字幕onclick的方向的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文