`
825970378
  • 浏览: 20637 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

JS控制DIV弹出层移动

阅读更多

<div class="title" style="cursor:move;color:#1E5494;" onmousedown="yidong('apDiv1')">系统提示!<span class="close" onclick="tips_pop()">×</span></div>

 

 

 

var yd=0;
var x=0;
var y=0;
function yidong(obj){
yd=obj;
x=document.all(yd).offsetLeft-event.x;
y=document.all(yd).offsetTop-event.y;

}
function document.onmousemove()
{
 //document.getElementById("idShow1").innerHTML =x+event.x;
 //document.getElementById("idShow2").innerHTML =y+event.y;

 //document.getElementById("idShow3").innerHTML =document.getElementById("apDiv1").offsetWidth;
 //document.getElementById("idShow4").innerHTML =document.getElementById("apDiv1").offsetHeight;
 if(yd!="0")
 {
  if(x+event.x<=document.documentElement.clientWidth-document.getElementById(yd).offsetWidth)
  {
   document.all(yd).style.pixelLeft=x+event.x;
  }
  if(y+event.y<=document.documentElement.clientHeight-document.getElementById(yd).offsetHeight)
  {
   document.all(yd).style.pixelTop=y+event.y;
  }
 }
}
function document.onmouseup(){
event.srcElement.releaseCapture();
yd=0;
}

分享到:
评论

相关推荐

    div弹出层打包,包括弹出图片浏览

    在网页设计中,"div弹出层"是一种常见的交互元素,用于展示额外的信息或功能,如图片预览、对话框、表单等。这个压缩包文件"div弹出层打包,包括弹出图片浏览"提供了一套解决方案,帮助开发者轻松实现这种效果。以下...

    div弹出层

    总结,div弹出层是Web开发中的一个重要工具,通过合理的HTML结构、CSS样式和JavaScript控制,可以创建功能丰富的交互式弹出窗口,提高网站的用户体验。理解并掌握其原理和实现方法对于前端开发者来说至关重要。

    漂亮的js可移动弹出层

    在本项目中,JavaScript主要负责处理用户交互逻辑,如响应点击事件,控制弹出层的显示和隐藏,以及实现弹出层的移动功能。 jQuery是一个高效、简洁而富有创造性的JavaScript库,它极大地简化了JavaScript编程,提供...

    JS做的隐藏与显示DIV可拖动弹出层

    在"JS做的隐藏与显示DIV可拖动弹出层"这个实例中,我们将探讨如何利用JavaScript来创建一个可拖动的弹出层,并控制其显示与隐藏。 首先,让我们理解`div`层的隐藏与显示。在HTML中,我们创建一个`div`元素并为其...

    JS弹出层,js弹出DIV效果源码下载

    在JS弹出层和弹出DIV效果中,"showMesBox"可能是这个效果的ID或者类名,用于在页面上定位并控制这个弹出元素。"showMesBox"通常会包含一个div元素,通过CSS来定义其样式,如位置、大小、背景色、边框等,使其能够在...

    泽元div 弹出层,弹出框

    综上所述,"泽元div弹出层,弹出框"涉及到前端开发中的多个技术点,包括HTML布局、CSS样式、JavaScript交互以及第三方库的使用。开发者需要掌握这些基础知识,才能有效地创建功能丰富的、用户体验良好的弹出层和弹出...

    div弹出层 jquery

    在网页设计中,"div弹出层"是一种常见的交互元素,用于显示临时信息或与用户进行交互。jQuery库因其简洁的API和强大的功能,成为实现此类效果的首选工具。本主题将深入探讨如何利用jQuery来实现十种不同的弹出层效果...

    Div 弹出 DIV移动 遮罩层 Div对话框 Div窗口

    Div 对话框 可移动 可设遮罩层 可以同时打开多个对话框,JS源代码

    js控制div+css弹出层实现拖拽

    本话题主要关注如何利用这三种技术实现一个可拖拽的弹出层,让用户可以自由地在浏览器窗口内移动它。 首先,我们来理解`div`。`div`是HTML中的一个块级元素,全称为“division”,即分区或分段。它可以用来包裹其他...

    一个不错的DIV弹出层

    在网页设计中,"DIV弹出层"是一种常见的交互元素,用于显示临时信息或与用户进行交互。这个“一个不错的DIV弹出层”项目显然旨在提供一个简洁且高效的解决方案。让我们深入探讨一下这个主题,以及它与jQuery的关系。...

    js实现div弹出层的方法

    在JavaScript中,实现一个div弹出层是一项常见的任务,特别是在构建交互式Web应用时。本篇将详细解析如何使用原生JavaScript来创建一个功能完备的div弹出层,包括使其可拖拽、可关闭,并允许用户自定义显示效果。 ...

    div+css 弹出层

    在网页设计中,"div+css 弹出层"是一种常见的交互效果,它允许用户点击某个元素后,弹出一个浮动窗口展示更多的信息或者进行特定的操作。这种效果广泛应用于登录注册、消息提示、模态对话框、下拉菜单等场景。下面...

    层,弹出层,div,层布局

    弹出层集合可能包含了多种不同的实现方式,如JavaScript、jQuery或者纯CSS的示例。这些弹出层可能具有不同的特性,如: 1. **模态弹出层**:用户必须与弹出层交互后才能继续与页面其他部分互动,常用于警告、确认...

    div css移动鼠标改变样式弹出div层

    首先,我们需要创建两个`div`元素:一个作为主内容区域,另一个作为弹出层。在HTML中,可以这样编写: ```html &lt;div class="container"&gt; &lt;div class="content"&gt;主内容区域&lt;/div&gt; &lt;div class="popup" style=...

    JAVASCRIPT弹出DIV层窗口实例

    在本实例中,我们将深入探讨如何使用JavaScript来创建一个弹出DIV层窗口。 首先,我们需要了解HTML结构。`index.htm`和`test.html`文件可能包含了用于展示弹出窗口的基础HTML元素。通常,一个基本的HTML结构会包括...

    弹出层示例DivShow

    接下来,我们使用JavaScript来控制弹出层的显示和隐藏。当用户触发特定事件,如点击按钮或链接时,JavaScript函数会被调用。这个函数会改变隐藏div的CSS属性,例如将其display属性更改为block或调整透明度至100%,使...

    js弹出层table运用

    1. 创建弹出层元素:使用`document.createElement('div')`创建一个`&lt;div&gt;`,并设置其class和style属性,以便通过CSS控制外观和位置。 2. 创建表格元素:创建`&lt;table&gt;`,`&lt;tr&gt;`,`&lt;td&gt;`等元素,并填充数据。 3. 将...

    div js css 弹出层代码

    ### div js css 弹出层代码详解 #### 一、概述 在网页设计与开发过程中,弹出层(Modal)是一种常见的交互元素,用于显示重要信息或操作提示,而不需用户离开当前页面。通过组合使用HTML、CSS和JavaScript,我们...

    js漂亮弹出层 对话框

    "js漂亮弹出层 对话框"着重讨论的是如何利用JavaScript创建美观且功能丰富的弹出对话框。在本文中,我们将深入探讨JavaScript弹出层的设计原则、实现方法以及一些实用的库和技巧。 首先,JavaScript是一种广泛用于...

    js弹出层居中可移动

    ### JS弹出层居中可移动技术解析 #### 一、引言 在网页开发过程中,弹出层(Modal)是一种常见的交互设计模式,用于在当前页面上展示额外的信息或功能,而无需重新加载页面。其中,弹出层能够居中显示并且可以被...

Global site tag (gtag.js) - Google Analytics