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 相关文章推荐
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
深入理解JavaScript 箭头函数
May 30 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 Javascript
vue vant中picker组件的使用
Nov 03 Javascript
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小教程之实现双向链表
2014/06/12 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
JS location几个方法小姐
2008/07/09 Javascript
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
搞笑征婚广告词
2014/03/17 职场文书
小学生优秀评语大全
2014/04/22 职场文书
小班幼儿评语大全
2014/04/30 职场文书
英文邀请函
2015/02/02 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
会议室管理制度范本
2015/08/06 职场文书
小数乘法教学反思
2016/02/22 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python