快捷導(dǎo)航

瀏覽器打開(kāi)層自動(dòng)緩慢展開(kāi)收縮實(shí)例代碼

更新時(shí)間：2013年07月04日 15:07:45 作者：

本文為大家介紹下層自動(dòng)緩慢展開(kāi)收縮在瀏覽器打開(kāi)時(shí)是如何實(shí)現(xiàn)的，主要用到了slideUp及slideDown等主要jquery方法，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助

例子：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>無(wú)標(biāo)題文檔</title> 
<style> 
#screefull{display:block; border:1px solid #bddbf3; width:954px; padding:3px 5px 7px; margin:0 auto 10px; background:#fef9db; } 
#mostrar{display:block; width:954px; display:none;} 
#screefull a.close{ display:block; width:25px; height:20px; background:url(img/cx.gif) no-repeat 0 0; overflow:hidden; float:right; margin:16px 8px 0 0; *margin-right:5px; text-decoration:none;} 
#screefull p{ display:block; text-align:center; font-family:"Microsoft Yahei"; font-size:14px; color:#000; height:28px; line-height:28px; vertical-align:middle;} 
#screefull var{ display:inline-block; *display:inline; *zoom:1; background:url(img/wicon.gif) no-repeat 0 0; width:28px; height:28px; overflow:hidden; vertical-align:middle; margin-right:10px;} 
#screefull em{ display:inline-block; *display:inline; *zoom:1; color:#ff0000; font-family:"Microsoft Yahei"; font-style:normal;} 
#screefull span{ display:inline-block; *display:inline; *zoom:1; vertical-align:middle;} 
#screefull p a{ display:inline-block; *display:inline; *zoom:1; color:#2400ff; text-decoration:underline;} 
</style> 
<script type="text/javascript" src="js/jquery.js"></script> 
</head> 
<body> 
<!--begin:1--> 
<div id="warn" class="scree clearfix" style="display:none;"> 
<div id="screefull"> 
<a href="#" class="close" onclick="closewarn('close')">[x]</a> 
<p><span>在<em>未通過(guò)審核的網(wǎng)站</em>添加廣告代碼，將不會(huì)產(chǎn)生傭金。<a href="#" target="_blank" >我知道了</a></span></p> 
</div> 
</div> 
<script type="text/javascript"> 
function closewarn(type) 
{ 
$("#warn").slideUp("slow"); 
if(type == 'know') 
{ 
$.post(window.location.href,{op : 'setwarn'},function(data) 
{ 
return true; 
}); 
} 
} 
window.onload = function() 
{ 
$("#warn").slideDown(2000); 
} 
</script> 
<!--end:1--> 
</body> 
</html> 

解釋上面代碼段：
1、$("#warn").slideUp("slow");向上滑動(dòng)， $("#warn").slideDown(2000);向下滑動(dòng)
2、$.post(window.location.href,{op : 'setwarn'},function(data)
{
return true;
})
運(yùn)用到了ajax 提交跟服務(wù)器進(jìn)行交互，
第一個(gè)參數(shù)是請(qǐng)求的地址第二個(gè)是提交的參數(shù) 第三個(gè)是請(qǐng)求成功之后調(diào)用的方法
參數(shù)op 的值是setwarn json串的格式具體運(yùn)用解說(shuō)看http://www.w3school.com.cn/jquery/ajax_post.asp
url 對(duì)應(yīng) locaotion.href(取得是當(dāng)前頁(yè)面的地址)
data對(duì)應(yīng) {op：setwarn} 字符串
success 對(duì)應(yīng) 函數(shù)

3、window.onload = function(){}作用一般在<text/javascript>中寫(xiě)的函數(shù)都要在body頁(yè)面中調(diào)用，用此函數(shù)就不用等著body頁(yè)面中調(diào)用就可以執(zhí)行了

您可能感興趣的文章: