熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

浏覽器打開層自動緩慢展開收縮實例代碼

2013-11-15 12:17:02  來源: JSP教程 
本文為大家介紹下層自動緩慢展開收縮在浏覽器打開時是如何實現的主要用到了slideUp及slideDown等主要jquery方法感興趣的朋友可以參考下哈希望對大家有所幫助  

  例子

復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Strict//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" 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:#fefdb; }
#mostrar{display:block; width:px; display:none;}
#screefull aclose{ display:block; width:px; height:px; background:url(img/cxgif) norepeat ; overflow:hidden; float:right; margin:px px ; *marginright:px; textdecoration:none;}
#screefull p{ display:block; textalign:center; fontfamily:"Microsoft Yahei"; fontsize:px; color:#; height:px; lineheight:px; verticalalign:middle;}
#screefull var{ display:inlineblock; *display:inline; *zoom:; background:url(img/wicongif) norepeat ; width:px; height:px; overflow:hidden; verticalalign:middle; marginright:px;}
#screefull em{ display:inlineblock; *display:inline; *zoom:; color:#ff; fontfamily:"Microsoft Yahei"; fontstyle:normal;}
#screefull span{ display:inlineblock; *display:inline; *zoom:; verticalalign:middle;}
#screefull p a{ display:inlineblock; *display:inline; *zoom:; color:#ff; textdecoration:underline;}
</style>
<script type="text/javascript" src="js/jqueryjs"></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(windowlocationhref{op : setwarn}function(data)
{
return true;
});
}
}
windowonload = 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
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.