快捷導航

javascript動畫效果打開/關(guān)閉層

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

用javascript實現(xiàn)打開層和關(guā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_打開層關(guān)閉層效果_腳本之家</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="ublnpf9mb"   id="bodyL">     <a href="#" class="od" onclick = "show('fd');return false;">         [打開層]     </a>     <a href="#" class="od" onclick = "closeed('fd');return false;">         [關(guān)閉層]     </a> </div>     <div   class="ublnpf9mb"   id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">     <div   id="ublnpf9mb"   class="content">移動層</div>     </div>       </body> </html>

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

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)日期格式化和倒計時
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)日期格式化和倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-06-06
JavaScript計算正方形面積
這篇文章主要為大家詳細介紹了JavaScript計算正方形面積，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-11-11
layui form表單提交之后重新加載數(shù)據(jù)表格的方法
今天小編就為大家分享一篇layui form表單提交之后重新加載數(shù)據(jù)表格的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
js 中文漢字轉(zhuǎn)Unicode、Unicode轉(zhuǎn)中文漢字、ASCII轉(zhuǎn)換Unicode、Unicode轉(zhuǎn)換AS
這篇文章主要介紹了js 中文漢字轉(zhuǎn)Unicode、Unicode轉(zhuǎn)中文漢字、ASCII轉(zhuǎn)換Unicode、Unicode轉(zhuǎn)換ASCII、中文轉(zhuǎn)換&#XXXX,需要的朋友可以參考下
2016-12-12
JS/HTML5游戲常用算法之碰撞檢測包圍盒檢測算法詳解【圓形情況】
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測包圍盒檢測算法,結(jié)合實例形式詳細分析了圓形包盒情況下的碰撞檢測算法相關(guān)原理與實現(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事件響應(yīng)及數(shù)值運算相關(guān)操作技巧,需要的朋友可以參考下
2020-01-01