通过onmouseover选项卡实现img图片的变化


Posted in Javascript onFebruary 12, 2014
<!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>选项卡实现img图片的变换</title> 
<style type="text/css"> 
#main{ height:420px; width:400px;} 
#head{ 
width:400px; 
height:52px; 
position:absolute; 
left:10px; 
top: -12px; 
background-color:green; 
} 
#head li{ float:left; list-style:none; width:85px;} 
#content{ 
width:400px; 
height:350px; 
background-color:#FC6; 
text-align:center; 
position:absolute; 
top:36px; 
left: 10px; 
} 
</style> 
</head> <body> 
<div id="main"> 
<div id="head"> 
<ul> 
<li id="tab1" onmouseover="show(1)" style="background-color:#FFF">图片一</li> 
<li id="tab2" onmouseover="show(2)">图片二</li> 
<li id="tab3" onmouseover="show(3)">图片三</li> 
<li id="tab4" onmouseover="show(4)">图片四</li> 
</ul> 
</div> 
<div id="content"> 
<p id="p1"><img src="图片0"/></p> 
<p id="p2" style="display:none;"><img src=“图片1”></p> 
<p id="p3" style="display:none;"><img src="图片2" height="320px;"/></p> 
<p id="p4" style="display:none;"><img src="图片3"/></p> 
</div> 
</div> 
</body> 
<script> 
function show(n){ 
for(var i=1;i<=4;i++){ 
document.getElementById("tab"+i).style.backgroundColor='green'; 
document.getElementById("p"+i).style.display='none'; 
//display实现内容的隐藏与否的控制,当为none是,隐藏 
} 
document.getElementById("tab"+n).style.backgroundColor='white'; 
document.getElementById("p"+n).style.display='block'; 
//当block时,隐藏的即可显示 
} 
</script> 
</html>
Javascript 相关文章推荐
javascript 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
javascript错误的认识不用关心内存管理
Dec 15 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 #Javascript
javascript实现文本域写入字符时限定字数
Feb 12 #Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 #Javascript
动态加载jquery库的方法
Feb 12 #Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 #Javascript
javascript获取web应用根目录的方法
Feb 12 #Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 #Javascript
You might like
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
php实现paypal 授权登录
2015/05/28 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
php文件上传类的分享
2017/07/06 PHP
javascript 写类方式之七
2009/07/05 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
php与js的区别是什么
2013/08/05 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
Python实用日期时间处理方法汇总
2015/05/09 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
pygame实现弹球游戏
2020/04/14 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
幼师自荐信
2013/10/26 职场文书
毕业生自我推荐
2013/11/04 职场文书
家长对孩子的评语
2014/04/18 职场文书
食品销售计划书
2014/04/26 职场文书
自主招生教师推荐信
2014/05/10 职场文书
投资建议书模板
2014/05/12 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
治庸问责工作总结
2015/08/11 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书