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:330pxから css コードを削除しました。要素の幅の.aaa制御を追加しました(クラス要素をホバリングしている間)。.aaa.aaa

これがあなたの解決策です： jsfiddle.net/yVtVe/22/

于 2013-03-28T13:43:53.577 に答える