熟悉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. connect(mapStateToProps,mapDispatchToProps) 的写法

    1.写法 import { connect } from 'redux'; import { loading, asyncRequset } from '../../actions/common'; ...

  2. hdu 5311 Hidden String 字符串

    BC一周年的题.这道题做比赛的时候A了小数据,终于评判的时候还是挂了,看来还是不认真思考的问题啊.交的时候 都没有信心过肯定是不行的.认真思考.敲一发,有信心过才是真正的acmer.赛后认真想了想,发 ...

  3. 简单易懂的Dart》 - Dart语言中文简明教程

    转自:https://www.blackglory.me/straightforward-dart/ Dart是Google公司发布的网络编程语言,其诞生的目的是为了让广大C类OOP程序员们克服Jav ...

  4. 6. Laravel5学习笔记：IOC/DI的理解

    介绍 IOC 控制反转 Inversion of Control 依赖关系的转移 依赖抽象而非实践 DI 依赖注入 Dependency Injection 不必自己在代码中维护对象的依赖 容器自己主 ...

  5. ASP.NET 之XML：要插入的节点出自不同的文档上下文

    异常详细信息:   System.ArgumentException:   要插入的节点出自不同的文档上下文. 产生状况:现在有两个xml文件,我想把这两个xml合并,在给xml节点插入一个子节点时出 ...

  6. Android新手入门2016（10）--GridView

    本文来自肥宝传说之路.引用必须注明出处! GridView跟ListView一样是多控件布局.实现九宫图是最方便的. 还是先看看图,没图说个鸡鸡是不是 如上图.是一种应用方式.在每一个格子里面.放入应 ...

  7. python-循环(loop)-for循环

    for 循环 for every_letter in 'Hello world': print(every_letter) 输出结果为 把 for 循环所做的事情概括成一句话就是:于...其中的每一个 ...

  8. Java并发编程（九）：拓展

    java多线程死锁理解 Java多线程并发最佳实践 Spring与线程安全 HashMap与ConcurrentHashMap 关于java集合类HashMap的理解     ,      数据结构之 ...

  9. 【Android界面实现】Drawable Animation 使用介绍

        转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992     (眼下仅仅能用在View对象上的动画效果的实现有两种,一种就是上一篇的View Animat ...

  10. Unity向量投影使用

    官方例图 测试: code: public Transform point1; public Transform point2; public Transform humanPoint; public ...