我在我运行的网站上有一个twitter Feed.然而,它在小屏幕上被切断.我有一个足够高的一个酒吧,用于1行文本,其中有最新的推文.如果太短,我希望tweet可以省略或淡出.但是在悬停的时候,我希望文本向左滑动,从而露出隐藏的部分.
当您突出显示具有比屏幕宽的标题的歌曲时,此效果将用于iPod classic. (我希望你明白我要去做什么.)
我只是好奇我会如何执行这样的事情?如何强制文字停留在一行?
解决方法
这是一个相当简单的方法.首先,设置一个包含你的长文本的div:
<div id="container"> Here is the long content,long long content. So long. Too long. </div>
您可以使用一些css来自动处理截断和省略号:
div#container { /* among other settings: see fiddle */ width: 200px; overflow: hidden; white-space: Nowrap; text-overflow: ellipsis; }
如果然后确定内容的本机,未经截断的宽度,则可以使用jQuery的.animate()以一致的速度移动该内容 – 即使您不知道在运行时之前的文本长度(如案例与twitter饲料).这是一个有机械的测量方法:
var true_width = ( function(){ var $tempobj = $('#container') // starting with truncated text div container .clone().contents() // duplicate the text .wrap('<div id="content"/>') // wrap it in a container .parent().appendTo('body') // add this to the dom .css('left','-1000px'); // but put it far off-screen var result = $tempobj.width(); // measure it $tempobj.remove(); // clean up return result; })();
最后一些动画:
$('#container').one('mouseenter',function(){ // perhaps trigger once only var shift_distance = true_width - $(this).width(); // how far to move var time_normalized = parseInt(shift_distance / 100,10) * 1000; // speed $(this).contents().wrap('<div id="content">').parent() // wrap in div .animate({ left: -shift_distance,right: 0 },time_normalized,'linear'); // and move the div within its "viewport" });
不管文本的长度,您将获得每100像素约一秒的一致速度(根据需要进行调整).将鼠标悬停上的内容重置或倒带作为练习.这种方法有一些天真的一点,但可能会给你一些想法.
原文地址:https://www.jb51.cc/css/214294.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。