模仿百度输入法网页版的弹出效果

点击按钮，弹出一个显示选择输入法的层，可以关闭，效果非常简单，纯javascript实现，代码非常短

查看演示页面 View Demo 查看全部代码 View Code

样式：

<style>

body,ul,li,button{margin:0;padding:0;}

body{font:12px/1.5 Tahoma;}

ul{list-style-type:none;}

button{cursor:pointer;}

#outer{width:70px;margin:10px auto;}

#ime{margin-top:5px;background:#fff;border:1px solid #9a99ff;display:none;}

#ime li{width:100%;line-height:24px;display:inline-block;vertical-align:top;}

#close{border-top:1px solid #9a99ff;}

#ime li a{color:#00c;padding:0 5px;display:block;text-decoration:none;}

#ime li a:hover{background:#d9e1f6;}

</style>

javascript脚本

<script>

        /*****************************************************
         *  Share JavaScript (http://www.ShareJS.com)
         * 使用此脚本程序，请保留此声明
         * 获取此脚本以及更多的JavaScript程序，请访问 http://www.ShareJS.com
         ******************************************************/
    
window.onload = function ()
{
	var oBtn = document.getElementById("imeButton");

	var oIme = document.getElementById("ime");

	var oClose = document.getElementById("close"); 	

	var style = oIme.style;

	oBtn.onclick = function()

	{		

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

	};

	oClose.onclick = function()

	{

		style.display = "none"	

	}

}

</script>

html代码

<div id="outer">

    <input type="button" id="imeButton" value="弹出输入法(http://www.sharejs.com)" />

    <ul id="ime">

        <li><a href="javascript:;">手写</a></li>

        <li><a href="javascript:;">拼音</a></li>

        <li id="close"><a href="javascript:;">关闭</a></li>

    </ul>
 </div>