初步制作拖拽div以及弹出层以及切换标签

dreamoftch

浏览: 485077 次
性别:
来自: 上海

最近访客更多访客>>

leimingchao

muyuan

123youmian

ggggoo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript
jQuery

拖拽div 弹出层切换tab标签

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>

分享到：

ZeroClipboard实现多复制 | 常用linux命令记录

2013-08-21 10:11
浏览 1228
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

初步制作拖拽div以及弹出层以及切换标签

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

初步制作拖拽div以及弹出层 以及 切换标签

评论

发表评论

相关推荐

深入理解JavaScript系列（24）：JavaScript与DOM（下）(转)

jquery form插件学习

jquery easyui tree学习

javascript实用工具方法总结

jquery.fn.extend与jquery.extend

javascript基础一览

ZeroClipboard实现多复制

html总结 javascript 下拉菜单 个人博客入门学习

jQuery源代码查看工具,css使用，js格式化

Math产生m到n直接随机整数,以及判断属性是否属于原形属性

js提交表单打开新页面

ajax设置

tencent

腾讯webQQ判断浏览器

深入浅出JSONP--解决ajax跨域问题

断点上传中的javascript代码

js 浮动层

javascript常用琐碎知识点

js获取页面的sessionid

博客园 JQuery专栏

最近访客更多访客>>

初步制作拖拽div以及弹出层以及切换标签

html总结 javascript 下拉菜单个人博客入门学习