更新
我想出了一个更好的主意,使用 CSS3 动画。vmouseover
一个类.marquee
将被添加到它<a>
的文本并为其设置动画。动画完成后,一切都会恢复正常。
演示在这里。
HTML
<div data-role="page" id="MessagesPage">
<div data-role="header"> <a href="#HomePage" data-icon="home" data- direction="reverse">Home</a>
<h1 id="ScheduleDayText">Messages</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="MessagesList" data-autodividers="false">
<li date="2013-03-20"><a href="#">Lorem ipsum dolor sit amet.</a>
</li>
<li date="2013-03-20"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet ullamcorper vehicula. Cras eros augue, mollis vitae aliquet auctor, porta.</a>
</li>
<li date="2013-03-19"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et.</a>
</li>
</ul>
</div>
</div>
CSS + 动画
.marquee {
white-space: nowrap !important;
overflow: visible !important;
animation: right-left 5s ease;
-moz-animation: right-left 5s ease;
-webkit-animation: right-left 5s ease;
}
@-moz-keyframes right-left {
0% {
-moz-transform:translateX(0);
}
50% {
-moz-transform:translateX(-50%);
}
100% {
-moz-transform:translateX(-200%);
}
}
/** Webkit Keyframes **/
@-webkit-keyframes right-left {
0% {
-webkit-transform:translateX(0);
}
50% {
-webkit-transform:translateX(-50%);
}
100% {
-webkit-transform:translateX(-200%);
}
}
JS
$("#MessagesList li").on('vmouseover', function (event) {
var text = $(this).find('a').text();
var textlength = $(this).find('a').text().length;
var where = $(this).find('a');
var root = $(this);
if (textlength > 50) {
where.addClass('marquee');
where.css('text-overflow', '');
//$("MessagesList").listview('refresh');
}
$("a").on('animationend animationend webkitAnimationEnd oanimationend MSAnimationEnd', function () {
$(this).removeClass('marquee');
//$("MessagesList").listview('refresh');
$(this).css('text-overflow', 'ellipsis');
});
});
旧答案
好吧,我找到了一种添加<marquee>
到滚动的方法。但是,我没有在手机上测试它。我希望这对你有用。
$("#MessagesList a").on('vmouseover vmouseout', function (event) {
var text = $(this).text();
if (event.type == 'vmouseover') {
$(this).html('<marquee behavior="slide" direction="left">' + text + '</marquee>');
}
if (event.type == 'vmouseout') {
$(this).text(text);
$(this).find('marquee').remove();
}
});