js解决movebox移动问题


Posted in Javascript onMarch 29, 2016

本文为大家分享了js解决movebox移动问题,并且取消图片默认拖动事件的相关操作,供大家参考,具体内容如下

html:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  <link href="../Content/StyleSheet5.css" rel="stylesheet" /> 
  <script src="../Scripts/JavaScript5.js"></script> 
  <title></title> 
  <meta charset="utf-8" /> 
</head> 
<body> 
  <div id="center"> 
    <div id="black"></div> 
    <div id="movebox"> 
      <img id="moveimg" src="../Images/b.jpg"/> 
    </div> 
    <img id="bigimg" src="../Images/b.jpg" /> 
  </div> 
</body> 
</html>

js:

var movebox; 
window.onload = function () { 
  movebox = document.getElementById("movebox"); 
  movebox.addEventListener("mousedown", function (e) { 
    if (e.button > 0) { 
      fun2(); 
      return false; 
    } 
    e.preventDefault && e.preventDefault(); //明哥:去掉图片拖动响应 狠重要 
    gen.x = e.clientX; 
    gen.y = e.clientY; 
    gen._x = movebox.offsetLeft; 
    gen._y = movebox.offsetTop; 
    gen.dx = gen.x - gen._x; 
    gen.dy = gen.y - gen._y; 
    document.addEventListener("mousemove",fun1,false); 
    document.addEventListener("mouseup", fun2, false); 
  }, false); 
}; 
var fun1 = function (e) { 
  gen.L = e.clientX - gen.dx; 
  gen.T = e.clientY - gen.dy; 
  var timefun = function () { 
    window.getSelection().removeAllRanges(); 
    if (gen.L < 100) 
      gen.L = 100; 
    else if (gen.L > 200) 
      gen.L = 200; 
    if (gen.T < 125) 
      gen.T = 125; 
    else if (gen.T > 175) 
      gen.T = 175; 
    setLT(movebox, gen.L, gen.T); 
  }; 
  setTimeout(timefun, 2); 
}; 
var fun2 = function () { 
  document.removeEventListener("mousemove", fun1, false); 
  document.removeEventListener("mouseuo", fun2, false); 
}; 
var gen = { 
  x: null, 
  y: null, 
  _x: null, 
  _y: null, 
  dx: null, 
  dy: null, 
  L: null, 
  T:null, 
}; 
var setLT = function (dom, L, T) { 
  dom.style.left = L + "px"; 
  dom.style.top = T + "px"; 
};

css:

body { 
  position:absolute; 
  margin:0; 
  padding:0; 
} 
#center{ 
  position:absolute; 
  top:200px; 
  left:300px; 
  width:400px; 
  height:400px; 
  background-color:#808080; 
} 
#black{ 
  position:absolute; 
  width:400px; 
  height:400px; 
  z-index:80; 
  background-color:#000; 
  opacity:0.6; 
} 
#bigimg{ 
  z-index:50; 
  position:absolute; 
  left:100px; 
  top:125px; 
} 
#movebox{ 
  z-index:100; 
  position:absolute; 
  width:100px; 
  height:100px; 
  left:150px; 
  top:150px; 
  overflow:hidden; 
  cursor:move; 
  background-color:#ff6a00; 
} 
#moveimg{ 
  position:absolute; 
  left:-50px; 
  top:-25px; 
}

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 Javascript
JS跨域总结
Aug 30 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 Javascript
js通过循环多张图片实现动画效果
Dec 19 Javascript
js布局实现单选按钮控件
Jan 17 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
javascript中不易分清的slice,splice和split三个函数
Mar 29 #Javascript
分析js闭包引起的事件注册问题
Mar 29 #Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 #Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 #Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 #Javascript
JavaScript面向对象程序设计教程
Mar 29 #Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 #Javascript
You might like
收集的PHP中与数组相关的函数
2007/03/22 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
python中logging库的使用总结
2017/10/18 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
Django中间件实现拦截器的方法
2018/06/01 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
python 监控logcat关键字功能
2020/09/04 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
建筑毕业生自我鉴定
2013/10/18 职场文书
二手房购房意向书范本
2014/04/01 职场文书
信访工作汇报材料
2014/10/27 职场文书
2014年度工作总结报告
2014/12/15 职场文书
导游词欢迎词
2015/02/02 职场文书
总经理岗位职责范本
2015/04/01 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python