<!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. 洛谷T8115 毁灭

    题目描述 YJC决定对入侵C国的W国军队发动毁灭性打击.将C国看成一个平面直角坐标系,W国一共有n^2个人进入了C国境内,在每一个(x,y)(1≤x,y≤n)上都有恰好一个W国人.YJC决定使用m颗核 ...

  2. Data_Structure01-绪论作业！

    一.作业题目 仿照三元组或复数的抽象数据类型写出有理数抽象数据类型的描述 (有理数是其分子.分母均为整数且分母不为零的分数). 有理数基本运算: 构造有理数T,元素e1,e2分别被赋以分子.分母值 销 ...

  3. 通过OpenGL ES在iOS平台实践增强现实

    http://www.cnblogs.com/elvisyzhao/p/3398250.html 本文采用OpenGL ES 1固定渲染管线实现,目标为在设备拍摄到的现实世界中,绘制世界坐标轴,并根据 ...

  4. Linux用户态定时器用法以及犯错总结【转】

    转自:http://blog.csdn.net/csdn_logo/article/details/48525703 版权声明:本文为博主原创文章,欢迎转载,转载请注明出处,多谢合作. 采样的时候要用 ...

  5. 【原创】Linux环境下的图形系统和AMD R600显卡编程(3)——AMD显卡简介

    早期的显卡仅用于显示,后来显卡中加入了2D加速部件,这些部件用于做拷屏,画点,画线等操作.随着游戏.三维模拟以及科学计算可视化等需要,对3D的需求逐渐增加,早期图形绘制工作由CPU来完成,要达到真实感 ...

  6. 明远智睿IMX6Q Android4.4.2移植USBWIFI(RTL8188EUS)

    移植过程中得到网友的不少帮助,很感谢!为了让更多的网友不像我这样折腾,特写此文以做参照.过程中主要参考< Realtek_Wi-Fi_SDK_for_Android_KK_4_4.pdf > ...

  7. ubuntu安装ftp server并匿名访问

    $ sudo apt install vsftpd //修改添加以下配置 $ sudo vim /etc/vsftpd.conf #listen_ipv6=YES #注销ipv6监听 listen=Y ...

  8. Appium+python自动化8-Appium Python API【转载】

    前言: Appium Python API全集,不知道哪个大神整理的,这里贴出来分享给大家. 1.contexts contexts(self): Returns the contexts withi ...

  9. 全文索引CONTAINS语法

    Like直接在数据据中查找可以查到所有所需记录但是会扫描整个表会影响性能CONTAINS是基于全文索引进行查询,查询结果受系统全文索引分词的方法影响查询结果会不全.Select * FROM A Wh ...

  10. TCP/IP，http，socket，长连接，短连接 —— 小结

    TCP/IP是什么? TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层.    在网络层有IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协议.    在传输层中有TCP协议 ...