html代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>blog.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="../css/blog.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/blog.js"></script>
</head>
<body>
<div id="login">
<div class="login_header"><h2>登陆中心</h2></div>
<div class="username">账 号：<input type="text"></div>
<div class="password">密 码：<input type="password"></div>
</div>
<div id="screen"></div>
</body>
</html>
css代码：
body{
margin:0px;
padding:0px;
text-align:center;
background:#fff;
}
#login{
width:350px;
height:200px;
margin:0px;
padding:0px;
border:1px solid black;
z-index:999;
background:#fff;
}
#screen{
width:100%;
height:100%;
background:#000;
filter:alpha(opacity=30);
opacity:0.3;
position:absolute;
top:0;
left:0;
z-index:998;
}
js代码（需要引入jquery）下面的document.documentElement可以用document代替：
$(function(){
//计算登陆框的内边距
var marginTop = -(parseInt($("#login").css("height"))/2);
var marginLeft = -(parseInt($("#login").css("width"))/2);
//登陆框居中
$("#login").css({
position:"absolute",
top:"50%",
left:"50%",
marginTop:marginTop,
marginLeft:marginLeft
});
//登陆框绑定鼠标按下的事件
$("#login").bind('mousedown',function(e){
e = e||window.event;
var old_mouse_x = e.clientX;
var old_mouse_y = e.clientY;
var new_mouse_x;
var new_mouse_y;
var old_div_x = parseInt($(this).css('left'));
var old_div_y = parseInt($(this).css('top'));
var new_div_x;
var new_div_y;
//解决IE鼠标移出浏览器出现的bug
if(this.setCapture){
this.setCapture();
}
//绑定鼠标移动的事件（这里是给整个窗体绑定的，但是为了兼容IE，不使用window，注意也不是绑定login这个div）
$(document.documentElement).bind('mousemove',function(e2){
e2 = e2||window.event;
new_mouse_x = e2.clientX;
new_mouse_y = e2.clientY;
new_div_x = (old_div_x + (new_mouse_x - old_mouse_x));
new_div_y = (old_div_y + (new_mouse_y - old_mouse_y));
$("#login").css({
'left':new_div_x+'px',
'top':new_div_y+'px',
'position':'absolute',
'marginTop':marginTop+'px',
'marginLeft':marginLeft+'px'
});
});
});
//绑定鼠标弹起的事件（这里是给整个窗体绑定的，但是为了兼容IE，不使用window，注意也不是绑定login这个div）
$(document.documentElement).bind('mouseup',function(){
//解绑鼠标移动事件处理
$(document.documentElement).unbind('mousemove');
//解决IE鼠标移出浏览器出现的bug
if(this.releaseCapture){
this.releaseCapture();
}
});
});
上面的mousemove和mouseup事件绑定到document.documentElement上面，而不是login这个div上面，也不是window上面，因为window的话，在IE里面不兼容，在Login这个div上面的话，会出现div跟不上鼠标移动的情况，是为了解决鼠标移动较快的时候，div不能跟上鼠标的移动节奏所导致的一些Bug。。。
如果上面login这个div的定位不是使用的top:50,left:50%,而是通过像素来定位的话，需要注意：
//获取鼠标位置：
e.clientX,e.clientY
//获取login这个div的左上角的实际位置：
var _login = document.getElementById("login");
top = _login.offsetTop;
left = _login.offsetLeft;
//获取login这个div的宽高：
width = _login.offsetWidth;
height = _login.offsetHeight;
//获取浏览器实际大小：
if(typeof window.innerHeight != 'undefined'){
alert({
width:window.innerWidth,
height:window.innerHeight
});
}else{
alert({
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
});
}
切换标签小demo（jquery权威指南例子）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ZeroClipboard demo实例</title>
<style type="text/css">
*{
padding:0px;margin:0px;
}
#main{
position:absolute;
top:50%;
left:50%;
width:400px;
height:250px;
margin:-125px -200px;
}
ul li{
list-style-type:none;
height:50px;
line-height:50px;
}
#menu li{
text-align:center;
width:50px;
cursor:pointer;
float:left;
}
#menu li.tabFocus{
width：50px;
border:1px solid black;
border-bottom:none;
z-index:999;
position:relative;
background:#fff;
}
#content{
width:300px;
clear:both;
border:1px solid black;
position:relative;
top:-1px;
z-index:998;
}
#content li{
display:none;
}
#content li.conFocus{
display:block;
}
#screen{
display:none;
width:100%;
height:100%;
background:#000;
filter:alpha(opacity=30);
opacity:0.3;
position:absolute;
top:0px;
left:0px;
z-index:1000;
}
</style>
<script src="../js/jquery.min.js"></script>
<script>
$(function(){
$("#menu li").each(function(index){
$(this).bind('click',function(){
$("#menu li.tabFocus").removeClass('tabFocus');
$("#content li.conFocus").removeClass('conFocus');
$(this).addClass('tabFocus');
$("#content li").eq(index).addClass('conFocus');
});
});
$(window).scroll(function(){
var top = $(this).scrollTop();
var left = $(this).scrollLeft();
$("#screen").css({
'top':top,
'left':left
});
});
});
function showScreen(){
$("#screen").css('display','block');
}
</script>
</head>
<body><input type="button" onclick="showScreen();" value="show screen">
<div id="main">
<ul id="menu">
<li class="tabFocus">家居</li>
<li>电器</li>
<li>二手</li>
</ul>
<ul id="content">
<li class="conFocus">家居显示区</li>
<li>电器显示区</li>
<li>二手货显示区</li>
</ul>
</div>
<div id="screen"></div>
<p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
<p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
<p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
<p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
<p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
<p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
<p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
<p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
<p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
<p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
</body>
</html>
提示框跟随鼠标移动：
<!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>
<title>鼠标跟随提示框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body{font:12px/1.8 arial;}
a,a:visited{color:#3366cc;text-decoration:none;}
a:hover{color:#f60;text-decoration:underline;}
.tip{width:200px;border:2px solid #ddd;padding:8px;background:#f1f1f1;color:#666;}
img{border:none;}
</style>
<script type="text/javascript">
var tip={$:function(ele){
if(typeof(ele)=="object")
return ele;
else if(typeof(ele)=="string"||typeof(ele)=="number")
return document.getElementById(ele.toString());
return null;
},
mousePos:function(e){
var x,y;
var e = e||window.event;
return{x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop};
},
start:function(obj){
var self = this;
var t = self.$("mjs:tip");
obj.onmousemove=function(e){
var mouse = self.mousePos(e);
t.style.left = mouse.x + 10 + 'px';
t.style.top = mouse.y + 10 + 'px';
t.innerHTML = obj.getAttribute("tips");
t.style.display = '';
}
obj.onmouseout=function(){
t.style.display = 'none';
}
}
}
</script>
</head>
<body>
<ol>
<li>
<a href="http://www.jb51.net/article/21812.htm" target="_blank"><img src="http://www.jb51.net/images/logo.gif" onmouseover="tip.start(this)" tips="JQuery获取元素文档大小、偏移和位置和滚动条位置的 " /></a>
</li>
<li>
<a href="http://www.jb51.net/article/21808.htm" target="_blank" onmouseover="tip.start(this)" tips="Javascript 实现TreeView CheckBox全选效果 ……">关于用户研究的一点思考</a>
</li>
<li>
<a href="http://www.jb51.net/article/21806.htm" target="_blank" onmouseover="tip.start(this)" tips="JavaScript 学习笔记（九）call和apply方法 ……">WEB重构拾趣</a>
</li>
</ol>
<div id="mjs:tip" class="tip" style="position:absolute;left:0;top:0;display:none;"></div>
</body>
</html>
相关推荐
标题"Js弹出层（支持拖拽，多个弹窗自动切换层级）"提及的核心知识点是JavaScript中的弹出层实现，特别是它包含的两个关键特性：拖拽功能和多层弹窗之间的层级自动切换。这意味着我们要探讨的是如何在JavaScript中...
在网页设计中，"div弹出层"是一种常见的交互元素，用于显示临时信息或与用户进行交互。jQuery库因其简洁的API和强大的功能，成为实现此类效果的首选工具。本主题将深入探讨如何利用jQuery来实现十种不同的弹出层效果...
以上就是关于“jQuery弹出div层窗口、div屏幕居中、背景滤镜效果和div拖拽效果”的核心知识点。通过熟练掌握这些技巧，开发者可以创建更富有互动性和用户体验的网页应用。在实际开发中，还需要根据不同的项目需求，...
// 切换弹出层的显示状态 ``` 为了增强用户体验，我们还可以使用`fadeIn()`、`fadeOut()`或`slideToggle()`等方法实现平滑的过渡效果。 另外，Jquery的插件系统也是创建弹出层的重要工具。例如，"Jquery Dialog...
首先，让我们了解“弹出窗口”或“弹出层”的概念。在网页设计中，弹出窗口通常指的是不依赖浏览器原生窗口（如alert()、prompt()、confirm()）的自定义对话框。这些对话框可以是div元素或其他HTML元素，通过CSS进行...
- `toggle()`：切换弹出层的开闭状态。 - `isOpened()`：检查弹出层是否处于打开状态。 同时，还支持事件绑定，如： ```javascript modal.on('open.modal', function() { console.log('弹出层打开'); }); modal....
5. **键盘支持**：支持Esc键关闭弹出层，以及Tab键在弹出层内的元素间进行焦点切换。 6. **动画效果**：Boxy提供了多种打开和关闭的动画效果，增加视觉吸引力。 使用Boxy插件，开发者需要先引入jQuery库和Boxy的...
在本文中，我们将深入探讨如何使用jQuery来实现一个可单击弹出的Div层窗口，同时具备可关闭和拖动的功能。这个功能在许多网页应用中都非常常见，它能够为用户提供交互式的用户体验，例如提示信息、用户反馈或者简单...
3.jQuery弹出层插件PopupDiv-v1.0下载(支持ajax、居中等效果) 4.jQuery超炫淡入淡出效果DIV渐变居中弹出框插件下载 5.jquery黑色+蓝色风格DIV提示框示例 6.一款jQuery+DIV居中淡入淡出信息提示框示例 7.一...
6. **自定义功能**：根据需求，还可以扩展弹出框功能，比如添加自动关闭计时器、拖动功能、键盘关闭支持等。 总结来说，通过jQuery，我们可以轻松地创建具有各种特性的弹出框效果，提高网站的用户体验。在这个过程...
- 弹出层：如模态框，用于显示额外信息或确认操作。 - 手风琴菜单：可展开和折叠的菜单项。 - 瀑布流布局：根据屏幕尺寸自适应的网格布局，常用于图片展示。 - 滚动大事：跟随页面滚动显示固定内容。 - 滚差...
弹出层和手风琴菜单利用了JS的显示/隐藏功能，而瀑布流布局和滚动监听则涉及到更复杂的布局计算和事件处理。 JavaScript的高级特性，如闭包、原型链、异步编程（Promise和async/await），对于优化拖拽布局框架的...
4. 使用`alert("弹出的信息内容")`方法实现JavaScript弹出信息对话框。 5. 网页之间的链接是通过URL（Uniform Resource Locator）来实现的。 6. 创建网站首页时通常取文件名为`index.html`。 7. 要退出DreamweaverMX...
1. **纯div+css制作的弹出菜单**： 这是一种常见的网页交互设计，使用HTML的`div`元素作为容器，CSS来定义样式和布局，实现菜单的弹出效果。通常涉及定位（positioning）、浮动（floating）、过渡（transitions）和...
19. **jQuery ThickBox**：一种网页用户界面对话小部件，使用JavaScript编写，提供弹出式对话框。 20. **Simple Modal Demos**：跨浏览器覆盖层和容器，用于填充由Simple Modal提供的内容，增强页面互动性。 21. *...
弹出提示和透明层常用于警告、确认或信息传递。JavaScript可以创建新的元素，设置内容和样式，然后将其定位在屏幕的特定位置。透明层通常用于覆盖页面，防止用户在提示显示时进行其他操作。 类似163的JavaScript...
1.1 弹出窗口控制 2 实例001 打开新窗口显示广告信息 2 实例002 定时打开窗口 4 实例003 通过按钮创建窗口 5 实例004 自动关闭的广告窗口 6 实例005 控制弹出窗口居中显示 7 实例006 弹出的窗口之Cookie控制 9 实例...
1.12 强制在弹出窗口中打开链接 1.13 平滑滚动页面到某个锚点 1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 ...
1.12 进入页面同时弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 ...
1.12 进入页面同时弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 ...