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 一次
  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

如果您使用的是 jquery，最好使用 this 而不是onload属性：

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

您过早结束正文元素，因此脚本不在正文中。我不确定所有不同的浏览器对此有何反应，但它们可能会忽略脚本，或者在加载脚本之前运行 load 事件。

无论哪种方式，移动 body 元素内的所有内容，它应该可以工作。

于 2012-10-21T15:29:50.407 回答