<!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>模拟select控件</title>

<style>

html,body{height:100%;overflow:hidden;}

body,div,form,h2,ul,li{margin:0;padding:0;}

ul{list-style-type:none;}

body{background:#23384e;font:12px/1.5 \5fae\8f6f\96c5\9ed1;}

#search,#search form,#search .box,#search .select,#search a{background:url(img/search.jpg) no-repeat;}

#search,#search .box,#search form{height:34px;}

#search{position:relative;width:350px;margin:10px auto;}

#search .box{background-position:right 0;}

#search form{background-repeat:repeat-x;background-position:0 -34px;margin:0 20px 0 40px;}

#search .select{float:left;color:#fff;width:190px;height:22px;cursor:pointer;margin-top:4px;line-height:22px;padding-left:10px;background-position:0 -68px;}

#search a{float:left;width:80px;height:24px;color:#333;letter-spacing:4px;line-height:22px;text-align:center;text-decoration:none;background-position:0 -90px;margin:4px 0 0 10px;}

#search a:hover{color:#f60;background-position:-80px -90px;}

#search .sub{position:absolute;top:26px;left:40px;color:#fff;width:198px;background:#2b2b2b;border:1px solid #fff;display:none;}

#search .sub li{height:25px;line-height:24px;cursor:pointer;padding-left:10px;margin-bottom:-1px;border-bottom:1px dotted #fff;}

#search .sub li.hover{background:#8b8b8b;}

</style>

<script type="text/javascript">

window.onload = function ()

{

    var oSelect = document.getElementsByTagName("span")[0];

    var oSub = document.getElementsByTagName("ul")[0];

    var aLi = oSub.getElementsByTagName("li");

    var i = 0;

    oSelect.onclick = function (event)

    {

        var style = oSub.style;

        style.display = style.display == "block" ? "none" : "block";

        //阻止事件冒泡

        (event || window.event).cancelBubble = true

    };

    for (i = 0; i < aLi.length; i++)

    {

        //鼠标划过

        aLi[i].onmouseover = function ()

        {

            this.className = "hover"

        };

        //鼠标离开

        aLi[i].onmouseout = function ()

        {

            this.className = "";

        };

        //鼠标点击

        aLi[i].onclick = function ()

        {

            oSelect.innerHTML = this.innerHTML

        }

    }

    document.onclick = function ()

    {

        oSub.style.display = "none";

    };

};

</script>

</head>

<body>

<div id="search">

    <div class="box">

        <form>

            <span class="select">请选择游戏名称</span>

            <a href="javascript:;">搜索</a>

        </form>

    </div>

    <ul class="sub">

        <li>地下城与勇士</li>

        <li>魔兽世界（国服）</li>

        <li>魔兽世界（台服）</li>

        <li>热血江湖</li>

        <li>神鬼传奇</li>

        <li>大话西游II</li>

        <li>QQ幻想世界</li>

    </ul>

</div>

</body>

</html>
显示单击的坐标
<!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>

pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;}

span{color:#999;}

</style>

<script type="text/javascript">

document.onclick = function (event)

{

    var event = event || window.event;

    alert("坐标：[" + event.clientX + ", " + event.clientY + "]")

}

</script>

</head>

<body>

<pre>

&lt;script type="text/javascript"&gt;

    var event = event || window.event;

    alert("坐标：[" + event.clientX + ", " + event.clientY + "]")

&lt;/script&gt;

</pre>

</body>

</html>
用户按下键盘，显示keyCode
<!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>用户按下键盘，显示keyCode</title>

<style>

body{

    text-align:center;

    font:30px/1.5 \5fae\8f6f\96c5\9ed1, arial;

}

pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;text-align:left;}

