onmousedown活用之鼠标拖动
这个布局蛮简单的就是一个div块,通过定位,固定位置
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div {
width: 200px;
height: 200px;
background: pink;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
</style>
</head> <body>
<div id="div"> </div>
<div id="div2"></div>
</body> </html>
在js代码中需要用到onmousedown和onmouseup这一对方法来实现
而o=event||ev;event表示一般浏览器,而ev则表示ie浏览器,所以o就可以在不同的浏览器中同样实现相同效果
<script type="text/javascript">
var Div = document.getElementById("div");
Div.onmousedown = function(ev) {
var o = event || ev;
//获取到鼠标点击的位置距离div左侧和顶部边框的距离
oX = o.clientX - parseInt(getStyle(Div, "left"));
oY = o.clientY - parseInt(getStyle(Div, "top"));
//当鼠标移动，把鼠标的偏移量给div
document.onmousemove = function(ev) {
var o = event || ev;
//计算出鼠标在XY方向上移动的偏移量，把这个偏移量加给DIV的左边距和上边距，div就会跟着移动
Div.style.left = o.clientX - oX + "px";
Div.style.top = o.clientY - oY + "px";
} //当鼠标按键抬起，清除移动事件
document.onmouseup = function() {
document.onmousedown = null;
document.onmousemove = null;
}
} //获取属性的数值
function getStyle(obj, attr) {
if (obj.currentStyle) {
//currentStyle获取样式的值，对应的是ie浏览器
return obj.currentStyle[attr];
} else {
//同理，对应的是其他浏览器
return getComputedStyle(obj, false)[attr];
}
}
</script>
onmousedown活用之鼠标拖动的更多相关文章
- 实现鼠标拖动canvas绘制的图片
不啰嗦上代码: <html> <head> <meta http-equiv="Content-Type" content="text/ht ...
- 基于js鼠标拖动图片排序
分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...
- Javascript 简单实现鼠标拖动DIV
http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...
- 用canvas实现鼠标拖动绘制矩形框
需要用到jCanvas插件和jQuery. jCanvas下载:https://raw.githubusercontent.com/caleb531/jcanvas/master/jcanvas.mi ...
- 图片3d轮放查看效果(V2.0)：使用鼠标拖动实现图片的轮放
上面的版本号为通过左右button实现图片轮放,这个版本号.是通过在窗体拖动鼠标.左右滑动图片. 关键点在于选择一个合适的值.使鼠标拖动时.全部图片均可显示,可是不会滑动过快或离开窗体. 不多说,直接 ...
- CSharpGL(39)GLSL光照示例：鼠标拖动太阳（光源）观察平行光的漫反射和镜面反射效果
CSharpGL(39)GLSL光照示例:鼠标拖动太阳(光源)观察平行光的漫反射和镜面反射效果 开始 一图抵千言.首先来看鼠标拖动太阳(光源)的情形. 然后是鼠标拖拽旋转模型的情形. 然后我们移动摄像 ...
- jQuery实现鼠标拖动改变Div高度
最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...
- JavaScript 实现鼠标拖动元素
一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.f ...
- Selenium2学习-027-WebUI自动化实战实例-025-JavaScript 在 Selenium 自动化中的应用实例之三（页面滚屏，模拟鼠标拖动滚动条）
日常的 Web UI 自动化测试过程中,get 或 navigate 到指定的页面后,若想截图的元素或者指定区域范围不在浏览器的显示区域内,则通过截屏则无法获取相应的信息,反而浪费了无畏的图片服务器资 ...
随机推荐
- CodeForces 669C Little Artem and Matrix GNU
模拟. 把操作记录一下,倒着复原回去. #pragma comment(linker, "/STACK:1024000000,1024000000") #include<cs ...
- Symfony官方视频教程
视频获取方式,添加Symfony学习群,在群文件中获取,QQ群182983780
- centos7如何安装pandoc
1 Install stack 1.1 Add the appropriate source repository: curl -sSL https://s3.amazonaws.com/downlo ...
- supervisor启动流程
Supervisor结构: 单点结构如图: 1. 初始化时,启动进程Supervisor,根据 Nimbus分配的任务情况触发启动/停用Worker Jvm进程! 2. 每个Worker进程启动一个 ...
- 一个数组分四个ul并且每个ul里边有四个li显示
<?php $a = $array; for($i=0;$i<4;$i++ ) {?> <ul class="new-hover"> <?php ...
- Unity属性(Attributes)
Unity3d中的属性(Attributes) Attributes属性属于U3D的RunTimeClass,所以加上以下的命名空间是必须的了. using UnityEngine; using Sy ...
- 世界之窗(TheWorld)浏览器 3.6.1.0 简体中文绿色版
软件名称: 世界之窗(TheWorld)浏览器 3.6.1.0 简体中文绿色版软件语言: 简体中文授权方式: 免费软件运行环境: Win7 / Vista / Win2003 / WinXP 软件大小 ...
- double hashing 双重哈希
二度哈希(rehashing / double hashing) 1.二度哈希的工作原理如下: 有一个包含多个哈希函数(H1……Hn)的集合.当我们要从哈希表中添加或获取元素时,首先使用哈希函数H1. ...
- hdu5514 非2的次幂容斥原理
/* 1 126 223092870 210 330 390 462 510 546 570 690 714 770 798 858 910 966 1122 1155 1190 1254 1326 ...
- UEFI安装Win10
启动方式: Legency UEFI 分区表类型: MBR 主引导记录 最多4个主分区 最大支持2.1T硬盘 GPT 基于可扩展固件接口(EFI) 分区数不限 NTFS格式最大支持256T硬盘 安装模 ...