Question

我正在使用this plugin，我设置了动画autoplay : true。但我想在mouseover上停止播放动画，然后在mouseout roundrr_container上的div上继续播放。我试图编辑代码，但无法完成。能帮帮我吧。

Answer 1

我没有用过这个，但尝试类似：

$(document).ready(function() { 
    $('img').hover(function() {    
        $("#roundrr_container").roundrrwheel(  
        {  
            autoplay: false  
        });
    }, function() {
        $("#roundrr_container").roundrrwheel(  
        {  
            autoplay: true 
        });
    });
});

Answer 2

addyosmani有两个事件。

onImageFocus:

当处于“选择”模式时，在选择下出现图像时执行的功能

onImageBlur:

在“选择”模式下，当图像不在选择范围内时执行的功能

和

hide()//Hide items
show()//show items in roundr

您可以做的是onImageFocus使用hide()事件来停止动画，onImageBlur使用show()来恢复动画效果。

所以请使用像这样的东西

$(document).ready(function() { 
    $('#roundrr_container').hover(function() {    
       $(this).roundrrwheel(  
    {  
        autoplay: false  
    });
}, function() {
    $(this).roundrrwheel(  
    {  
        autoplay: true 
    });
});
});

Answer 3

解决了

解决的问题

<script type="text/javascript">
$(document).ready(function() {                                     $('.my_class').mouseover(function(event)                                                            {                                                                   ap=1;                                                               });                            $('.my_class').mouseout(function(event)                                                              {                                                                   ap=0;                                                                   });
});
</script>`

然后检查jquery.roundrr.js页面

在函数声明之前首先在页面顶部声明变量ap然后将函数switchitems循环中的代码更改为

function switchItems($m, remove, add, posOffset, direction){if(ap==0){
    if(remove==add) add = remove - 1; 
    var $remove = $($m.raditems()[remove]); 
    var toAddto = $m.raditems()[add]; 
    if(remove>add) $remove.insertBefore(toAddto);
    else $remove.insertAfter(toAddto);
    animateWheel($m,posOffset, direction); }};`

在jquery roundrr插件中悬停动画暂停动画

3 个答案: