1. ホーム
  2. 質問と答え
  3. javascript horizo​​ntal scroll text

javascript horizo​​ntal scroll text

2016-07-22 9 views
0

私のアプリで横スクロールが必要です。複数の例がありますが、私の必要性に合ったものが見つかりました。しかし、私はそれを試してみると、それはちょうどそれがうまくいきません。見て、問題が何であるかを教えてください：コンソールに誤りがない javascript horizo​​ntal scroll text

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div.marquee { 
    white-space:no-wrap; 
    overflow:hidden; 
} 
div.marquee > div.marquee-text { 
    white-space:nowrap; 
    display:inline; 
    width:auto; 
} 
</style> 
<script> 
var marquee = $('div.marquee'); 
console.log(marquee); 
marquee.each(function() { 
    var mar = $(this),indent = mar.width(); 
    mar.marquee = function() { 
     indent--; 
     mar.css('text-indent',indent); 
     if (indent < -1 * mar.children('div.marquee-text').width()) { 
      indent = mar.width(); 
     } 
    }; 
    mar.data('interval',setInterval(mar.marquee,1000/60)); 
}); 
</script> 
</head> 
<body> 
<div class='marquee'> 
    <div class='marquee-text'> 
     Testing this marquee function 
    </div> 
</div> 

</body> 
</html>

更新：あなたはあなたのウェブサイトでのjQueryを含めるのを忘れて enter image description here

出典

2016-07-22 dmx

+0

まあ....古い ''タグを使うことができます。 –

+4

@GavinThomasそれは1998年ではありません; は廃止されています（http://caniuse.com/#search=marquee）、それを使わないでください –

+0

1）古いものとの互換性を除くアニメーションには 'setInterval'を使わないでくださいブラウザ、 'requestAnimationFrame'とCSSアニメーションはより信頼性があります。 2）フレームごとに 'text-indent'や' width'のようなプロパティを検索して設定すると、パフォーマンスが悪くなります。トランスフォームが優れています。 3）マーキーが本当に必要ですか？ ;） – gcampbell

答えて

4

。それ以外の場合は、期待通りに動作します（少なくとも私はそう考えています）。

$(document).ready(function() { 
 
    var marquee = $('div.marquee'); 
 
    console.log(marquee); 
 
    marquee.each(function() { 
 
     var mar = $(this),indent = mar.width(); 
 
     mar.marquee = function() { 
 
      indent--; 
 
      mar.css('text-indent',indent); 
 
      if (indent < -1 * mar.children('div.marquee-text').width()) { 
 
       indent = mar.width(); 
 
      } 
 
     }; 
 
     mar.data('interval',setInterval(mar.marquee,1000/60)); 
 
    }); 
 
});
div.marquee { 
 
    white-space:no-wrap; 
 
    overflow:hidden; 
 
} 
 
div.marquee > div.marquee-text { 
 
    white-space:nowrap; 
 
    display:inline; 
 
    width:auto; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='marquee'> 
 
    <div class='marquee-text'> 
 
     Testing this marquee function 
 
    </div> 
 
</div>

編集：は、要素がロードされることを保証するために$(document).ready()を追加しました。

出典

2016-07-22 13:29:57 Dygestor

1

実行スクリプトを実行する前にページを待機します。

<script> 
$(document).ready(function(){ 
var marquee = $('div.marquee'); 
console.log(marquee); 
marquee.each(function() { 
    var mar = $(this),indent = mar.width(); 
    mar.marquee = function() { 
     indent--; 
     mar.css('text-indent',indent); 
     if (indent < -1 * mar.children('div.marquee-text').width()) { 
      indent = mar.width(); 
     } 
    }; 
    mar.data('interval',setInterval(mar.marquee,1000/60)); 
}); 
}); 
</script>

のでthisの質問を参照し、ヘッダーに <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> を忘れてはいけません。

出典

2016-07-22 14:20:30 dmx

関連する問題

 関連する問題