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

代码如下:

<!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>

赞 (0)

相关推荐

  • JS小功能(onmouseover实现选择月份)实例代码

    JS小功能(onmouseover实现选择月份)实例代码

    效果: 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        #backcolor        {            width: 400px;            height: 400px;            background: #FFFF00;            tex

  • onmouseover事件和onmouseout事件全面理解

    onmouseover事件和onmouseout事件全面理解

    这两天接触了onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件,但是突然发现这些只是对它们简单的描述,下面让我们一起看看它们终究还有神马奇怪的特性,是好还是坏呢? 首先实现一个盒子: 给这个盒子上绑定上onmouseover事件和onmouseout事件 发现它们不会发生什么问题,然后(嘿嘿,你懂得!) 让我们创建一个B元素,让它被嵌套在A元素中,作为A的子元素 我们依旧只给外层父元素A绑定onm

  • 兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版

    前段时间一直找这个的简短实现  网上也有很多方法 昨天发现了这种方法 感觉是用代码最少的 呵呵 ie下支持css的js ff等支持:hover 就这样了 觉得好的就顶起来 无标题文档 #b_g_date tr{ event:expression(onmouseover = function(){this.style.backgroundColor='#E3FFC9'},onmouseout = function(){this.style.backgroundColor='#FFFFFF'});

  • js 阻止子元素响应父元素的onmouseout事件具体实现

    复制代码 代码如下: $(".target-menu").mouseout(function(e){ evt = window.event || e; var obj = evt.toElement || evt.relatedTarget; var pa = this; if(pa.contains(obj)) return false; $(this).hide(); });

  • js ondocumentready onmouseover onclick onmouseout 样式

    复制代码 代码如下: <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="doInit()" /> <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="doMouseover()" /> <PUBLIC:ATTACH EVENT="onclick" ONEVENT="doClick()&q

  • onmouseover和onmouseout的一些问题思考

    onmouseover和onmouseout的一些问题思考

    一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout.  很简单的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会只在移进时才触发,onmouseout也不会只在移出时才触发!鼠标在DIV里面移动时也会可能触发onmouseover或onmouseout.  在上图中,对于'A'来说:当鼠标进入'A'(路径'1′)时那么就会触发'A'的onmouseover事件:接着鼠标移动到'B'(路径'2′),此时'A'会触发onmouse

  • js下关于onmouseout、事件冒泡的问题经验小结

    问题是这样的:一个div元素要触发onmouseout事件,同时这个div内部还有子元素,于是当鼠标移动到该div的子元素上时,onmouseout事件也被触发了.在要做浮动层效果的时候会经常遇到这个问题. 解决方法一: 使用jQuery,这个大家都会的: 复制代码 代码如下: <div id="div1">触发显示浮动层</div> <div id="div2"> <ul> <li>1</li>

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

    复制代码 代码如下: <!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=&qu

  • js实现感应鼠标图片透明度变化的方法

    本文实例讲述了js实现感应鼠标图片透明度变化的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>感应鼠标图片透明度变化</title> <SCRIPT language="JavaScript"> <!-- function makevisible(cur,which){ if (which==0) cur.filters.alpha.opacity=100

  • div+css实现鼠标放上去，背景跟图片都会变化。

    New Document ul{ list-style:none; } a{ padding-left:1.5em;font-size:12px;height:23px;line-height:23px;color:gray;text-decoration:none; } a:link,a:visited{ background:url(/article/upimages/bbs_bg_off.gif); } a:hover,a:active{ background:url(/article/u

  • 手机端实现Bootstrap简单图片轮播效果

    手机端实现Bootstrap简单图片轮播效果

    个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先是本地站点搭建:win+R输入mmc打开控制台,文件-添加/删除管理单元,Internet信息服务.添加确定,右侧基本信息,新建网站-把路径改了.设定一个端口号,手机浏览器就可以输入  电脑局域网ip:端口号 就可以连上去了. 接下来问题来了,一个个点击查看然后关闭图片是一件更不环保的事.何不做一个

  • JavaScript仿网易选项卡制作代码

    JavaScript仿网易选项卡制作代码

    如果你的页面只有一个tab(选项卡)切换的地方,需要调用js效果,如果单独为了它,还要为页面加载一个jQuery插件,想必是极痛苦的.所有很多时候,jQuery特效也不是万能的,偶尔来个原生的js效果也是必须的.今天闲着无聊,用js和jquery分别写了一个选项卡的效果,但是其中用到jquery只是为了更好的获取标签以及修改样式. 先来浏览一下效果图吧~~ 一.Javascript实现 1.html布局 <div id="box"> <div class="

  • java使用CKEditor实现图片上传功能

    java使用CKEditor实现图片上传功能

    java如何使用CKEditor实现图片上传功能,具体内容如下 1.根据实际需要下载指定的CKEditor 2.删除文件ckeditor/plugins/image/dialogs/image.js预览框中文本内容,并修改hidden属性值为显示上传选项卡 删除image.js中包含在双引号中的上述文本 将image.js中的hidden属性值改为0 3.修改ckeditor/config.js文件,配置"上传到服务器"按钮调用的controller接口 4."上传到服务器&

  • C#图片处理3种高级应用

    C#图片处理3种高级应用

    利用C#图片处理的一些基本和高级应用,解决了显示排版时想让相片缩略图列表非常统一.整齐.和美观,每张缩略图大小固定为120 x 90且不拉伸变形,用户头像让缩略图比原图更清晰,上传的图片下加一个半透明的LOGO水印等等要求. 高缩略图清晰度 之前一直认为缩略图不可能比原图清晰,直到某天一位产品的同事给我看某网站的效果.于是开始寻找.NET下实现代码,仔细观察缩略图确实比原图更清晰了一些,但代价是缩略图文件比原图更大,所以如果你想让一张占满显示器屏幕的超大图片更清晰,那么图片占用空间和网络流量就必

  • 分享实现Android图片选择的两种方式

    Android选择图片的两种方式: 第一种:单张选取 通过隐式启动activity,跳转到相册选择一张返回结果 关键代码如下: 发送请求: private static final int PICTURE = 10086; //requestcode Intent intent = new Intent(); if (Build.VERSION.SDK_INT < 19) {//因为Android SDK在4.4版本后图片action变化了 所以在这里先判断一下 intent.setAction

  • 用JS实现图片轮播效果代码（一）

    用JS实现图片轮播效果代码（一）

    一.实现原理 (1)将所有图片放在一个父容器div里面,通过display属性来设置图片的出现与隐藏: (2)轮播图分为手动轮播和自动轮播: 手动轮播的重点是每次点击图片下方的小圆圈,获得它的索引号,并让与之对应索引号的图片显示,并且此时的小圆圈为高亮显示: 自动轮播:利用定时器setInterval(),来每隔一定的时间来播放一次图片. (3)所有的基础知识:dom操作,定时器,事件运用. 二.轮播图页面布局: <div id="content"> <!-- 总的父

  • jQuery实现鼠标滚动图片延迟加载效果附源码下载

    jQuery实现鼠标滚动图片延迟加载效果附源码下载

    这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示.在这之前全部图片都由一张图片代替.节省流量,减轻服务器负担. 请用鼠标或者键盘方向键使页面向下滚动,注意图片的变化.本特效没有使用专门的图片延迟加载插件,只需要一小段jQuery代码就实现了图片延迟加载,使用非常方便.在本文后面附有源码下载. 效果展示     源码下载 用到的加载中的图片: 代码如下: <!DOCTYPE html> <html> <head> <meta charset

随机推荐