Question

我有以下代码，想要暂停鼠标上的自动收报机，并在鼠标退出时恢复，提前感谢： - ）

<script type="text/javascript">
// Initialize the plugin with no custom options
$(document).ready(function () {
    var left = 0;
$(document).ready(function(e){
function tick() {
        left++;
        $(".ticker").css("margin-left", -left + "px");
        setTimeout(tick, 16);
  }

  tick();
});
});
</script>

Answer 1

这就是你追求的吗？

您可以在鼠标进入div时触发悬停事件时清除超时，并在鼠标离开div时再次设置超时。

＆＃13;

database.properties.in

＆＃13;

var left = 0;
var timer;

function tick() {
  left++;
  $(".ticker").css("margin-left", -left + "px");
  timer = setTimeout(tick, 16);
}

$(".ticker").hover(

  // This is called when the mouse enters the div
  function() {
    clearTimeout(timer);
  },
  // This is called when the mouse leaves the div
  function() {
    setTimeout(tick, 16);
  }
);

tick();

＆＃13;

Answer 2

您可以使用 clearInterval（）方法查找解决方案。这是一个工作片段：

＆＃13;

.ticker {
  height: 50px;
  width: 50px;
  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ticker">Demo</div>

＆＃13;

import ast
q = DBReports.objects.all().filter(name__contains = name1)  
q = (q.values_list(columnName))
users_list = ast.literal_eval(q[0][0])

＆＃13;

希望这是你想要的：）

Answer 3

我为你创建了jquery插件

Jquery的：

$(function(){
    $.fn.ticker = function(options){
        var defaults = {
            count: 0
        };

        options = $.extend(true,options,defaults);

        var tickerEle = this;
        var tickerInterval;

        var start = function(){
            tickerInterval = setInterval(function(){
                $(tickerEle).text(options.count);
                options.count++;
            },100);
        };

        var stop = function(){
            clearInterval(tickerInterval);
        };
        start();
        $(tickerEle).hover(function(){
            stop();
        },function(){
            start();
        });

        return tickerEle;
    };
}());

HTML：

<span class="tickerCount"></span>

<script>
$(function(){
   $(".tickerCount").ticker();
});
</script>

的CSS：

.tickerCount{
    padding: 20px;
    background-color: red;
}

根据您的要求和DEMO

更改代码

在悬停时暂停jquery自动收报机并在鼠标移出时继续

3 个答案:

Jquery的：

HTML：

的CSS：