dom div重合提示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{
height:100px;
width:100px;
position:absolute;
background:red;
top:200px;
left:400px;
}
#div2{
height:100px;
width:100px;
position:absolute;
background:pink;
z-index:2;
text-align:center;
line-height:100px;
color:#fff;
}
</style> <script>
window.onload = function ()
{
var odiv1 = document.getElementById('div1');
var odiv2 = document.getElementById('div2'); odiv2.onmousedown = function(ev)
{
var ev = ev || event;
var dix = ev.clientX - this.offsetLeft;
var diy = ev.clientY - this.offsetTop; document.onmousemove = function (ev)
{
var T = ev.clientY - diy;
var L = ev.clientX - dix;
if(T < 0)
{
T = 0;
}else if( T > document.documentElement.clientHeight - odiv2.offsetHeight)
{
T = document.documentElement.clientHeight - odiv2.offsetHeight;
}
if(L < 0)
{
L = 0;
}else if( L > document.documentElement.clientWidth - odiv2.offsetWidth)
{
L = document.documentElement.clientWidth - odiv2.offsetWidth;
}
odiv2.style.top = T + 'px';
odiv2.style.left = L + 'px'; document.title = T + ':' + odiv1.offsetTop + '||' + L + ':' + odiv2.offsetLeft; if(T == odiv1.offsetTop && L == odiv1.offsetLeft)
{
alert('我们重合了')
document.onmousemove = document.onmousedown = null;
if(odiv2.releaseCapture)
{
odiv2.releaseCapture();
}
} };
document.onmouseup = function ()
{
document.onmousemove = document.onmousedown = null;
if(odiv2.releaseCapture)
{
odiv2.releaseCapture();
}
};
return false;
} };
</script>
</head> <body>
<div id="div1"></div>
<div id="div2">让我们重合</div>
</body>
</html>
dom div重合提示的更多相关文章
- Jquery hover鼠标经过时弹出div动态提示语
一.效果图 二.需求描述 1.鼠标经过table每一行时,弹出div动态提示语: 2.div弹出层的位置随鼠标位置的变化而变化: 3.鼠标离开table或获取的动态提示语为空时,div弹出层消失. 下 ...
- ASP.NET div信息提示框显示几秒后隐藏
今天在旧系统中,用户要求,要把一个javascript alert的信息提示,改为Div tag来显示,它在显示时,仅显示几秒,然后隐藏,这样无需用户去点击alert信息框的确定或是关闭铵钮. 下面I ...
- dom div移动解决停顿问题
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- DOM 事件深入浅出(一)
在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...
- javascript针对DOM的应用
所谓针对DOM的应用.也就我这里只教大家用javascript操作页面中dom元素做交互.我相信可能大部分人来这里学javascript主要还是想用这个结合页面中的DOM元素做一些实际有用的交互效果. ...
- JavaScript学习总结【5】、JS DOM
1.DOM 简介 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理 HTML 文档的标准方法.DOM 将 HTML 文档呈现为带有 ...
- 从template到DOM(Vue.js源码角度看内部运行机制)
写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...
- Echarts-K线图提示框改头换面
工作: 使用Hbuilder建web工程,加入echarts相关库,根据需要更改K线图及其的提示样式,去除默认提示,使用异步加载echarts的数据,数据格式为json. 需要注意的K线图和5日均线, ...
- javascript教程2:---DOM操作
1.DOM 简介 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理 HTML 文档的标准方法.DOM 将 HTML 文档呈现为带有 ...
随机推荐
- linux软件的安装,更新与卸载
Linux常见的安装为tar,zip,gz,rpm,deb,bin等.我们可以简单的分为三类. 第一:打包或压缩文件tar,zip,gz等,一般解压后即可,或者解压后运行sh文件: 第二:对应的有管理 ...
- maven3实战之设置HTTP代理
maven3实战之设置HTTP代理 ---------- 有时候你所在的公司基于安全因素考虑,要求你使用通过安全认证的代理访问因特网.这种情况下,就需要为Maven配置HTTP代理,才能让它正常访问外 ...
- 在HibernateTemplate里执行Sql语句
如下所示只能执行非Select语句: public static void executeSQL(HibernateTemplate hibernateTemplate, String sql) { ...
- 修改Android系统字号(一)
/*********************************************************************** * 修改Android系统字号(一) * 说明: * ...
- php flock注意事项
对于实际的运用,必须将其添加到所有使用的文件脚本中 但注意:其函数无法再NFS或其他网络文件系统中使用也无法在多线程服务器API中使用.
- RequireJS 2.0 正式发布(转)
RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0.随后的几小时James Burke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升级到了2.0 ...
- Android应用性能优化之使用SQLiteStatement优化SQLite操作
平常在做Android数据库操作时,都是用的execSQL之个方法. 今天偶然发现了SQLiteStatement这个类.让我想起了在做Java Web开发写JDBC的代码时Prestatement这 ...
- Java Web 乱码
1.mySql编码 2.jdbc编码 http://www.blogjava.net/NicholasEcho/archive/2008/11/03/238310.html ----- 1.HttpG ...
- Android配置时,点击eclipse里Window->Preferences里的android选项出错
An error has occurred when creating this preference page. 解决方法:重起eclipse
- 阻塞、非阻塞的概念和select函数的阻塞功能
其它文档: http://www.cnitblog.com/zouzheng/archive/2010/11/25/71711.html (1)阻塞block 所谓阻塞方式block,顾名思义 ...