熟悉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. C++ 代码风格准则：POD

    作者:一根筋的傻瓜链接:https://www.zhihu.com/question/36379130/answer/69853366来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...

  2. 【Spring实战】—— 6 内部Bean

    本篇文章讲解了Spring的通过内部Bean设置Bean的属性. 类似内部类,内部Bean与普通的Bean关联不同的是: 1 普通的Bean,在其他的Bean实例引用时,都引用同一个实例. 2 内部B ...

  3. HTML-HTML5+CSS3权威指南阅读（三、CSS3）

    不同的浏览器(包括-moz-代表的Mozilla Firefox, -ms-代表的Microsoft Internet Explorer等)厂商在发布正式版本之前之前, 试验各自对CSS3新特性的实现 ...

  4. Idea golang "can’t find import" 解决方法

    如题,在使用leveldb go wrapper levigo 的时候,本地安装好levigo后,通过命令行编译代码正常并能work,但在Idea中使用时出现: can't find import & ...

  5. easyui treegrid增、删、改及批量保存

    treegrid添加新行和删除行的方法: 添加和删除直接调用这两个方法即可,修改的方法有点特殊,treegrid没有提供update方法,设置行为编辑状态,$('#obj_tgd_objectlist ...

  6. 自定义asp.net mvc Filter 过滤器

    1新建一个mvc项目:如图 2.主要创建下面一些类文件 1.utility目录 放置自定义的过滤器 using System; using System.Collections.Generic; us ...

  7. ClientViaBehavior行为

    ClientViaBehavior行为: 紧接红框:方式,也支持配置的应用方式

  8. SSM整合开发流程

    我的spring是3.2,mybatis是3.4 1 引入user libarary,我的jar文件如下 //spring mvc core springMVC\spring-web-.RELEASE ...

  9. NanoHttpd

    NanoHttpd是个很强大的开源库,仅仅用一个Java类,就实现了一个轻量级的 Web Server,可以非常方便地集成到Android应用中去,让你的App支持 HTTP GET, POST, P ...

  10. POJ 1258：Agri-Net（最小生成树&amp;&amp;prim）

    Agri-Net Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 38918   Accepted: 15751 Descri ...