我在 HTML 页面中加载多个 javascript 时遇到问题。这是 txtlzr 和 spin 效果的代码。 。 Spinner 函数名称为“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>
最佳答案
一片困惑
- 将脚本放在头部
- 加载 jQuery 一次
- rr 不是一个函数，而是 jQuery 和普通 JS 的混合体
- HTML 永远不会验证
- 当你有 document.ready 时，不要使用 body onload(即使这样，如果你没有 jQuery，也不要使用 window.onload
试试这个DEMO
<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>
关于javascript - html 中的多个 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12999117/