现在纯粹用js的人越来越少了,更多的人喜欢jquery,可使我还是喜欢javascript,下面给出一个用javascript写的背景切换的小例子,各位大虾不要骂,只是写给自己看的,也供js事件的产考依据。
html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>背景切换</title> <link href="css/bgchage.css" type="text/css" rel="Stylesheet" /> </head> <body> <div><ul><li></li><li></li><li></li><li></li></ul></div> <!-- <div>1</div><div>2</div><div>3</div><div>4</div>--> </body> <script src="js/bgchage.js" type="text/javascript" ></script> </html>
css代码

1 body {font-size:12px;}
2 div{ width:950px; height:800px; margin:0 auto; border:solid 1px #d0d0d0;}
3 li{ list-style-type:none;border:solid 1px #d0d0d0; float:left; margin: 1px; padding:0 5px; height:12px; width:10px;}
4 /*div{ 6px; height:14px; margin:1px; padding:0 5px; float:left; border:solid 1px #d0d0d0;}*/
5

1 window.onload=init;
2 var element= document.getElementsByTagName("li");
3 function init() //初始化背景色
4 {
5
6 var element= document.getElementsByTagName("li");
7 for(var i=0; i<4;i++)
8 {
9 var k=i+1;
10 element[i].style.background="url(images/"+k.toString()+".jpg)";
11 }
12 }
13
14
15 function addclick()
16 {
17 for(var i=0; i<4;i++)
18 {
19
20 var k=i+1;
21
22 if(window.attachEvent)
23 element[i].attachEvent("onclick", new Function("bgchage("+k+");")); //创建事件不能直接.onclick而需要使用.attachEvent("事件",new Function("被调函数("+参数+");"));IE6通过
24 else
25 element[i].addEventListener("click", new Function("bgchage("+k+");"),false);
26
27 }
28 }
29
30 function bgchage(t) //根据色块改变背景色
31 {
32 document.getElementsByTagName("body")[0].style.background="url(images/"+t+".jpg)";
33 }
34
35 addclick();
36
37