我有朋友提供的jQuery代码,我不知道如何使它工作.我被告知我可以将其保存为html,因为代码有一个引用作为外部但是当我这样做时它没有用.
这是代码:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<title>tyu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#tintin
{
position:relative;
color:white;
font-size:18pt;
font-style:bold;
font-family:Calibri;
width:800px;
height:500px;
}
#text
{
top:0px;
position:absolute;
filter:alpha(opacity=100);
opacity:100;
left:600px;
}
</style>
<script type="text/javascript">
//var txt=['text 1','text 2', 'text 3', 'text 4', 'text 5', 'text 6', 'text 7', 'text 8', 'text 9', 'text 10'], init=0,i=0,k=0,speed=40,el;
//var loopCount=1000;
//var j=0;
//var padd = 50; //set this to an approriate increment
//function fade(){
//init==0?i++:i--;
//el.filters?el.style.filter='alpha(opacity='+i+')':el.style.opacity=i/100;
//el.firstChild.nodeValue=txt[k];
//if(i==100)init=1;
//if(i==0) {init=0;k++;j++;
//el.style.paddingLeft=50*k;
//}
//if(k==txt.length)k=0;
//if (j<loopCount) setTimeout('fade()',speed);
//}
//window.onload=function(){
//el=document.getElementById('tintin');
//fade();
//}
$(document).ready(function () {
var txt = ['text 1', 'text 2', 'text 3', 'text 4', 'text 5', 'text 6', 'text 7', 'text 8', 'text 9', 'text 10'];
var k = -1;
fade();
function fade() {
k++;
if (k == 9) {
k = 0;
}
$("#text").text(txt[k]);
$("#text").css("left", (600 - k * 100) + "px");
$("#text").fadeTo(1, 100);
console.log((600 - k * 100) + "px");
console.log($("#text").css("left"));
$("#text").css("top", (k * 100) + "px");
var nl = "-=" + (k*100) + "px";
console.log(nl);
var nt = "-=" + (300 - k*100) + "px";
var op = Math.floor((-($("#text").css("left").replace("px", "") - 600 - k * 100)) / 600) + .3;
$("#text").animate({
left: "300px", //
opacity: op,
top: "300px"
}, 1000);
$("#text").animate({
left: nl, //
opacity: 0,
top: nt
}, 1000);
setTimeout(fade, 2000);
}
});
</script>
</head>
<body>
<div id="tintin" style="color:#fff !important; background-color:blue;">
<div id="text">
</div>
</div>
</body>
</html>
T.J*_*der 15
在一般的,jQuery代码(也就是使用jQuery库,JavaScript代码)在Web浏览器上运行.您可以使用script标记在Web浏览器中运行JavaScript代码,代码实际位于标记中:
<script>
alert("I'm some JavaScript code");
</script>
...或者代码在单独的文件中并且标记引用文件:
<script src="myfile.js"></script>
(请注意,结束标记是必需的,您不能将其写为自闭项标记,如<script src="myfile.js"/>.)
由于您使用的是jQuery,因此必须在使用它之前包含jQuery库文件:
<script src="jquery.min.js"></script>
或者,如果您从像谷歌这样的CDN中使用它:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
当页面"准备好"时你想要运行的代码你可以放入一个jQuery在页面"准备好"时会调用的函数:
<script>
jQuery(function() {
jQuery("<p>This paragraph added via jQuery</p>").appendTo(document.body);
});
</script>
或者,您可以将script标记放在页面的最底部,就在结束</body>标记之前; 如果你这样做,最好将你的代码包装在一个函数中,这样你就不会不必要地创建全局符号:
<script>
// This creates a function to contain any symbols that you create, then
// immediately calls it. As written, it assumes it's at the very bottom of
// the page and so things are basically ready.
(function() {
jQuery("<p>This paragraph added via jQuery</p>").appendTo(document.body);
})();
</script>
jQuery的主要功能jQuery是,jQuery或者可以使用$,所以上面可能是:
<script>
$(function() {
$("<p>This paragraph added via jQuery</p>").appendTo(document.body);
});
</script>
...但正如$其他库所使用的那样,有一种方法可以使jQuery不使用该$符号.我提到这个,所以你会明白为什么你会看到jQuery一些代码,但$在其他代码中.
这是使用jQuery的完整示例:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Test Page</title>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<input type='button' id='theButton' value='Click Me'>
<script>
jQuery(function() {
// Hook the button click
jQuery("#theButton").click(function() {
jQuery("<p>This paragraph was added via jQuery.</p>").appendTo(document.body);
});
});
</script>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
18191 次 |
| 最近记录： |