[英]Marquee on mouseover and overflow
I've searched high and low for a tutorial but I can't find one. 我在高低寻找一个教程,但找不到。
It is really a simple task that I see in lots of websites. 在许多网站上看到的,这确实是一个简单的任务。
Pretty much like I have a menu, with a set width, and if my link is extra long, I want the overflow to be hidden, and when the user mouseovers the link, it will marquee the rest of the text. 就像我有一个具有固定宽度的菜单一样,如果我的链接超长,我希望隐藏溢出,并且当用户将鼠标悬停在链接上时,它将隐藏其余文本。
It really shouldnt be this hard cuz I see it in lots of websites. 我真的不应该在很多网站上看到这种困难。
I really want to avoid using the marquee tag and go for javascript instead but my javascript is quite horrible and jquery is absolutely impossible to follow. 我真的想避免使用marquee标记,而是使用javascript,但是我的javascript太可怕了,jQuery绝对不可能遵循。
Any suggestions? 有什么建议么?
Try this: 尝试这个:
http://jsfiddle.net/bryanjamesross/vsQFE/4/ http://jsfiddle.net/bryanjamesross/vsQFE/4/
The trick is that you will need individual container elements with overflow:hidden
and set widths for each link, otherwise the whole container will scroll, instead of each link. 诀窍是,您将需要每个容器元素具有overflow:hidden
和为每个链接设置宽度,否则整个容器将滚动而不是每个链接滚动。 In my example, I contained each <a>
inside <li>
tags that had set widths and overflow:hidden
. 在我的示例中,我将每个<a>
包含在<li>
标记内,这些标记具有设置的宽度和overflow:hidden
。
Then it's just a matter of hooking up the jQuery and animating correctly. 然后,只需挂接jQuery并正确设置动画即可。
edited : fixed an animation bug, and made a the code a bit easier to follow 编辑 :修复了动画错误,并使代码更易于理解
Just add this to your element 只需将其添加到您的元素
onmouseover="this.style.overflow=''" onmouseout="this.style.overflow='hidden'
Did it help? 有帮助吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.