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 相关文章推荐
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
javascript动态添加checkbox复选框的方法
Dec 23 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 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数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
javascript 自定义事件初探
2009/08/21 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
简述Python中的面向对象编程的概念
2015/04/27 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
Python File readlines() 使用方法
2018/03/19 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
八一演出活动方案
2014/02/03 职场文书
治超工作实施方案
2014/05/04 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库