基於jquery鼠標點擊其它地方隱藏層的實例代碼

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 基於jquery鼠標點擊其它地方隱藏層的實例代碼

編輯：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://jqueryjs.googlecode.com/files/jquery-1.3.2.min.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="http://www.poluoluo.com" target="_blank"></a>介紹信息</div> 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一頁:jqeury eval將字符串轉換json的方法
下一頁:基於jquery的修改當前TAB顯示標題的代碼

JQuery特效代碼

30個經典的jQuery代碼開發技巧: 本文實例總結了30個經典的jQuery代碼開發技巧。分享給大家供大家參考。具體如下：1. 創建一個嵌
jquery獲取input的value問題說明: 後來終於在偉大的百度幫助下，找到了問題的原因：代碼如下: $()是一個jquery對象，而不是一
jQuery 快速結束當前正在執行的動畫: 當需要快速結束一個當前正在執行的jquery 動畫時（還沒執行完成），如 fadeOut()，可以在

DIV CSS 佈局教程網

相關文章