1

我正在开发网站的移动版本，并且需要在文本长于某些像素时添加滚动功能。我正在尝试在我的项目中实现以下逻辑

滚动示例的来源

到目前为止，我想在我的示例中实现相同的功能，但我的基本结构将保持不变，我只想在屏幕很小的情况下滚动文本以显示完整的标题。

$("div.aaa h2").each(function(){    
  var m = $(this).width();
  var n = $(this).find("div.aaa h2").width();
  var o = m - n;
  var z = $(this).find("div.aaa h2");

    $(this).mouseenter(function(){
        //alert ("title: " + m + " text: " + n + " diff: " + o);
        if (n > m) {
             z.animate({
             left: o                    
         }, 2000);
       }
    }).mouseleave(function(){
            z.animate({
            left: "0"
         }, 2000);    
    });        

});

我对任何有效的解决方案持开放态度并检测完整标题是否可见，那么它应该为那些标题较长的元素实现滚动。

我尝试的其他方法也失败了，因为它滚动了所有元素而不是我鼠标悬停的元素

http://jsfiddle.net/yVtVE/21/

4

1 回答 1

3

在 animateTitle 函数中添加了额外的参数“elem”，elem 在悬停事件完成时定义。我从课堂上删除了width:330pxCSS 代码。添加了对元素宽度的.aaa额外控制（在悬停类元素时）。.aaa.aaa

这是您的解决方案： jsfiddle.net/yVtVe/22/

于 2013-03-28T13:43:53.577 回答