span{color:#999;}

</style>

<script type="text/javascript">

window.onload = function ()

{

    var oP = document.getElementsByTagName("p")[0];

    document.onkeydown = function (event)

    {

        var event = event || window.event;

        oP.innerHTML = event.keyCode;

        return false

    }

}

</script>

</head>

<body>

<pre>

&lt;script type="text/javascript"&gt;

window.onload = function ()

{

    var oP = document.getElementsByTagName("p")[0];

    document.onkeydown = function (event)

    {

        var event = event || window.event;

        oP.innerHTML = event.keyCode;

        return false

    }

}

&lt;/script&gt;

</pre>

<p>这里将显示您按下键的 keyCode</p>

</body>

</html>

模拟select控件&&显示单击的坐标&&用户按下键盘，显示keyCode的更多相关文章

  1. 模拟select控件，css模拟下拉

    <!DOCTYPE html > <head>     <meta http-equiv="Content-Type" content="t ...

  2. 模拟select控件功能

    直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. jquery input 下拉框(模拟select控件)焦点事件

    本章主要讲解如何实现select下拉列表可输入效果 ps:input提供输入,然后用ul去模拟一个select下拉列表效果即可,关键在于点击div之外的地方隐藏ul,下面是html基本结构: < ...

  4. js+CSS实现模拟华丽的select控件下拉菜单效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 解决bootstrap-table表头filter-control select控件被遮挡显示不全的问题

    [本文出自天外归云的博客园] 在使用bootstrap-table的extension——filter-control时(对应表格的data-filter-control="true&quo ...

  6. C# 常用控件及单击事件

    1.窗体 1.常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体. (2)WindowState属性: 用来获取或设置窗体的窗口状态. 取值有三种: No ...

  7. Asp.net绑定带层次下拉框（select控件）

    1.效果图 2.数据库中表数据结构 3.前台页面 <select id="pid" runat="server" style="width:16 ...

  8. Selenium webdriver 之select 控件封装，解决onchange问题

    使用webdriver的时候,select 控件经常会绑定onchange 事件,在selenium2.09 之前click 方法对onchange 事件有bug,2.09 以后修复了,但是根据经验也 ...

  9. JavaScript封装一个实用的select控件

    最近一直把精力放在项目上面,导致忽略的一些底层的东西.以前就一直觉得原有的select控件很丑,正好周末有时间,试着做了一个简单封装,实现了它的基本功能.我总结了一下,大概分为三个部分: 1.对显示样 ...

随机推荐

  1. python面试经典315

    期待的是可以检验自己学习的成功:苦逼的是怎么又有东西没记住,但我们依然每天坚持一遍.一遍又一遍指导记住为止. 第一部分 Python基础篇(80题) 为什么学习Python? 通过什么途径学习的Pyt ...

  2. 云服务器基本环境配置（php5.6+mysql+nginx）

    1.安装nginx sudo apt-get install nginx nginx 基本配置 server{ listen ; server_name www.xxxxxx.cn; root /va ...

  3. [ZJOI2008]树的统计——树链剖分

    本题是一个树链剖分裸题,由于比较菜,老是RE,后来发现是因为使用了全局变量. /************************************************************ ...

  4. windows7下检测耳机麦克拔插（转）

    原文转自 https://blog.csdn.net/rankun1/article/details/50972990 #include "stdafx.h" #define SA ...

  5. 基于Xen实现一种domain0和domainU的应用层数据交互高效机制 - 3

    继续 上一篇 的研究,结合 xen4.2.3 的代码分析,发现 xen4.2.3 的应用层工具库 tools 包含一个工具叫 libvchan ,其头文件描述如下: * This is a libra ...

  6. do_exit——>exit_notify()【转】

    转自:http://blog.csdn.net/sunnybeike/article/details/6907322 版权声明:本文为博主原创文章,未经博主允许不得转载. /* * Send sign ...

  7. HDU 1698.Just a Hook-线段树(成段替换、输出总和tree[1])

    HDU1698.Just a Hook 这个题是最最基础的成段更新的线段数的题目,直接贴代码吧. 代码: #include<iostream> #include<cstring> ...

  8. Python与正则表达式[0] -> re 模块的正则表达式匹配

    正则表达式 / Regular Expression 目录 正则表达式模式 re 模块简介 使用正则表达式进行匹配 正则表达式RE(Regular Expression, Regexp, Regex) ...

  9. 在sae中运行web.py应用

    sae 是新浪推出的PaaS业务,可以提供免运维的容器服务,官方网站( https://www.sinacloud.com/ ) 假设您已经在本地开发好了web.py 应用,您可以通过github客户 ...

  10. ACM中的正则表达式

    layout: post title: ACM中的正则表达式 author: "luowentaoaa" catalog: true mathjax: true tags: - 正 ...