快捷導(dǎo)航

JS彈出可拖拽可關(guān)閉的div層完整實(shí)例

更新時(shí)間：2015年02月13日 11:52:13 作者：代碼家園

這篇文章主要介紹了JS彈出可拖拽可關(guān)閉的div層完整實(shí)現(xiàn)方法,包括對div彈出層的樣式及功能的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS彈出可拖拽可關(guān)閉的div層完整實(shí)現(xiàn)方法。分享給大家供大家參考。具體實(shí)現(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=utf-8" />
<title>JS彈出可拖拽可關(guān)閉的div層</title>
<style>
html,body{height:100%;overflow:hidden;}
body,div,h2{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
center{padding-top:10px;}
button{cursor:pointer;}
#win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;}
h2{font-size:12px;height:18px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;cursor:move;}
h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;}
</style>
<script>
window.onload = function ()
{
var oWin = document.getElementById("win");
var oBtn = document.getElementsByTagName("button")[0];
var oClose = document.getElementById("close");
var oH2 = oWin.getElementsByTagName("h2")[0];
var bDrag = false;
var disX = disY = 0;
oBtn.onclick = function ()
{
oWin.style.display = "block"
};
oClose.onclick = function ()
{
oWin.style.display = "none"

};
oClose.onmousedown = function (event)
{
(event || window.event).cancelBubble = true;
};
oH2.onmousedown = function (event)
{
var event = event || window.event;
bDrag = true;
disX = event.clientX - oWin.offsetLeft;
disY = event.clientY - oWin.offsetTop;
this.setCapture && this.setCapture();
return false
};
document.onmousemove = function (event)
{
if (!bDrag) return;
var event = event || window.event;
var iL = event.clientX - disX;
var iT = event.clientY - disY;
var maxL = document.documentElement.clientWidth - oWin.offsetWidth;
var maxT = document.documentElement.clientHeight - oWin.offsetHeight;
iL = iL < 0 ? 0 : iL;
iL = iL > maxL ? maxL : iL;
iT = iT < 0 ? 0 : iT;
iT = iT > maxT ? maxT : iT;

oWin.style.marginTop = oWin.style.marginLeft = 0;
oWin.style.left = iL + "px";
oWin.style.top = iT + "px";
return false
};
document.onmouseup = window.onblur = oH2.onlosecapture = function ()
{
bDrag = false;
oH2.releaseCapture && oH2.releaseCapture();
};
};
</script>
</head>
<body>

希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript?Echarts柱狀圖label優(yōu)化中問題針對講解
這篇文章主要介紹了JavaScript?Echarts柱狀圖label優(yōu)化中問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2022-12-12
JavaScript常用工具函數(shù)庫匯總
業(yè)務(wù)中比較常用的JavaScript工具函數(shù)，可以用在前端環(huán)境，也可以用在node服務(wù)端，統(tǒng)一整理，方便查閱，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2020-09-09
5分鐘快速掌握J(rèn)S中var、let和const的異同
在javascript中有三種聲明變量的方式：var、let、const，這個(gè)是對新手們來說應(yīng)該掌握的知識，所以這篇文章主要給大家介紹了關(guān)于如何通過5分鐘快速掌握J(rèn)S中var，let和const的異同，需要的朋友可以參考下
2018-09-09
利用prop-types第三方庫對組件的props中的變量進(jìn)行類型檢測
本篇文章主要介紹了利用prop-types第三方庫對組件的props中的變量進(jìn)行類型檢測的相關(guān)知識，具有很好的參考價(jià)值。下面跟著小編一起來看下吧
2017-05-05
JS常用跨域方法實(shí)現(xiàn)原理解析
這篇文章主要介紹了JS常用跨域方法實(shí)現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-12-12
基于JavaScript實(shí)現(xiàn)文件共享型網(wǎng)站
Any?Share?是一種簡單、輕量、快速的文件共享服務(wù)。使用?Javascript?編寫，并搭建在?Firebase?平臺。本文將利用它實(shí)現(xiàn)創(chuàng)建文件共享型網(wǎng)站，感興趣的可以了解一下
2022-11-11
千萬不要錯(cuò)過的JavaScript高效對比數(shù)組差異方法
前端開發(fā)中，我們通常需要對比兩個(gè)數(shù)組對象的差異。這其中有很多種方法，但是有些方法會(huì)帶來一些問題，所以本文為大家準(zhǔn)備了一個(gè)高效方法，需要的可以參考一下
2023-05-05
xWin之JS版(2-26更新)
xWin之JS版(2-26更新)...
2007-01-01
根據(jù)user-agent判斷蜘蛛代碼黑帽跳轉(zhuǎn)代碼(js版與php版本)
這篇文章主要介紹了根據(jù)user-agent判斷蜘蛛代碼黑帽跳轉(zhuǎn)代碼(js版與php版本),需要的朋友可以參考下
2015-09-09
利用Axios實(shí)現(xiàn)無感知雙Token刷新的詳細(xì)教程
在現(xiàn)代系統(tǒng)中,Token認(rèn)證已成為保障用戶安全的標(biāo)準(zhǔn)做法,然而,盡管許多系統(tǒng)采用了這種認(rèn)證方式,卻在處理Token刷新方面存在不足,導(dǎo)致用戶體驗(yàn)不佳,許多系統(tǒng)未能提供一種無縫的、用戶無感知的Token刷新機(jī)制,所以本文介紹了教你用Axios實(shí)現(xiàn)無感知雙Token刷新
2024-08-08