本文為大家介紹下層自動緩慢展開收縮在浏覽器打開時是如何實現的
主要用到了slideUp及slideDown等主要jquery方法
感興趣的朋友可以參考下哈
希望對大家有所幫助
例子
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "
//W
C//DTD XHTML
Strict//EN" "
<html xmlns="
<head>
<meta http
equiv="Content
Type" content="text/html; charset=utf
" />
<title>無標題文檔</title>
<style>
#screefull{display:block; border:
px solid #bddbf
; width:
px; padding:
px
px
px; margin:
auto
px; background:#fef
db; }
#mostrar{display:block; width:
px; display:none;}
#screefull a
close{ display:block; width:
px; height:
px; background:url(img/cx
gif) no
repeat
; overflow:hidden; float:right; margin:
px
px
; *margin
right:
px; text
decoration:none;}
#screefull p{ display:block; text
align:center; font
family:"Microsoft Yahei"; font
size:
px; color:#
; height:
px; line
height:
px; vertical
align:middle;}
#screefull var{ display:inline
block; *display:inline; *zoom:
; background:url(img/wicon
gif) no
repeat
; width:
px; height:
px; overflow:hidden; vertical
align:middle; margin
right:
px;}
#screefull em{ display:inline
block; *display:inline; *zoom:
; color:#ff
; font
family:"Microsoft Yahei"; font
style:normal;}
#screefull span{ display:inline
block; *display:inline; *zoom:
; vertical
align:middle;}
#screefull p a{ display:inline
block; *display:inline; *zoom:
; color:#
ff; text
decoration:underline;}
</style>
<script type="text/javascript" src="js/jquery
js"></script>
</head>
<body>
<!
begin:
>
<div id="warn" class="scree clearfix" style="display:none;">
<div id="screefull">
<a href="#" class="close" onclick="closewarn(
close
)">[x]</a>
<p><span> 在<em>未通過審核的網站</em>添加廣告代碼
將不會產生傭金
<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(
);
}
</script>
<!
end:
>
</body>
</html>
解釋上面代碼段
$("#warn")slideUp("slow");向上滑動 $("#warn")slideDown();向下滑動
$post(windowlocationhref{op : setwarn}function(data)
{
return true;
})
運用到了ajax 提交 跟服務器進行交互
第一個參數是請求的地址 第二個是提交的參數 第三個是請求成功 之後調用的方法
參數op 的值是setwarn json串的格式具體運用解說看
url 對應 locaotionhref(取得是當前頁面的地址)
data對應 {opsetwarn} 字符串
success 對應 函數
windowonload = function(){}作用一般在<text/javascript>中寫的函數都要在body頁面中調用用此函數就不用等著body頁面中調用就可以執行了
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20640.html
