最近小菜鸟看了妙味课堂的js视频,学习了一点知识,在这里总结一下,代码写的有点臃肿,刚开始学,不知道咋着优化,看到的高手可以指点一下,呵呵,再此谢过,
效果大概是在这样的:
鼠标划过不同的题目会有不同的图片和解说,可以连接到不同的网站,
分享一下我的代码:
代码如下:
无标题文档 window.onload=function(){
var obj=document.getElementById('menu').getElementsByTagName('li');/*获取id为menu的容器中的所有li元素*/
var con=document.getElementById('content').getElementsByTagName('img')[0];/*获取content里面出现的第一个img对象*/
var hreff=document.getElementById('content').getElementsByTagName('a')[0];
var hrefLink=new Array('http://www.baidu.com','http://weibo.com/2622932383/profile?topnav=1&wvr=5','http://www.taobao.com','http://google.com.hk')/*存所有连接的数组*/
var words=new Array('我的小破车','杂草丛生,是希望','小伙伴在张望','钢索通向远方');/*每张图片的解说词存放在数组里*/
var pContent=document.getElementById('content').getElementsByTagName('p')[0];/*获取存放解说词的p元素*/
var i=0;
for(i=0;i
{
obj[i].index=i;
obj[i].onmouseover=function(){
con.src='images/photo'+(this.index+1)+'.jpg';
pContent.innerHTML=words[this.index];
hreff.href=hrefLink[this.index];
}
}
}
script>
我的小破车
语文详解
数学详解
php进阶
c++恶补