这是我的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;
}
答案 0 :(得分:2)
这是你正在寻找的吗? Fiddle
$(elem).on("mouseenter",function() { ... });
$(this).data("interval",interval);
我添加了
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