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

最新推荐文章于 2025-07-07 12:20:30 发布
原创 最新推荐文章于 2025-07-07 12:20:30 发布 · 668 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个简单的登录页面，包括页面布局、交互效果和响应式设计，同时提供了代码示例以供参考。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

 

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>

 

 

 

 

 

 

 

 

 

 

 

 

 

selenium切换到div_Python系统学习 - Selenium之WebDriver API
weixin_39986171的博客
12-09 917
好久不见，经历了国庆节、中秋节～，我又回来啦，这次我们会学习到很多新知识，主要是对上一章Selenium对WebDriver进行一个学习，掌握大部分对控件的定位及操作本章的源码及学习资源：​pan.baidu.com好了下面，我们直接先从本章的知识点进行了解（内容很长很长很长，因为我都放在一个py文件了哈哈哈，凡事不要慌，我已经帮你们分好点了）Selenium Begin:1.安装Selenium...
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
10-23
在本文中，我们将深入探讨如何使用jQuery来实现一个可单击弹出的Div层窗口，同时具备可关闭和拖动的功能。这个功能在许多网页应用中都非常常见，它能够为用户提供交互式的用户体验，例如提示信息、用户反馈或者简单...
实现div拖拽的几种方式
qq_40285302的博客
03-26 607
[html] view plain copy&lt;%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%&gt;  &lt;html&gt;  &lt;head&gt;  &lt;meta charset="utf-8"&gt;  &lt;title&gt;jQuery拖放&lt;/
HTML5实现拖放
上庸者-不服周
09-30 4468
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
35、JavaScript中DIV的完美拖拽---解决拖拽中的文字选中的问题
Learning
06-20 5886
1、拖拽中的文字选中问题        1.1  阻止默认事件        1.2  IE下拖拽有问题               -- 事件捕获 2、代码 #div1 {width:100px; height:100px; background:red; position:absolute;} 无标题文档 window.onload=function () { var o
HTML 可拖动div标签
u012939262的博客
08-11 5805
可拖动div
复制、删除并拖动div
wangsaisoon的博客
12-22 1718
源码下载：链接：https://pan.baidu.com/s/1F-3_zqIQ5V4_MzWv6EVikQ 密码：riq3 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;MyHtml.html&lt;/title&gt; &lt;meta http-equiv="keywords" conte..
JAVASCRIPT之弹出层、弹窗效果+拖曳功能
netuser1937的博客
02-10 753
JAVASCRIPT之弹出层、弹窗效果+拖曳功能
layui框架学习（27：弹出层模块_其它用法）
gc_2299的博客
06-19 1017
学习layui的layer模块中其它函数和参数的基本用法。
网页弹出层设计与实现大全
weixin_36288992的博客
07-07 557
在现代Web开发中，用户体验是至关重要的一个环节。Aero效果弹出层插件以其独特的视觉效果和良好的用户体验脱颖而出。Aero效果弹出层插件是一种JavaScript插件，主要提供了更为美观的弹出层效果，通过模仿微软的Aero Glass视觉样式，插件能够提供透明度和模糊效果，为网页增添了一丝现代感。要使用Aero效果弹出层插件，通常只需要几个步骤：1. 下载插件的最新版本，插件一般会被压缩在一个ZIP文件中。
div弹出层 jquery
12-05
在网页设计中，"div弹出层"是一种常见的交互元素，用于显示临时信息或与用户进行交互。jQuery库因其简洁的API和强大的功能，成为实现此类效果的首选工具。本主题将深入探讨如何利用jQuery来实现十种不同的弹出层效果...
Js弹出层（支持拖拽，多个弹窗自动切换层级）
03-20
标题"Js弹出层（支持拖拽，多个弹窗自动切换层级）"提及的核心知识点是JavaScript中的弹出层实现，特别是它包含的两个关键特性：拖拽功能和多层弹窗之间的层级自动切换。这意味着我们要探讨的是如何在JavaScript中...
实现带拖动功能的div弹出层技术解析
要让DIV弹出层具有拖动功能，则需要编写额外的JavaScript代码来处理用户的拖拽动作。拖动功能的实现通常包括鼠标的按下（mousedown）、移动（mousemove）和释放（mouseup）三个事件。在鼠标按下事件中记录当前的鼠标...
潮白、北运、蓟运河水系流经空间范围shp矢量数据.rar
最新发布
08-12
潮白、北运、蓟运河水系流经空间范围shp矢量数据
浪漫网页版女友告白与纪念日特效
08-12
资源下载链接为： https://pan.quark.cn/s/9648a1f24758 这个HTML文件是一个专门设计的网页，适合在告白或纪念日这样的特殊时刻送给女朋友，给她带来惊喜。它通过HTML技术，将普通文字转化为富有情感和创意的表达方式，让数字媒体也能传递深情。HTML（HyperText Markup Language）是构建网页的基础语言，通过标签描述网页结构和内容，让浏览器正确展示页面。在这个特效网页中，开发者可能使用了HTML5的新特性，比如音频、视频、Canvas画布或WebGL图形，来提升视觉效果和交互体验。 原本这个文件可能是基于ASP.NET技术构建的，其扩展名是“.aspx”。ASP.NET是微软开发的一个服务器端Web应用程序框架，支持多种编程语言（如C#或VB.NET）来编写动态网页。但为了在本地直接运行，不依赖服务器，开发者将其转换为纯静态的HTML格式，只需浏览器即可打开查看。 在使用这个HTML特效页时，建议使用Internet Explorer（IE）浏览器，因为一些老的或特定的网页特效可能只在IE上表现正常，尤其是那些依赖ActiveX控件或IE特有功能的页面。不过，由于IE逐渐被淘汰，现代网页可能不再对其进行优化，因此在其他现代浏览器上运行可能会出现问题。 压缩包内的文件“yangyisen0713-7561403-biaobai(html版本)_1598430618”是经过压缩的HTML文件，可能包含图片、CSS样式表和JavaScript脚本等资源。用户需要先解压，然后在浏览器中打开HTML文件，就能看到预设的告白或纪念日特效。 这个项目展示了HTML作为动态和互动内容载体的强大能力，也提醒我们，尽管技术在进步，但有时复古的方式（如使用IE浏览器）仍能唤起怀旧之情。在准备类似的个性化礼物时，掌握基本的HTML和网页制作技巧非常
XILINX FPGA网络堆栈中TCP&UDP卸载引擎的技术解析及应用 · 数据包处理 2025版
08-12
XILINX FPGA网络堆栈中的TCP和UDP卸载引擎。首先阐述了FPGA在网络数据处理中的重要性和应用场景，接着具体分析了TCP和UDP卸载引擎的工作原理及其代码实现，包括状态机、缓冲区管理和校验和计算等功能模块。最后，通过对性能的评估展示了FPGA相较于传统CPU的优势，强调了其在提升系统吞吐量和响应速度方面的重要作用。 适合人群：对FPGA技术和网络协议有一定了解的研发人员和技术爱好者。 使用场景及目标：适用于需要深入了解FPGA网络堆栈内部机制的研究人员，以及希望优化网络数据处理性能的工程师。 其他说明：本文不仅提供了理论分析，还涉及具体的代码实现细节，有助于读者全面掌握TCP和UDP卸载引擎的设计与优化方法。
嵌入式系统中Md500E算法的C语言实现及其关键模块解析 - 任务调度
08-12
内容概要：本文深入探讨了Md500E算法的完整C语言实现，涵盖多个重要模块。首先介绍了硬件抽象层（HAL）中GPIO翻转操作的独特实现方法，避免传统异或方式带来的硬件响应延迟问题。接着详细解析了通信协议的状态机设计，利用枚举类型和静态变量确保数据传输的可靠性。内存管理方面采用简单的线性分配策略，有效解决嵌入式环境中常见的内存碎片问题。实时任务调度部分展示了基于时间片的协作式调度机制，巧妙地处理了32位计时器溢出问题。此外，文中还涉及一些实用的宏定义技巧以及精确的延时函数实现。 适合人群：具有一定C语言基础并希望深入了解嵌入式系统开发的技术人员。 使用场景及目标：适用于嵌入式系统的开发者，特别是那些需要理解和优化低级别硬件接口、通信协议、内存管理和任务调度的人群。目标是帮助读者掌握高效简洁的编码技巧，提高系统的稳定性和性能。 阅读建议：由于涉及到较多底层细节和技术点，建议读者结合实际项目进行对比学习，同时可以尝试将文中的代码片段移植到自己的开发环境中进行测试和验证。
P2混合动力轿车并联模型：基于正向开发的阻力计算与扭矩分配方法
08-12
P2混合动力轿车并联模型的设计与实现，重点在于基于正向开发的方法。文章首先探讨了整车阻力的计算，包括滚动阻力、空气阻力和坡道阻力等，并提供了相应的计算函数。接着，文章讨论了如何根据当前车辆模式（如经济模式或运动模式）进行扭矩分配，确保发动机和电机能够协同工作。最后，文章强调了代码的可读性、可维护性和可扩展性，展示了正向开发理念的应用。 适合人群：从事汽车工程研究的技术人员、对混合动力系统感兴趣的工程师和研究人员。 使用场景及目标：适用于希望深入了解P2混合动力轿车并联模型的工作机制及其开发流程的专业人士，旨在提高对混合动力系统的理解和应用能力。 其他说明：文中提供的代码片段有助于读者更好地理解具体的计算过程和技术实现，同时也鼓励读者进一步探索和优化相关算法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值