Javascript 带滚动的jQuery移动列表视图描述

我有一个长标题的listview，它会自动隐藏在小屏幕上，并用

如果整个标题没有显示在屏幕上，我不确定是否可以使这些长标题的描述滚动

信息

---

我们可以让标题在鼠标悬停时向左或向右滚动，以便用户可以在单击链接或按钮之前阅读标题。

这并不完全是您想要的，但当您将鼠标悬停在列表上时，它将显示完整内容

$("#MessagesList a").bind('hover',function(event){
 $("#MessagesList a").css('white-space', 'nowrap');
 $(this).css('white-space', 'normal');
 $("#MessagesList").listview("refresh");
});

---

这是一个实时的小提琴更新

我想出了一个更好的主意，使用CSS3动画。在

vmouseover

上，将向

HTML

JS


旧答案

嗯，我找到了一种方法，可以将
添加到滚动中。然而，我没有在手机上测试它。我希望这对你有用

$("#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();
 }
});

$（“#消息列表a”）。在（'vmouseover vmouseout'，函数（事件）{
var text=$（this.text（）；
如果（event.type=='vmouseover'）{
$（this.html（“”+text+“”）；
}
如果（event.type==“vmouseout”）{
$（此）.text（文本）；
$（this.find（'marquee'）.remove（）；
}
});
滚动不删除包裹和
椭圆
；）@Omar datz为什么我在回答中提到的
完全不是你想要的
：）@MayuMayooresan谢谢兄弟，我希望这能解决问题！hahaThis可以是一个解决方案，但在这种情况下使用字幕有缺点，因为在这种情况下字幕也适用于小标题&其次，它从最右边开始字幕，而我希望字幕从左边开始。无论如何，我感谢你的帮助。我会看看我是否可以使用和滑块效果，因为现在我已经从你的方法的想法。再次感谢我的+1。它可以调整，比如如果文本长度超过50个字符，它会滚动，否则不会@KnowledgeSeeker@Omar：正是我在评论中的意思。我会接受你的回答，因为这是我在问题中提出的问题。谢谢@KnowledgeSeeker我正在进行一些调整，以使其按你的意愿工作：）Jazakallah khair bro..检查更新的答案。
<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>

.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%);
 }
}

$("#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');
 });
});

$("#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();
 }
});