<script type="text/javascript">
function _move(){
var objthis=this;
this.x=null;
this.y=null;
this.xx=null;
this.yy=null;
this.xxx=null;
this.yyy=null;
this.obja=null;
this.co=null;
this.t=null;
document.onmousemove=function(){
try{objthis.x=arguments[0].screenX;objthis.y=arguments[0].screenY;}
catch(err){objthis.x=window.event.x;objthis.y=window.event.y;}
}
}
_move.prototype.create=function(a,b){
if(this.obja==null){
this.co=b;
var objthis=this;
this.obja=a;
this.obja.onmouseup=function(){objthis.up()}
this.xx=this.x;
this.yy=this.y;
this.xxx=this.obja.offsetLeft;
this.yyy=this.obja.offsetTop;
this.obja.style.position="absolute";
this.move();
}
}
_move.prototype.move=function(){
var objthis=this;
var x=this.xxx + this.x - this.xx;
var y=this.yyy + this.y - this.yy;
this.obja.style.left = x + "px";
this.obja.style.top = y + "px";
this.t=setTimeout(function(){objthis.move()},1)
}
_move.prototype.up=function(){
clearTimeout(this.t)
if(this.co==1){
this.obja.style.left = this.xxx + "px";
this.obja.style.top = this.yyy + "px";
}
this.xxx=null;
this.yyy=null;
this.obja=null;
}
var moveLoginForm =new _move();
</script>
formDiv要拖动的弹出框ID,div为可以拖动的点,一般为弹出框顶部
<div class="title" onmousedown="moveLoginForm.create($('formDiv'))" onmouseover="this.title='按住左鼠移动窗口位置'"><h3>登 录</h3><span><a href="javascript:$('usernameInfo').innerHTML='';formClose();"></a></span></div>
分享到:
相关推荐
总结起来,实现“js仿百度弹出登录框支持鼠标拖拽效果”主要涉及到JavaScript的DOM操作、事件监听、CSS样式控制以及简单的拖拽算法。通过结合HTML、CSS和JavaScript,我们可以创建出一个功能齐全、交互友好的弹出...
本资源"百度弹出登录框鼠标拖拽效果代码.zip"包含了一个实现特定功能的示例代码,即使用原生JS创建一个可拖动的登录框。这种效果常见于许多网站,尤其是需要用户输入凭证或执行其他操作时,提供了一个方便的、可...
fixPosition:设定是否弹出框随滚动条一起浮动,保持在屏幕的固定位置,默认为true dragOut:设定是否允许拖出屏幕范围,默认为false。 autoClose:设定用户点击窗口中按钮后自动关闭窗口,默认为true(设定为...
在JavaScript编程中,实现"js拖拽仿...通过以上这些技术点的组合应用,我们可以实现一个类似于百度登录框的可拖拽弹出框,既满足功能需求,又能提供良好的用户体验。在实际开发中,可以根据具体需求进行扩展和优化。
在JavaScript(JS)中,实现鼠标拖拽效果可以为用户界面添加交互性和动态性,例如在本案例中,我们讨论的是仿百度弹出登录框的拖拽特效。这个特效允许用户通过鼠标轻松移动登录框的位置,提升用户体验。下面将详细...
在本文中,我们将深入探讨如何实现“百度弹出登录框鼠标拖拽效果特效代码”,这是一种使用原生JavaScript实现的功能,允许用户将登录框任意拖动到网页的任何位置,提高用户体验。这种效果常见于各种网站,尤其是那些...
**artDialog弹出框**是JavaScript的一个插件,用于创建可自定义的模态和非模态对话框。它具有丰富的样式和功能,可以轻松地集成到ASP.NET项目中。在ASP.NET中使用artDialog,你需要: 1. **引入资源**:下载...
- **模态对话框**:利用CSS和JavaScript,可以创建一个覆盖在当前页面上的半透明遮罩层,以及一个显示子内容的弹出框。这种方式不会离开主页面,用户可以随时关闭对话框返回。 3. **在Struts1中的实现:** - **...
本资源"模拟一个弹出可拖动的层窗口源码(效果超酷)"正是利用了JavaScript来实现一个极具吸引力的交互式功能——可拖动的弹出层窗口。下面我们将深入探讨这一技术实现的关键知识点。 首先,让我们理解什么是弹出层...
通过以上步骤,我们就实现了JavaScript的登录框拖拽效果,包括点击弹出、拖拽移动和关闭归位等功能。需要注意的是,实际应用中可能需要考虑浏览器兼容性问题,以及优化拖拽过程中的性能,例如使用`...
本文将详细讲解如何实现这样一个功能,主要围绕"可拖动弹出框"这一主题展开。 首先,我们需要理解弹出窗口(Pop-up Window)的基本概念。弹出窗口是一种非模态对话框,它会在用户与主应用程序交互时突然出现在屏幕...
为了防止弹出层被拖出屏幕之外,需要在`mousemove`事件处理函数中加入边界检测,确保弹出层始终在可视区域内。 7. **防抖或节流技术**: 当频繁触发`mousemove`事件时,可能会导致性能问题。通过使用防抖...
在网页设计中,`div` 和 `css` 是构建页面布局的基本元素,而JavaScript(简称`js`)则为交互性提供了强大的支持。本话题主要关注如何利用这三种技术实现一个可拖拽的弹出层,让用户可以自由地在浏览器窗口内移动它...
1. **创建登录窗口**:在HTML中,创建一个包含登录表单的浮层元素,通常使用`<div>`标签,并设置相应的CSS样式使其成为弹出窗口样式。同时,需要为登录窗口添加一个标题栏,作为拖动的触发区域。 2. **绑定事件**:...
模态框(Modal Box)是一种常见的用户界面元素,它会在当前页面上显示一个弹出窗口,使得用户必须与其交互后才能继续浏览网站的其他部分。 模态框通常用于显示警告、确认信息或者进行表单输入等场景。而添加拖动...
"最中间弹出对话框,遮罩层 可以拖动"这个标题所描述的功能是一种常见且实用的用户交互设计,通常用于提醒、确认或者提供更多信息。在这个场景中,我们使用jQuery库来实现这一功能,它是一个广泛使用的JavaScript库,...
在这个特定的场景中,我们看到的标题 "点击按钮弹出DIV,可以拖动,操作方便!" 描述了一个交互式的网页功能,用户可以通过点击按钮来显示一个可拖动的 `div` 对象。 首先,我们需要理解这个功能的核心组成部分: ...
在 EasyUI 中,`window`组件是一个常见的弹出对话框,它可以被拖曳以改变位置。然而,当用户尝试将窗口拖动到屏幕边界之外时,可能会导致窗口部分超出屏幕范围,使得部分内容不可见或无法交互,这会严重影响用户体验...
WebPopup 是一个基于C#开发的控件,它在Visual Studio 2008环境下编译并通过了测试,设计灵感来源于MSN(微软即时通讯软件)的弹出窗口效果。这个控件可以为开发者提供一种优雅的方式,在Web应用程序中实现类似即时...