• 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{ 100%; height:45px; border:#CCC 1px solid; background-color:#CCC;}
    .c222{ height:45px; 200px; border:1px solid #000; position:absolute; left:150px; top:-1px; overflow:hidden;}
    .c222:hover{ overflow:visible; cursor:pointer; color:#F90;}
    .c333{ height:200px; 630px; border:1px solid #000; position:relative; top:1px; left:-8px;}
    .c444{ height:160px; 200px; border:1px solid #000; position:relative; float:left; margin-left:6px;}
    .c555{ height:30px; 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; 100px; position:relative; border:1px solid #000; left:1000px; top:8px; line-height:40px;}
    .c666:hover{ color:#F90; cursor:pointer;}
    .c777{ height:480px; 565px; position:relative; border:1px solid #000; left:630px; top:-198px;display:none;}
    .c7771{ height:480px; 565px; position:relative; border:1px solid #000; left:630px; top:-198px;display:none;}
    .c7772{ height:480px; 565px; position:relative; border:1px solid #000; left:630px; top:-198px;display:none;}
    .c888{ height:350px; 550px; position:absolute; border:1px solid #000; margin-left:6px; top:8px;}
    .c999{ height:100px; 550px; position:absolute; border:1px solid #0FF; left:6px; top:365px;}
    .c8881{ height:350px; 550px; position:absolute; border:1px solid #000; margin-left:6px; top:8px; }
    .c9991{ height:100px; 550px; position:absolute; border:1px solid #0FF; left:6px; top:365px;}
    .c8882{ height:350px; 550px; position:absolute; border:1px solid #000; margin-left:6px; top:8px; }
    .c9992{ height:100px; 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">&nbsp;&nbsp;北宋年间,天下太下。而武林中太白、少林等九大门派并立,更相约于太白峰顶论剑。同一时间,沈浪后人,优雅而神秘的公子羽,和与其有着千丝万缕关系之“黑手”,却正在酝酿着一场足以颠覆江湖的滔天巨浪。</p>
    </div>
    </div>
    <div class="c7771" id="c001">
    <div class="c888"><img src="mj0115cj02s.jpg" /></div>
    <div class="c999"><p align="left">&nbsp;&nbsp;《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">&nbsp;&nbsp;王者荣耀新手入门玩法介绍,王者荣耀是全球首款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>

  • 相关阅读:
    Django框架基础之分页
    Django框架基础之session
    Django框架基础之COOKIE
    Django框架基础(二)
    linux挂载/卸载windows共享文件夹
    std::string 字符串操作(分割,去空格)
    Ubuntu sudo不用输入密码的方法
    Qt学习
    ubuntu上利用 checkinstall/dpkg 制作/安装/卸载deb或rpm包
    wxWidgets编译安装
  • 原文地址:https://www.cnblogs.com/20gg-com/p/5849606.html
Copyright © 2020-2023  润新知