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


Posted in Javascript onJune 17, 2013

最近小菜鸟看了妙味课堂的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 id="container"> 
<div id="content"> 
<p>我的小破车</p> 
<p></p> 
<a href="http://www.baidu.com"><img src="images/photo1.jpg" width="400" height="266"/></a></div> 
<div id="menu"> 
<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>
Javascript 相关文章推荐
jquery高效反选具体实现
May 05 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 #Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 #Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 #Javascript
js二级地域选择的实现方法
Jun 17 #Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 #Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 #Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 #Javascript
You might like
php中用文本文件做数据库的实现方法
2008/03/27 PHP
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
php 求质素(素数) 的实现代码
2011/04/12 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
python调用cmd复制文件代码分享
2013/12/27 Python
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
Python实现的检测网站挂马程序
2014/11/30 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
python制作填词游戏步骤详解
2019/05/05 Python
Python logging设置和logger解析
2019/08/28 Python
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
《我要的是葫芦》教学反思
2014/02/23 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
入党推优材料
2014/06/02 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
出售房屋协议书范本
2014/10/06 职场文书
环保主题班会教案
2015/08/13 职场文书