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

最新推荐文章于 2024-02-08 09:50:47 发布

TCH987551623

最新推荐文章于 2024-02-08 09:50:47 发布

阅读量91

点赞数

分类专栏： javascript jQuery 文章标签：拖拽div 弹出层切换tab标签

本文链接：https://blog.csdn.net/TCH987551623/article/details/84471386

版权

javascript 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

jQuery

7 篇文章 0 订阅

订阅专栏

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>

提示框跟随鼠标移动：

<!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.οnmοusemοve=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.οnmοuseοut=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" οnmοuseοver="tip.start(this)" tips="JQuery获取元素文档大小、偏移和位置和滚动条位置的 " /></a> 
</li> 
<li> 
<a href="http://www.jb51.net/article/21808.htm" target="_blank" οnmοuseοver="tip.start(this)" tips="Javascript 实现TreeView CheckBox全选效果 ……">关于用户研究的一点思考</a> 
</li> 
<li> 
<a href="http://www.jb51.net/article/21806.htm" target="_blank" οnmοuseοver="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>

TCH987551623

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初步制作拖拽div以及弹出层以及切换标签

html代码： &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;blog.html&lt;/title&gt; &lt;meta http-equiv="keywor
复制链接

扫一扫