最近小菜鸟看了妙味课堂的js视频,学习了一点知识,在这里总结一下,代码写的有点臃肿,刚开始学,不知道咋着优化,看到的高手可以指点一下,呵呵,再此谢过, 效果大概是在这样的: 鼠标划过不同的题目会有不同的图片和解说,可以连接到不同的网站, 分享一下我的代码: 复制代码 代码如下: 无标题文档 <BR><!-- <BR>*{ margin:0; padding:0;} <BR>#container{ height:auto; width:553px; border:1px solid #CCC; position:relative; margin:100px auto;} <BR>#content{ height:266px; width:400px; position:relative; background:#F00; float:left;} <BR>#content p{ color:#FFF; padding:10px; height:30px; width:380px; position:absolute; left:0; bottom:0;} <BR>#content p:nth-child(1){ z-index:2;} <BR>#content p:nth-child(even){ background:#000; opacity:0.5;} <BR>#menu{ height:160px; width:153px; float:right;} <BR>#menu ul{ height:100%; width:100%;} <BR>#menu ul li{ text-align:center;background:#F6F6F6; position:relative;list-style:none; display:block; height:65px; width:153px; border-bottom:1px solid #CCC;} <BR>#menu ul li:last-child{ height:68px; border:none;} <BR>#menu ul li a{ text-decoration:none;color:#000; text-align:center; line-height:65px; font-size:16px;} <BR>#menu ul li a:hover{ color:#F00;} <BR>span{ z-index:2; <BR>height:0; <BR>width: 0; <BR>border-color: transparent #f6f6f6 transparent transparent; <BR>border-width:33px; <BR>border-style: solid; <BR>} <BR>.one{ <BR>position: absolute; <BR>top: 0; <BR>left: -66px; <BR>} <BR>.two{ <BR>position: absolute; <BR>left:-66px; <BR>top:0; <BR>} <BR>.three{ <BR>position: absolute; <BR>left: -66px; <BR>top:0; <BR>} <BR>.four{ <BR>position: absolute; <BR>border-width:34px; <BR>left: -68px; <BR>top:0; <BR>} <BR>img{ border:none;} <BR>--> <BR> <BR>window.onload=function(){ <BR>var obj=document.getElementById('menu').getElementsByTagName('li');/*获取id为menu的容器中的所有li元素*/ <BR>var con=document.getElementById('content').getElementsByTagName('img')[0];/*获取content里面出现的第一个img对象*/ <BR>var hreff=document.getElementById('content').getElementsByTagName('a')[0]; <BR>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')/*存所有连接的数组*/ <BR>var words=new Array('我的小破车','杂草丛生,是希望','小伙伴在张望','钢索通向远方');/*每张图片的解说词存放在数组里*/ <BR>var pContent=document.getElementById('content').getElementsByTagName('p')[0];/*获取存放解说词的p元素*/ <BR>var i=0; <BR>for(i=0;i<obj.length;i++) <BR>{ <BR>obj[i].index=i; <BR>obj[i].onmouseover=function(){ <BR>con.src='images/photo'+(this.index+1)+'.jpg'; <BR>pContent.innerHTML=words[this.index]; <BR>hreff.href=hrefLink[this.index]; <BR>} <BR>} <BR>} <BR> 我的小破车 语文详解 数学详解 php进阶 c++恶补