js实现的切换面板实例代码

网络编程 JavaScript javascript技巧 分类:[default] 更新日期: 2016-06-22
切换面板具备功能:鼠标划过不同的题目会有不同的图片和解说,可以连接到不同的网站,实例代码如下,感兴趣的朋友可以参考下哈
最近小菜鸟看了妙味课堂的js视频,学习了一点知识,在这里总结一下,代码写的有点臃肿,刚开始学,不知道咋着优化,看到的高手可以指点一下,呵呵,再此谢过,
效果大概是在这样的:
js实现的切换面板实例代码
 
鼠标划过不同的题目会有不同的图片和解说,可以连接到不同的网站,
分享一下我的代码:
代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
*{ margin:0; padding:0;}
#container{ height:auto; width:553px; border:1px solid #CCC; position:relative; margin:100px auto;}
#content{ height:266px; width:400px; position:relative; background:#F00; float:left;}
#content p{ color:#FFF; padding:10px; height:30px; width:380px; position:absolute; left:0; bottom:0;}
#content p:nth-child(1){ z-index:2;}
#content p:nth-child(even){ background:#000; opacity:0.5;}
#menu{ height:160px; width:153px; float:right;}
#menu ul{ height:100%; width:100%;}
#menu ul li{ text-align:center;background:#F6F6F6; position:relative;list-style:none; display:block; height:65px; width:153px; border-bottom:1px solid #CCC;}
#menu ul li:last-child{ height:68px; border:none;}
#menu ul li a{ text-decoration:none;color:#000; text-align:center; line-height:65px; font-size:16px;}
#menu ul li a:hover{ color:#F00;}
span{ z-index:2;
height:0;
width: 0;
border-color: transparent #f6f6f6 transparent transparent;
border-width:33px;
border-style: solid;
}
.one{
position: absolute;
top: 0;
left: -66px;
}
.two{
position: absolute;
left:-66px;
top:0;
}
.three{
position: absolute;
left: -66px;
top:0;
}
.four{
position: absolute;
border-width:34px;
left: -68px;
top:0;
}
img{ border:none;}
-->
</style>
<script type="text/javascript">
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.length;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>
</head>
<body>
<div >
<div >
<p>我的小破车</p>
<p></p>
<a href="http://www.baidu.com"><img src="images/photo1.jpg" width="400" height="266"/></a></div>
<div >
<ul>
<li><a href="#">语文详解</a><span class="one"></span></li>
<li><a href="#">数学详解</a><span class="two"></span></li>
<li><a href="#">php进阶</a><span class="three"></span></li>
<li><a href="#">c++恶补</a><span class="four"></span></li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>

> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • Flex输出文件到本地的两种方法
    flex中输出文件到本地有两种方法分别是File和FielRefreence,下面的实例代码,大家可以看看在flex中输出文件到本地目前我用到两种方法,分别是File和FielRefreence 例子: var exportString:String = "这就是一个测试" 1.File输出 代码如下:var ff:File = File ...
  • 将PHP的session数据存储到数据库中的代码实例
    这里我们将分享两个将PHP的session数据存储到数据库中的代码实例,分别针对PostgreSQL与MySQL,需要的朋友可以参考下一个开发环境有多个网站,需要使用不同的session,解决方案很多.不过这次也高大上一把,用数据库存,方便以后扩展. PostgreSQL版首先是数据库的部分 --drop table php_session create u ...
  • ASP.NETWebApi2实现多文件打包并下载文件的实例
    ASP.NETWebApi2实现多文件打包并下载文件的实例
    这篇文章主要介绍了ASP.NET Web Api 2利用ByteArrayContent和StreamContent实现多文件打包并下载的方法,提供源码下载,需要的朋友可以参考下.最近由于工作和个人事务,站点也好久没更新了,但这并不影响我对.NET的热情.站点的更新工作还是得想办法抽时间来完成的. 今天利用中午的时间来写一篇关于Asp.Net Web Api ...
  • 详解表单验证正则表达式实例(推荐)
    这篇文章主要介绍了详解表单验证正则表达式实例推荐的相关资料,非常不错,具有参考借鉴价值,特此分享到平台供大家参考验证:!reg.test(value) 邮箱: 代码如下:reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/i; 不包含中文: 代码如下:r ...
  • Linux上安装Python的PIL和Pillow库处理图片的实例教程
    这里我们来看一下在Linux上安装Python的PIL和Pillow库处理图片的实例教程,包括一个使用Pillow库实现批量转换图片的例子:安装正常情况,只需 pip install PIL==1.1.7 或者 pip install Pillow==2.9.0 即可.但需留意安装后的输出安装完成后,需留意输出: *** TKINTER support no ...
  • php好代码风格的阶段性总结
    这篇文章主要介绍了php好代码风格,阶段性总结了php程序设计中变量.函数.参数的相关使用注意事项与编程技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文总结了php好代码的风格,分享给大家供大家参考,具体如下: 1.避免使用魔数 if($age<18){ } 这个18不太明白为什么要这样子. 可以将28定义在一个变量里面,这个变量命名表明了这个值的 ...
猜你喜欢