js实现div在页面拖动效果


Posted in Javascript onMay 04, 2016

本文实例讲述了js实现div在页面拖动效果。分享给大家供大家参考,具体如下:

<style type="text/css">
body {
 margin: 0px;
}
#div1 {
 display: none;
 position: absolute;
 z-index: 1000;
 height: 100%;
 width: 100%;
 background: #000000;
 filter:Alpha(opacity=30);
}
#div2 {
 display: none;
 position: absolute;
 height: 100%;
 width: 100%;
 padding-top: 10%;
 z-index: 1001;
}
#div3 {
 display: block;
 position: absolute;
 z-index: 999;
}
</style>
<script type="text/javascript">
//定义移动对象和移动坐标
var Mouse_Obj="none",_x,_y;
//拖动对象函数(自动)
document.onmousemove=function()
{
 if(Mouse_Obj!=="none")
 {
 document.getElementById(Mouse_Obj).style.left=_x+event.x;
 document.getElementById(Mouse_Obj).style.top=_y+event.y;
 event.returnValue=false;
 }
}
//停止拖动函数(自动)
document.onmouseup=function()
{
 Mouse_Obj="none";
}
//确定被拖动对象函数 o为被拖动对象
function m(o)
{
 Mouse_Obj=o;
 _x=parseInt(document.getElementById(Mouse_Obj).style.left)-event.x;
 _y=parseInt(document.getElementById(Mouse_Obj).style.top)-event.y;
}
</script>
<div id="div1"></div>
<div id="div2" onmousedown="m(this.id)" style="left: 0px;top: 0px;">
<table width="50%" border="0" cellpadding="3" cellspacing="1" 
style="background: #ff7300;
position:static;filter:progid:DXImageTransform.Microsoft.DropShadow
(color=#666666,offX=4,offY=4,positives=true)" align="left">
 <tr style="cursor: move;">
  <td><font color="#FFFFFF">温馨提示:</font></td>
  <td align="right"><input type="button" value="x"
onClick="document.getElementById
('div1').style.display='none';document.getElementById
('div2').style.display='none';" style="cursor: hand;"></td>
 </tr>
 <tr>
  <td colspan="2" width="100%" bgcolor="#FFFFFF" height="150"
align="middle">欢迎访问 <a href="https://3water.com">https://3water.com</a></td>
 </tr>
</table>
</div>
<div id="div3"><input type="button" value="打开层"
onClick="document.getElementById
('div1').style.display='block';document.getElementById
('div2').style.display='block';"></div>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
网页中CDATA标记的说明
Sep 12 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
简单实现jquery焦点图
Dec 12 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 Javascript
JS功能代码集锦
May 04 #Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 #Javascript
浅析Bootstrap组件之面板组件
May 04 #Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 #Javascript
js编写当天简单日历效果【实现代码】
May 03 #Javascript
javascript实现下雪效果【实例代码】
May 03 #Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 #Javascript
You might like
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
js Function类型
2011/12/04 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
python机器学习之神经网络(三)
2017/12/20 Python
python实现外卖信息管理系统
2018/01/11 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
解释i节点在文件系统中的作用
2013/11/26 面试题
幼儿园春游活动方案
2014/01/19 职场文书
小学教师师德反思
2014/02/03 职场文书
创业计划书详解
2019/07/19 职场文书
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS