如何在悬停时制作选框 - 文本滚动和无限循环,返回到开始位置?

时间:2014-07-10 14:23:35

标签: javascript jquery css

这是我的jsfiddle http://jsfiddle.net/9XdV7/,如何在悬停时进行 - 文本滚动和无限循环,返回到开始位置?现在它不能无限循环滚动

for (var i = 0; i < $('.list').length; i++) {
    var this_el = $('.list').eq(i);
    var interval = null;

    $(this_el).hover(function() {
      var that = $(this);
      var this_indent = 0;

      interval = setInterval(function(){
        this_indent--;
        if (this_indent == -($(that).find('.text').width())) {
          clearInterval(interval);
          this_indent = 0;

          // how to loop scroll
        }
        $(that).css('text-indent', this_indent);
      },20);

    }, function() {
        clearInterval(interval);
        $(this).css('text-indent', 0);
    });
}

html&amp; CSS

<div class="list"><div class="text">stringstringstringstring</div></div>
<div class="list"><div class="text">stringstringstring</div></div>
<div class="list"><div class="text">stringstringstringstring</div></div>    

.list {
width: 100px;
overflow: hidden;
white-space:nowrap;

height: 15px;
background-color: red;
margin: 10px;
}
.text {
text-align: left;
background-color: purple;
display: inline;
}

2 个答案:

答案 0 :(得分:2)

这是你正在寻找的吗? Fiddle

  1. 我用mouseenter和mouseleave代替悬停。 $(elem).on("mouseenter",function() { ... });
  2. 我将属于该元素的标识符存储在其数据中:$(this).data("interval",interval);
  3. 我添加了

    if(this_indent < -150) {
       this_indent = 100;
    }
    

    使效果无限。 -150是我从开发人员工具获得的值。 100是纯粹的测试。

答案 1 :(得分:0)

这仍然需要一些调整来确定循环点,但我认为它基本上是你想要的:

$(function() {
    for (var i = 0; i < $('.list').length; i++) {
        var this_el = $('.list').eq(i);
        var interval = null;

        $(this_el).hover(function() {
          var that = $(this);
          var this_indent = 0;
          interval = setInterval(function(){
            this_indent--;
            if (this_indent < that.width() * -1)
                this_indent = that.width();
            that.css('text-indent', this_indent);
          },20);            

        }, function() {
            clearInterval(interval);
            $(this).css('text-indent', 0);
        });
    }

});

它基于div的宽度进行循环,而不是文本的实际长度。如果您需要文字宽度,可以在此处查看:Calculating text width