熟悉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. WebDriver API——第2部分Exceptions

    Exceptions that may happen in all the webdriver code. exception selenium.common.exceptions.ElementNo ...

  2. struts result动态结果集 带参数的结果集

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC     &qu ...

  3. 移动端页面弹幕小Demo实例说明

    代码地址如下:http://www.demodashi.com/demo/11595.html 弹幕小Demo实例地址,点击看效果 写在前面:尝试做了一下弹幕的实例,欢迎提出并指正问题 问题说明: D ...

  4. Vue Element Form表单时间验证控件使用

    如果直接使用Element做时间选择器,其规则(rules)不添加type:'date',会提示类型错误,处理这个需要规范值的类型为date. 时间格式化过滤器 import Vue from 'vu ...

  5. sql 数据类型 论可变长度字符串与定长性能差异（my sql版）

    首先从字节上来说CHAR是定长,意思就是只要输入在我这个定长以下,不管是几个字符,它的实际占用空间都是CHAR定长的长度.而VARCHAR则相对来说会节省一点空间,比如:你VARCHAR的长度设为10 ...

  6. 冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器

    转:http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html <!DOCTYPE html PUBLIC "-//W3C ...

  7. log4cxx在linux下的编译使用

    最近在linux下使用log4cxx库,按照其官方文档提供的方法来进行编译,不能成功,又利用google搜索了好几个中文博客上讲述在linux下编译使用log4cxx库的方法,依然不能成功,在这里我奉 ...

  8. unity, 不要试图用rigidbody.Sleep()停止rigidbody

    如果想让rigidbody pause,用rigidbody.Sleep()是完全错误的办法.因为有很多情况都可能使一个处在sleep的rigidbody唤醒,所以调用rigidbody.Sleep( ...

  9. atitit. 分销系统规划p8k

    atitit. 分销系统规划p8k 1. 商户平台管理 overview2 1.1. 分销业务管理2 1.2. 文案管理2 1.3. 订单管理3 1.4. 统计报表3 1.5. 财务结算3 1.6.  ...

  10. html-loldemo

    百度版lol百科小样 <!DOCTYPE html> <html lang="en"> <head> <title>英雄联盟百科&l ...