快捷導(dǎo)航

DIV層之拖動、關(guān)閉、打開效果代碼

更新時間：2008年09月07日 23:19:18 作者：

非常不錯的效果，適合在當(dāng)前頁打開測試窗口，圖片等

<!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>div托動，打開，關(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>  <<a href="http://chabaoo.cn">腳本之家</a> </body> </html>

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

相關(guān)文章

JavaScript設(shè)計模式發(fā)布訂閱模式
這篇文章主要介紹了JavaScript設(shè)計模式發(fā)布訂閱模式，發(fā)布訂閱設(shè)計模式是和觀察者設(shè)計模式基本上相同，但是他們兩個設(shè)計模式不同的是發(fā)布訂閱者擁有一個事件處理中心而觀察者并沒有
2022-06-06
javascript:void(0)是什么意思示例介紹
Javascript中void是一個操作符，該操作符指定要計算一個表達式但是不返回值，有不了解的朋友可以參考下本文
2013-11-11
js ondocumentready onmouseover onclick onmouseout 樣式
下面都是一些上面的事件觸發(fā)的事先定義的代碼。
2010-07-07
Bootstrap的popover（彈出框）2秒后定時消失的實現(xiàn)代碼
Bootstrap Popover（彈出框）是使用定制的 Jquery 插件創(chuàng)建的。它可以用來顯示任何元素的一些信息。這篇文章主要介紹了Bootstrap的popover（彈出框）2秒后定時消失功能，需要的朋友參考下
2017-02-02
js時間戳與日期格式之間轉(zhuǎn)換詳解
這篇文章主要為大家詳細(xì)介紹了js時間戳與日期格式之間轉(zhuǎn)換，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-12-12
Javascript設(shè)計模式之觀察者模式的多個實現(xiàn)版本實例
這篇文章主要介紹了Javascript設(shè)計模式之觀察者模式的多個實現(xiàn)版本實例,本文給出3種實現(xiàn)版本代碼,同時給出了Jquery實現(xiàn)版本,需要的朋友可以參考下
2015-03-03
詳解jQuery插件開發(fā)方式
本文介紹了jQuery擴展、私有域、定義插件的基本步驟等知識，有需要的朋友可以看下
2016-11-11
原生js獲取寬高與jquery獲取寬高的方法關(guān)系對比
這篇文章主要介紹了原生js獲取寬高與jquery獲取寬高的方法關(guān)系對比,需要的朋友可以參考下
2014-04-04
JavaScript插件化開發(fā)教程（三）
前面我們學(xué)習(xí)了jQuery的方式開發(fā)插件，講訴的都是些基礎(chǔ)的理論知識，今天開始，我們就來實戰(zhàn)一下，學(xué)習(xí)開發(fā)自己的插件庫。
2015-01-01
JS中splice添加或刪除數(shù)組元素
本文主要介紹了JS中splice添加或刪除數(shù)組元素,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-12-12