鼠标点击图片后移动事件
来源:互联网 发布:手机桌面特效软件 编辑:程序博客网 时间:2024/05/17 22:51
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
div{
position: absolute;
top:200px;/*div的y轴*/
left:150px;/*div的x轴*/
width: 300px;
height: 200px;
background-color: aqua;
}
div:hover{
cursor: move;
}
</style>
<script>
/*
* 分析:
* 获取鼠标实时移动的坐标:m_move_x;m_move_y;
* 鼠标按下时的坐标:m_down_x;m_down_y;
* div的坐标:dx,dy;
* 鼠标按下时,鼠标与div的偏移量:md_x,md_y;
* div的新坐标:ndx,ndy;
*/
var isDown = false;//记录鼠标状态
var move_div;;//要操作的div对象
var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,md_x,md_y,ndx,ndy;
//鼠标按下
function down(){
move_div=document.getElementById("move_div");
isDown = true;
//获取鼠标按下时的坐标
m_down_x = event.pageX;
m_down_y = event.pageY;
//获取div的坐标
dx = move_div.offsetLeft;
dy = move_div.offsetTop;
//获取鼠标与div偏移量
md_x = m_down_x - dx;
md_y = m_down_y - dy;
}
//鼠标移动
function move(){
move_div = document.getElementById("move_div");
//实时更新div坐标
dx = move_div.offsetLeft;
dy = move_div.offsetTop;
//获取鼠标移动实时坐标
m_move_x = event.pageX;
m_move_y = event.pageY;
//鼠标按下时移动才触发
if(isDown){
//获取新div坐标:鼠标实时坐标-鼠标与div的偏移量
ndx = m_move_x - md_x;
ndy = m_move_y - md_y;
//把新div坐标值赋给div对象
move_div.style.left = ndx+"px";
move_div.style.top = ndy+"px";
}
}
//鼠标释放
function up(){
isDown = false;
}
</script>
</head>
<body>
<div id="move_div" onmousedown="down()" onmouseup="up()" onmousemove="move()"></div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
div{
position: absolute;
top:200px;/*div的y轴*/
left:150px;/*div的x轴*/
width: 300px;
height: 200px;
background-color: aqua;
}
div:hover{
cursor: move;
}
</style>
<script>
/*
* 分析:
* 获取鼠标实时移动的坐标:m_move_x;m_move_y;
* 鼠标按下时的坐标:m_down_x;m_down_y;
* div的坐标:dx,dy;
* 鼠标按下时,鼠标与div的偏移量:md_x,md_y;
* div的新坐标:ndx,ndy;
*/
var isDown = false;//记录鼠标状态
var move_div;;//要操作的div对象
var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,md_x,md_y,ndx,ndy;
//鼠标按下
function down(){
move_div=document.getElementById("move_div");
isDown = true;
//获取鼠标按下时的坐标
m_down_x = event.pageX;
m_down_y = event.pageY;
//获取div的坐标
dx = move_div.offsetLeft;
dy = move_div.offsetTop;
//获取鼠标与div偏移量
md_x = m_down_x - dx;
md_y = m_down_y - dy;
}
//鼠标移动
function move(){
move_div = document.getElementById("move_div");
//实时更新div坐标
dx = move_div.offsetLeft;
dy = move_div.offsetTop;
//获取鼠标移动实时坐标
m_move_x = event.pageX;
m_move_y = event.pageY;
//鼠标按下时移动才触发
if(isDown){
//获取新div坐标:鼠标实时坐标-鼠标与div的偏移量
ndx = m_move_x - md_x;
ndy = m_move_y - md_y;
//把新div坐标值赋给div对象
move_div.style.left = ndx+"px";
move_div.style.top = ndy+"px";
}
}
//鼠标释放
function up(){
isDown = false;
}
</script>
</head>
<body>
<div id="move_div" onmousedown="down()" onmouseup="up()" onmousemove="move()"></div>
</body>
</html>
阅读全文
0 0
- 鼠标点击图片后移动事件
- 鼠标移动/点击事件
- MFC 图片控件图片加载以及鼠标移动事件和鼠标点击事件
- vs2005 鼠标点击事件移动
- 鼠标点击,移动,释放事件
- 鼠标移动改变背景色 鼠标点击后给据设定的值添加图片到指定的列
- 鼠标点击按钮事件(列表,鼠标移动形状)
- 鼠标移动到图片出现按钮,点击删除图片
- CSS 鼠标响应事件,鼠标经过CSS,鼠标移动CSS,鼠标点击CSS
- CSS 鼠标响应事件,鼠标经过CSS,鼠标移动CSS,鼠标点击CSS
- C# Win32API 模拟鼠标移动及点击事件
- JTable中获取鼠标移动、点击以及内容改变事件
- C# winform 无边框窗体鼠标点击移动事件
- C# Win32API 模拟鼠标移动及点击事件
- C# winform 无边框窗体鼠标点击移动事件
- DataGrid中鼠标点击、移动后行颜色改变效果
- JavaScript -- 广告随鼠标移动, 点击一次后关闭
- 实现鼠标鼠标点击之后随鼠标移动_event事件详解
- Lintcode整数排序
- android——暴力隐藏底部导航栏
- CentOS7 修改root密码
- Android DVB底层Linux驱动
- 图片加载框架 --Picasso 的基本使用
- 鼠标点击图片后移动事件
- 字符串:字符串的反转
- android全局替换字体最新方案
- 数据结构思维 第十七章 排序
- Linux安装配置SVN服务器
- CryEngine最新版发布,支持Vulkan API
- 复选框的全选和反选
- 面试题(实现一个栈,要求实现Push(出栈)、Pop(入栈)、Min(返回最小值的操作)的时间复杂度为O(1))
- Linux系统学习过程中的疑问(进程)