<!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. How to secure remote desktop connections using TLS/SSL

    How to secure remote desktop connections using TLS/SSL based authentication Requirement When you ena ...

  2. 51Nod 1317 相似字符串对

    题目链接 分析: 考虑两个串的关系:$A+C=C+B$,我们观察可以发现,$A$和$B$是循环同构的,如果$A=G+H$,那么$B=H+G$,证明略长懒得写了... 我们知道$A$串有$K^N$种,所 ...

  3. 封装一下webform的公用方法：对于软件我把这些全封装在pagebase里面，这样所有的页面只调用一句 Init()即可，其他的全在页面上配置

      /// <summary>         /// 绑定新闻列表,带分页与查询         /// </summary>         /// <param n ...

  4. [ CodeVS冲杯之路 ] P1295

    不充钱,你怎么AC? 题目:http://codevs.cn/problem/1295/ 数据很小,直接DFS,加上剪枝 剪枝其实就是判重,首先深度是行下标,这里自带不重复,枚举的列下标,用 f 记录 ...

  5. Android的CheckBox(多选框)

    1.布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...

  6. 战斗机的祈雨仪式（NOIP模拟赛Round 7）

    [问题描述] 炎炎夏日,如果没有一场大雨怎么才能尽兴?秋之国的人民准备了一场祈雨仪式.战斗机由于拥有操纵雷电的能力,所以也加入了其中,为此,她进行了一番准备. 战斗机需要给自己的Spear of Lo ...

  7. 放棋游戏(NOIP模拟赛)（DP）

    没有原题... 囧.. [问题描述] 游戏规则是这样,有n(1<=n<=100)行格子,第一行由n个格子,第二行有n-1个格子,第三行由n-2个格子,……以此类推,第n行有1个格子.要求再 ...

  8. PHP中利用PHPMailer使用QQ邮箱实现邮件发送

    /** * 下订单发送邮件 * @to 收件人 @title 标题 @content 内容 */ function sendMail($to,$title,$content){ //引入PHPMail ...

  9. 快速幂取模(当数很大时，相乘long long也会超出的解决办法)

    当几个数连续乘最后取模时,可以将每个数字先取模,最后再取模,即%对于*具有结合律.但是如果当用来取模的数本身就很大,采取上述方法就不行了.这个时候可以借鉴快速幂取模的方法,来达到大数相乘取模的效果. ...

  10. 51nod 1096 距离之和最小【中位数】

    1096 距离之和最小 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  关注 X轴上有N个点,求X轴上一点使它到这N个点的距离之和最小,输出这个最小的距离 ...