基于jquery鼠标点击其它地方隐藏层的实例代码

更新时间：2011年01月23日 21:22:58 作者：

基于jquery鼠标点击其它地方隐藏层的实例代码，需要的朋友可以参考下。

效果图:

下面的代码运行后，需要再刷新一下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>test</title> <style type="text/css"> .div_d{ padding:10px; border:1px dotted red; position:absolute; display:none; cursor:pointer;} </style> <script src="http://demo.jb51.net/jslib/jquery/jquery.js"></script> <script type="text/javascript"> $(function(){ $("input[id=search]").focus(function(even){ var pos=$(this).offset(); $(".div_d").css({left:pos.left,top:pos.top+20+"px",display:"block"}); }); document.onclick=function(e){ var e=e?e:window.event; var tar = e.srcElement||e.target; if(tar.id!="search"){ if($(tar).attr("class")=="div_d"){ $(".div_d").css("display","block") }else{ $(".div_d").css("display","none"); } } } }) </script> </head> <body style=" padding-left:300px;"> <input id="search" /> <div class="div_d"> <a href="https://www.jb51.net" target="_blank">脚本之家</a>介绍信息</div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

基于jQuery实现的菜单切换效果
这篇文章主要介绍了基于jQuery实现的菜单切换效果，需要的朋友可以参考下
2015-10-10
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
网上发现一个很有意思的jQuery旋转插件，支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高级浏览器下使用Transform，低版本ie使用VML实现,感兴趣的朋友可以了解下
2013-01-01
jQuery内容折叠效果插件用法实例分析(附demo源码)
这篇文章主要介绍了jQuery内容折叠效果插件用法,结合实例形式分析了jQuery展开折叠插件jquery.coolfieldset.js的具体使用技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
2016-04-04
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
基于jquery实现的上传图片及图片大小验证、图片预览效果代码，需要的朋友可以参考下。
2011-04-04
jquery对dom的操作常用方法整理
jquery对dom的操作包括了对html内容的添加、删除元素/内容、操作CSS等等，本文整理了一些dom操作的常用方法，感兴趣的朋友可以参考下哈
2013-06-06
jquery修改属性值实例代码(设置属性值)
jQuery attr()方法用于设置/改变属性值，下面的例子演示如何改变（设置）链接中 href 属性的值
2014-01-01
Jquery Easyui分割按钮组件SplitButton使用详解（17）
这篇文章主要为大家详细介绍了Jquery Easyui分割按钮组件SplitButton的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
jQuery插件boxScroll实现图片轮播特效
本文给大家分享的是使用jQuery插件Boxscroll来实现简单的图片轮播特效的代码，非常简单实用，有需要的小伙伴可以参考下。
2015-07-07
利用jQuery.Validate异步验证用户名是否存在（推荐）
这篇文章主要介绍了利用jQuery.Validate异步验证用户名是否存在的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-12-12
使用jspdf生成pdf报表
本文给大家讲述的是如何使用jspdf生成pdf报表的方法和示例，十分的实用，有需要的小伙伴可以参考下。
2015-07-07

基于jquery鼠标点击其它地方隐藏层的实例代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具