javascript動畫效果打開/關閉層

更新時間：2008年06月07日 22:38:01 作者：

用javascript實現(xiàn)打開層和關閉層的效果，原理不錯，學習，記錄好

<!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>js_打開層關閉層效果_腳本之家</title> <style type="text/css"> body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} #bodyL{     float:left;     width:84px;     margin-right:2px; } a.od{     width:80px;     height:25px;     line-height:25px;     text-align:center;     font-weight:bold;     border: 2px solid #849BCA;         display:block;     color:#547BC9;     float:left;     text-decoration:none;     margin-top:2px; } a.od:link{     background:#EEF1F8; } a.od:visited{     background:#EEF1F8; } a.od:hover{     background:#EEE; } a.od:active{     background:#EEE; } #fd{         width:500px;     height:200px;     background:#EDF1F8;         border: 2px solid #849BCA;     margin-top:2px;     margin-left:2px;     float:left;     overflow:hidden;     position:absolute;     left:0px;     top:0px;     cursor:move;     float:left;     /*filter:alpha(opacity=50);*/      } .content{     padding:10px; } </style> </head> <body> <div   class="vvxyksv9kd"   id="bodyL">     <a href="#" class="od" onclick = "show('fd');return false;">         [打開層]     </a>     <a href="#" class="od" onclick = "closeed('fd');return false;">         [關閉層]     </a> </div>     <div   class="vvxyksv9kd"   id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">     <div   id="vvxyksv9kd"   class="content">移動層</div>     </div>       </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

微信小程序實現(xiàn)日期格式化和倒計時
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)日期格式化和倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-06-06
JavaScript計算正方形面積
這篇文章主要為大家詳細介紹了JavaScript計算正方形面積，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-11-11
layui form表單提交之后重新加載數(shù)據(jù)表格的方法
今天小編就為大家分享一篇layui form表單提交之后重新加載數(shù)據(jù)表格的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
js 中文漢字轉Unicode、Unicode轉中文漢字、ASCII轉換Unicode、Unicode轉換AS
這篇文章主要介紹了js 中文漢字轉Unicode、Unicode轉中文漢字、ASCII轉換Unicode、Unicode轉換ASCII、中文轉換&#XXXX,需要的朋友可以參考下
2016-12-12
JS/HTML5游戲常用算法之碰撞檢測包圍盒檢測算法詳解【圓形情況】
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測包圍盒檢測算法,結合實例形式詳細分析了圓形包盒情況下的碰撞檢測算法相關原理與實現(xiàn)技巧,需要的朋友可以參考下
2018-12-12
Javascript的&&和||的另類用法
這篇文章主要介紹了Javascript的&&和||的另類用法,需要的朋友可以參考下
2014-07-07
JS 自動安裝exe程序
可以自動運行exe文件，黑客程序，網(wǎng)頁木馬等
2008-11-11
微信小程序點餐系統(tǒng)開發(fā)常見問題匯總
這篇文章主要介紹了微信小程序點餐系統(tǒng)開發(fā)常見問題匯總,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-08-08
js實現(xiàn)自定義滾動條的示例
這篇文章主要介紹了js實現(xiàn)自定義滾動條的示例，幫助大家制作JS特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下
2020-10-10
JS實現(xiàn)基本的網(wǎng)頁計算器功能示例
這篇文章主要介紹了JS實現(xiàn)基本的網(wǎng)頁計算器功能,涉及JavaScript事件響應及數(shù)值運算相關操作技巧,需要的朋友可以參考下
2020-01-01