jQuery 鼠标悬停时水平滚动文本
我非常感谢基于以下图像的一些帮助：
此外，我正在尝试完成（无限）滚动 div.title-holder 中的绿色文本。我的目标是仅在 mouseOver 上开始滚动，然后在 div.container 的 mouseOut 上重置。我以为只要使用一点 CSS 和 jQuery，这就是一个简单的任务，但显然并非如此。这是我的 HTML、CSS 和随附的 JS：
<div class="container">
<div class="title-holder">
<a href="somelink.html">long text that needs to scroll</a>
</div>
<img src="someimage.jpg" />
</div>
相关 CSS：
div.title-holder {
width:130px;
height:20px;
overflow:hidden;
white-space:no-wrap;
text-align:center;
}
div.title-holder a {
}
jQuery JS：
$('div.container').hover(
function () {
var scrollingWidth = $(this).find('div.title-holder').find('a').width();
$(this).find('div.title-holder').stop(true, true).animate({scrollLeft: scrollingWidth}, { duration: 5000, easing: 'swing' });
},
function () {
$(this).find('div.title-holder').stop(true, true).animate({scrollLeft: 0}, { duration: 5000, easing: 'swing' });
}
);
现在，这可以正常工作，除了两个问题：
- 它不会无限滚动，并且
- 滚动操作非常非常跳跃/抖动
我真的希望有人过去有过类似的要求，并且能为我解答这个问题。 谢谢！
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我更喜欢使用 setInterval。也许这个 fiddle 会有所帮助。
I prefer using setInterval. Maybe this fiddle will help.
不要这样做！像这样滚动文本并分发信息是一个巨大的，可用性 问题。
使用它，你会惹恼页面 80% 的
受害者用户，大多数人也不会阅读/查看或忽略标题。编写标题时牢记 前 2 个单词，如果它们绝对有效，则像这样显示它们一定是太长了。 ：
...“更多”链接会弹出一个带有完整标题的div。
Don't do this! Scrolling text and doling information out like that is a huge, usability problem.
Use that and you will annoy 80% of the page's
victimsusers, and most will not read/see, or will ignore, the title as well.Write titles with the First 2 Words in mind, and display them like this if they absolutely must be too long. :
... where the "more" link pops up a div with the full title.
开始
工作演示
希望这对您有帮助。
Here you go
Working demo
Hope this helps you.
你的 CSS 有问题！让它发挥作用非常简单。只需添加一行 CSS：
这是完整的代码： http://jsfiddle.net/sMmkX/115 /
There's a problem with your CSS! It's veery simple to make it work. Just adding one line of CSS:
Here it is, the complete code: http://jsfiddle.net/sMmkX/115/