html代码
因为javascript逻辑顺序比较强,所以要考虑引用js的位置
css代码
body {font-size:12px;}
div{ width:950px; height:800px; margin:0 auto; border:solid 1px #d0d0d0;}
li{ list-style-type:none;border:solid 1px #d0d0d0; float:left; margin: 1px; padding:0 5px; height:12px; width:10px;}
/*div{ width:6px; height:14px; margin:1px; padding:0 5px; float:left; border:solid 1px #d0d0d0;}*/
javascript代码部分:
window.onload=init;
var element= document.getElementsByTagName("li");
function init() //初始化背景色
{
var element= document.getElementsByTagName("li");
for(var i=0; i{
var k=i+1;
element[i].style.background="url(images/"+k.toString()+".jpg)";
}
}
function addclick()
{
for(var i=0; i{
var k=i+1;
if(window.attachEvent)
element[i].attachEvent("onclick", new Function("bgchage("+k+");")); //创建事件不能直接.onclick而需要使用.attachEvent("事件",new Function("被调函数("+参数+");"));IE6通过
else
element[i].addEventListener("click", new Function("bgchage("+k+");"),false);
}
}
function bgchage(t) //根据色块改变背景色
{
document.getElementsByTagName("body")[0].style.background="url(images/"+t+".jpg)";
}
addclick();
js部分要注意写事件的兼容,而且其实jq的思路就是将很多功能写成插件的形式供自己使用,用javascript写,可以写自己的类库,供反复使用,也无需承担jquery类库的负担。其实我也不是说jquery不好,从大的方面来说,jquery的插件大小影响并不大,前端事件看了百度前端交流会的视频,发现人家的类库也都是js自己写的,这给了我继续学习js的动力。
Stellungnahme:Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn