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" οnclick="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>