overflow onclick ondblclick 练习
<!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>
*{ margin:0px; padding:0px;}
.cboxx{ width:100%; height:45px; border:#CCC 1px solid; background-color:#CCC;}
.c222{ height:45px; width:200px; border:1px solid #000; position:absolute; left:150px; top:-1px; overflow:hidden;}
.c222:hover{ overflow:visible; cursor:pointer; color:#F90;}
.c333{ height:200px; width:630px; border:1px solid #000; position:relative; top:1px; left:-8px;}
.c444{ height:160px; width:200px; border:1px solid #000; position:relative; float:left; margin-left:6px;}
.c555{ height:30px; width:200px; border:1px solid #000; position:relative; float:left; margin-left:6px; top:5px; line-height:30px; text-align:center;}
.c555:hover{ color:#F00;}
.c666{ height:30px; width:100px; position:relative; border:1px solid #000; left:1000px; top:8px; line-height:40px;}
.c666:hover{ color:#F90; cursor:pointer;}
.c777{ height:480px; width:565px; position:relative; border:1px solid #000; left:630px; top:-198px;display:none;}
.c7771{ height:480px; width:565px; position:relative; border:1px solid #000; left:630px; top:-198px;display:none;}
.c7772{ height:480px; width:565px; position:relative; border:1px solid #000; left:630px; top:-198px;display:none;}
.c888{ height:350px; width:550px; position:absolute; border:1px solid #000; margin-left:6px; top:8px;}
.c999{ height:100px; width:550px; position:absolute; border:1px solid #0FF; left:6px; top:365px;}
.c8881{ height:350px; width:550px; position:absolute; border:1px solid #000; margin-left:6px; top:8px; }
.c9991{ height:100px; width:550px; position:absolute; border:1px solid #0FF; left:6px; top:365px;}
.c8882{ height:350px; width:550px; position:absolute; border:1px solid #000; margin-left:6px; top:8px; }
.c9992{ height:100px; width:550px; position:absolute; border:1px solid #0FF; left:6px; top:365px;}
</style>
</head>
<body>
<div class="cboxx">
<div class="c222"><img src="未标题-1.jpg" />
<div class="c333">
<div class="c444"><img src="830c41e550af4e48c45cc3a0.jpg" /></div>
<div class="c444"><img src="217881748872.jpg" /></div>
<div class="c444"><img src="c0731171813603.jpg" /></div>
<div class="c555" onclick="ccccc1()" ondblclick="ccccc2()">角色扮演
<div class="c777" id="c000">
<div class="c888"><img src="0Z2123041-0.jpg" /></div>
<div class="c999"><p align="left"> 北宋年间，天下太下。而武林中太白、少林等九大门派并立，更相约于太白峰顶论剑。同一时间，沈浪后人，优雅而神秘的公子羽，和与其有着千丝万缕关系之“黑手”，却正在酝酿着一场足以颠覆江湖的滔天巨浪。</p>
</div>
</div>
<div class="c7771" id="c001">
<div class="c888"><img src="mj0115cj02s.jpg" /></div>
<div class="c999"><p align="left"> 《QQ飞车》是由腾讯的琳琅天上游戏工作室开发，腾讯游戏发行的一款网络游戏，最高同时在线已超过300万。游戏结合休闲和竞技玩法，戏，采用了物理引擎PhysX来保证车辆运行时的真实感。</p></div>
</div>
<div class="c7772" id="c002">
<div class="c888"><img src="u=1805971805,524519640&fm=11&gp=0.jpg" /></div>
<div class="c999"><p align="left"> 王者荣耀新手入门玩法介绍，王者荣耀是全球首款5V5英雄公平对战手游，腾讯最新MOBA手游大作，5V5王者峡谷、5V5深渊大乱斗、以及3V3、1V1等多样模式一键体验，热血竞技尽享快感。</p></div>
</div>
</div>
<div class="c555" id="c001" onclick="ccccc3()" ondblclick="ccccc4()">极限竞速</div>
<div class="c555" id="c002" onclick="ccccc5()" ondblclick="ccccc6()">全新手游</div>
</div>
</div>
<div class="c666">返回官网首页</div>
</div>
</body>
</html>
<script>
var a=document.getElementById("c000")
var b=document.getElementById("c001")
var c=document.getElementById("c002")
function ccccc1()
{
a.style.display="block"
b.style.display="none"
c.style.display="none"
}
function ccccc2()
{
a.style.display="none"
b.style.display="none"
c.style.display="none"
}
function ccccc3()
{
b.style.display="block"
a.style.display="none"
c.style.display="none"
}
function ccccc4()
{
a.style.display="none"
b.style.display="none"
c.style.display="none"
}
function ccccc5()
{
c.style.display="block"
b.style.display="none"
a.style.display="none"
}
function ccccc6()
{
a.style.display="none"
b.style.display="none"
c.style.display="none"
}
</script>
overflow onclick ondblclick 练习的更多相关文章
- JS代码格式化和语法着色
有时为了研究学习一些格式不规范的JS代码段,需要将代码段格式化一下,这样思路就会清晰多了,网上找到此款格式化的工具,将以下代码保存为html格式文件即可使用 <html> <head ...
- 基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用
在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔,本篇继续介绍其中界面部分的一些使用知识,包括控件的赋值.取值.清空,以及相关的使用. 我们知道,一般Web界面包括的界面控 ...
- 转--基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用
原文 http://www.cnblogs.com/wuhuacong/p/3317223.html 基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用 在前面介绍了两篇关于我的基 ...
- 毕业设计 ASP.Net+EasyUI开发 X X露天矿调度管理信息系统(一)
开篇介绍关于EasyUI技术,界面部分的一些使用知识,包括控件的赋值.取值.清空,以及相关的使用. 我们知道,一般Web界面包括的界面控件有:单行文本框.多行文本框.密码文本框.下拉列表Combobo ...
- 鼠标捕获(setCapture，releaseCapture)的学习
鼠标捕获(setCapture)作用是将鼠标事件捕获到当前文档的指定的对象——对指定的对象设置鼠标捕获.这个对象会为当前应用程序或整个系统接收所有鼠标事件. 所谓鼠标捕获,是指对鼠标事件(onmous ...
- javascrpt 页面格式化页面
下面这个页面,格式化javaScript <html> <head> <title>JS格式化工具 </title> <meta http-equ ...
- （转）基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用
原文地址:http://www.cnblogs.com/wuhuacong/p/3317223.html 在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔,本篇继续介绍其中 ...
- GIS可视化——麻点图
一.引言 目前在客户端绘制POI(Point of Interest,兴趣点)的方式主要是div(Marker的形式).svg.canvas.VML(后边三种就是Vector Layer)几种方式,这 ...
- JS格式化工具（转)
<html> <head> <title>JS格式化工具 </title> <meta http-equiv="content-type ...
随机推荐
- linux - redis基础
目录 linux - redis基础 redis 源码编译安装 redis 数据结构 1. strings类型 2. list 类型 3. sets集合类型 有序集合 5. 哈希数据结构 centos ...
- 【模板】非旋转Treap
Treap,也叫做树堆,是指有一个随机附加域满足堆的性质的二叉搜索树. 如果一棵二叉搜索树插入节点的顺序是随机的,那我们得到的二叉搜索树在大多数情况下是平衡的,期望高度是log(n). 但有些情况下我 ...
- yum http源
统一集群内,有一个yum本地源即可,集群内其他机器的yum可配成http源 方法: yum1:本地yum源节点 yum2:集群内其他节点 yum1: ①service httpd start ②mki ...
- 【codeforces 509E】Pretty Song
[题目链接]:http://codeforces.com/contest/509/problem/E [题意] 让你计算一个字符串的所有子串里面元音字母出现的频率的和; [题解] 先处理出前缀和-&g ...
- 【[Offer收割]编程练习赛13 B】最大子矩阵(自己的思路)
[题目链接]:http://hihocoder.com/contest/offers13/problem/2 [题意] [题解] 算出1..250*250这些数字每个数字的所有因子(成对的那种,即x* ...
- [luoguP2024] 食物链（并查集）
传送门 经典的并查集问题 对于这种问题,并查集需要分类 开3*n的并查集,其中x用来连接与x同类的,x+n用来连接x吃的,x+2*n用来连接x被吃的. 1 x y时,如果 x吃y 或 x被y吃,那么为 ...
- 【转】php ob_start()、ob_end_flush和ob_end_clean()多级缓冲
原文:https://my.oschina.net/CuZn/blog/68650 当php.ini配置文件中的 设置开启的时候,就相当于PHP已经打开了最顶层的 一级缓存 (等价于调用了一次 ob ...
- ORACLE11G设置IP訪问限制
出于数据安全考虑,对oracle数据库的IP做一些限制,仅仅有固定的IP才干訪问. 改动$JAVA_HOME/NETWORK/ADMIN/sqlnet.ora文件 添加下面内容(红色表示凝视): #开 ...
- vbs setkeys 特殊符号
set keys={~}!^@^#^${%%}{^&^}{^^}{*}{(}{)}{_}{-}{=}{+}.;:'"
- BeanUtils使用案例
1.BeanUtils框架/工具(APACHE开源组织开发) (1)BeanUtils框架可以完毕内省的一切功能.并且优化 (2)BeanUtils框架可以对String<-> ...