0

HTML ページに複数の JavaScript を読み込むのに問題があります。これは、txtlzr とスピン効果のコードです。. スピナーの関数名は「rotation」、txtlzrの関数名は「rr」

 <html>
 <head>
   <title></title>
   <script src="http://code.jquery.com/jquery.min.js"></script>
   <script src="http://raw.github.com/krisk/textualizer/master/textualizer.min.js"></script>
   <style type="text/css">
     #txtlzr { font-size: 150px; width: 960px; height:250px; }
    </style>
 </head>
 <body onload: "rr(); rotation()";><div id="txtlzr"> </div> </body>

    <script>
    $(function rr() {
             var list = ['Text 1', 'Hello World', 'Screencasts'];
        var options = {
            duration: 1000,          // Time (ms) each blurb will remain on screen
            rearrangeDuration: 1000, // Time (ms) a character takes to reach its position
            effect: 'random',        // Animation effect the characters use to appear
            //centered: true           // Centers the text relative to its container
        }
        var txt = $('#txtlzr');
        txt.textualizer(list, options); // textualize it!
        txt.textualizer('start'); // start
    });

    </script>
    <img src="https://www.google.com/images/srpr/logo3w.png" id="image">​
    <script  type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
    </script>
    <script type="text/javascript"        src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
    <script type="text/javascript">
    function rotation() {
        $("#image").rotate({
            angle: 0,
            animateTo: 360,
            callback: rotation,
            easing: function (x, t, b, c, d) { // t: current time, b: begInnIng value, c:      change In value, d: duration
                return c * (t / d) + b;
            }
        });
    };
    $(document).ready(function () {
        rotation();
    })
</script>
</html>
4

3 に答える 3

2

巨大な混乱

  1. スクリプトを頭に入れる
  2. jQuery を 1 回ロードする
  3. rr は関数ではなく、jQuery とプレーンな JS の混合物でした
  4. HTMLは決して検証されません
  5. document.ready がある場合は body onload を使用しないでください (jQuery がない場合は、代わりに window.onload を使用してください)

このデモを試す

<html>
  <head>
    <title></title>
      <script src="http://code.jquery.com/jquery.min.js"></script>
      <script src="http://raw.github.com/krisk/textualizer/master/textualizer.min.js"></script>
      <script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
      <script>
        function rotation() {
          $("#image").rotate({
            angle: 0,
            animateTo: 360,
            callback: rotation,
            easing: function (x, t, b, c, d) { // t: current time, b: begInnIng value, c:      change In value, d: duration
                return c * (t / d) + b;
            }
          });
        };

        function rr() {
          var list = ['Text 1', 'Hello World', 'Screencasts'];
          var options = {
            duration: 1000,          // Time (ms) each blurb will remain on screen
            rearrangeDuration: 1000, // Time (ms) a character takes to reach its position
            effect: 'random',        // Animation effect the characters use to appear
            //centered: true           // Centers the text relative to its container
          }
          var txt = $('#txtlzr');
          txt.textualizer(list, options); // textualize it!
          txt.textualizer('start'); // start
        };
        $(document).ready(function () {
          rr();
          rotation();
        });

      </script>
      <style type="text/css">
       #txtlzr { font-size: 150px; width: 960px; height:250px; }
      </style>
    </head>
    <body>
      <div id="txtlzr"> </div> 
      <img src="https://www.google.com/images/srpr/logo3w.png" id="image">​
   </body>
</html>
于 2012-10-21T15:26:49.330 に答える
0

body 要素の終了が早すぎるため、スクリプトが body 内にありません。すべての異なるブラウザーがこれにどのように反応するかはわかりませんが、スクリプトを無視するか、スクリプトが読み込まれる前に load イベントを実行する可能性があります。

いずれにせよ、 body 要素内のすべてを移動すると、機能するはずです。

于 2012-10-21T15:29:50.407 に答える
0

jquery を使用している場合は、onload属性の代わりにこれを使用することをお勧めします。

$(document).ready(function(){
    //your code here
});
于 2012-10-21T15:27:04.263 に答える