熟悉position的用法

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="jquery/jquery-1.11.3.min.js"></script>
<title>输入框获得焦点,显示div 点击别处div隐藏</title>
</head>
<style>
.page_modal{
position: absolute;
top:0px;
left:0px;
border:1px solid red;
width:100%;
height:100%;
display:none;
z-index:2000;
}
.div_text{
width:200px;
position: absolute;
margin:0px;
padding:0px;
background-color:blue;
display:none;
z-index:2001;
opacity:0.5;
}
a{

}
a:hover{
cursor:pointer;
color:black;
}

</style>
<body>
<div>
<input type="text" id="inp_only"onmouseover="$('#div_show').show();"onmouseout="$('#div_show').hide();" onfocus="inpFocus()" onkeyup="inpFocus()"/>
</div>
<div class="div_text" id="div_show" onmouseover="$('#div_show').show();" onmouseout="$('#div_show').hide();"></div>
<div class="page_modal"></div>
</body>
<script>
$(function(){
$(".page_modal").click(function(){
// $(".page_modal").hide();
$("#div_show").hide();
});
})
$("#div_show>a").click(function(){
var textVal = $(this).val();
// $(".page_modal").hide();
$("#div_show").hide();
$("#inp_only").val(textVal);
})
function inpFocus(){
$("#div_show").html("");
var $a = "";
for(var i=0;i<5;i++){
$a += "<a href='javascript:void(0);' style='display:block;color:white'>1.1.1."+i+"</a>";
}
$("#div_show").append($a);
// $(".page_modal").show();
$("#div_show").show();
}

</script>
</html>

鼠标滑入滑出,输入框获得失去焦点后触发事件的N种方法之一二的更多相关文章

  1. 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  2. 伴随ListView、RecyclerView、ScrollView滚动滑入滑出小图标--第三方开源--FloatingActionButton

    FloatingActionButton在github上的项目主页是:https://github.com/makovkastar/FloatingActionButton 它的依赖包NineOldA ...

  3. WPF技术触屏上的应用系列（五）: 图片列表异步加载、手指进行缩小、放大、拖动 、惯性滑入滑出等效果

    原文:WPF技术触屏上的应用系列(五): 图片列表异步加载.手指进行缩小.放大.拖动 .惯性滑入滑出等效果 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统, ...

  4. css transition 实现滑入滑出

    transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办?  ...

  5. 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】

    1.jquery隐藏and显示事件 $("p").hide();      //隐藏事件$("p").hide(1000);  //1秒内缓慢隐藏$(" ...

  6. jQuary总结7:动画操作,显示与隐藏 淡入淡出, 滑入滑出

    1 jquery提供了三组基本动画,这些动画都是标准的.有规律的效果,jquery还提供了自定义动画的功能. 2 显示与隐藏: show([speed],[easing],[callback]) 显示 ...

  7. JQuery动画之滑入滑出动画

    1. 滑入动画(类似于商店的卷帘门) $(selector).slideDown(speed, 回调函数); 解释: 此语句实现的功能为, 在XX时间内, 下拉动画, 显现元素. 当 slideDow ...

  8. JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里

    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...

  9. div层的滑入滑出实例

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat=&quo ...

随机推荐

  1. mac 使用apache开启https功能，实现ios局域网内测（二）

    二.创建app.plist 1. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist ...

  2. ubuntu下运行第一个.net core web程序

    前置条件 ubuntu系统 且已经安装dotnetcore运行环境 mkdir  testMVC 创建一个文件夹 cd testMVC    进入文件夹 dotnet new -t web 创建程序( ...

  3. Inno Setup 打包的文件以管理员权限执行

    最近发现一个问题,就是Inno Setup打包的程序安装完毕后执行需求管理员权限的程序的时候会失败( inno createprocess   须要提升),解决问题的最简单办法就是打包的后的程序也以管 ...

  4. iloc[[i]] 和 loc[[i]] 的区别

    In [2]: df Out[2]: A B 0 1.068932 -0.794307 2 -0.470056 1.192211 4 -0.284561 0.756029 6 1.037563 -0. ...

  5. SVN提交项目时版本冲突解决方案

    版本冲突原因: 假设A.B两个用户都在版本号为7的时候,更新了index.jsp这个文件,A用户在修改完成之后提交index.jsp到服务器,这个时候提交成功,这个时候index.jsp文件的版本号已 ...

  6. 李洪强iOS开发之iOS工具收集

    李洪强iOS开发之iOS工具收集 项目 简述 日期 我是怎么慢慢变懒的 : Jenkins + 蒲公英 使用Jenkins + 蒲公英使得项目打包给测试人员自动化,大大节省了劳动力 2015.04.1 ...

  7. ORACLE / PLSQL 插入或更新数据的几种方式

    第一种,直接用values 插入 ---日期需要用TO_DATE操作 INSERT INTO EMP (EMPNO,ENAME ,JOB,MGR, HIREDATE , SAL ,COMM, DEPT ...

  8. iOS swift String 换行显示

    在oc中换行的方式 NSString *str = @" aaaaa \ bbbbb \ cccc \ "; swift中这种方式不可用 ,swift中换行采用新的方双三引号 &q ...

  9. HDU 1075 What Are You Talking About （Trie）

    What Are You Talking About Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 102400/204800 K ...

  10. zoj 1109 Language of FatMouse(字典树)

    Language of FatMouse Time Limit: 10 Seconds      Memory Limit: 32768 KB We all know that FatMouse do ...