熟悉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. windows下检測软件的网络连接

    首先打开任务管理器选中你要查看的应用.右键转到进程 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFwZW5nMDExMg==/font/5a6L5L2 ...

  2. python求pi的方法

    来自 #_*_ coding=utf-8 *_* ## {{{ http://code.activestate.com/recipes/578130/ (r5) def pi(places=10): ...

  3. 【DB2】判断连续时间，如果间断则新增一条记录

    需求描述 例如:产品A01 2017-01-02到2017-01-03产品状态都是差,那么就是一条记录 但是在2017-01-04这天的状态不是差,到了5日这天又是差了 就是另外一条记录了 需求处理 ...

  4. WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED！问题解决

    用mac终端ssh连接Linux服务器,提示以下错误: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ WARNING: RE ...

  5. c#.net调用pdf2swf.exe将pdf文件转换为swf,vs中运行正常,布署IIS服务器部署转换后文字部分为空白

    这个是权限问题, 需要在应用程序池中高级设置,将标识改为LocalSystem

  6. 从【MySQL server has gone away】说起

    本文目的 这几天开发了一个PHP CLI程序,用于后台定时调度执行一些任务.此脚本采用了PHP的多进程(pcntl_fork),共享内存和信号量进行IPC和同步.目的是将串行的任 务并行执行,缩短执行 ...

  7. Java并发编程（四）：线程安全性

    一.定义 当多个线程访问某个类时,不管运行时环境采用何种调度方式或者这些进程将如何交替执行,并且在主调代码中不需要额外的同步或协同,这个类都能表现出正确的行为,那么就称这个类是线程安全的. 二.线程安 ...

  8. Hibernate一级缓存和二级缓存具体解释

    一.一级缓存二级缓存的概念解释 (1)一级缓存就是Session级别的缓存,一个Session做了一个查询操作,它会把这个操作的结果放在一级缓存中.假设短时间内这个 session(一定要同一个ses ...

  9. 修正ECMALL在PHP5.3以上版本中无法开启支付方式的BUG

    修正ECMALL在PHP5.3以上版本中无法开启支付方式的BUG 很多用户反映说PHP5.3.3下,ECMALL的商家无法安装支付方式,这个是比较严重的事情,不能安装支付方式那什么都不能干呢,那我就免 ...

  10. typedef可以成为你的朋友

    typedef static char int8;这个声明正确吗? A:err 所以上面那个声明是错误的. typedef为一种类型引入新的名字,而不是为变量分配空间,它并没有引入新的类型,而是为现有 ...