js解决movebox移动问题_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

js解决movebox移动问题_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:07 PM

js 移动

本文为大家分享了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; 
}

登录后复制

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

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7334

Java教程

1627

CakePHP 教程

1352

Laravel 教程

1264

PHP教程

1209

显示更多

Related knowledge

可以将appdata文件夹移动到D盘吗？ Feb 18, 2024 pm 01:20 PM

appdata文件夹可以移到d盘吗随着电脑使用的日益普及，用户的个人数据和应用程序也越来越多地存储在计算机上。在Windows操作系统中，有一个特定的文件夹，名为appdata文件夹，它用于存储用户的应用程序数据。许多用户想知道是否可以将这个文件夹移到D盘或其他磁盘上，以便进行数据管理和安全性的考虑。在本文中，我们将讨论这个问题并提供一些解决方案。首先，让我

如何使用JS和百度地图实现地图平移功能 Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

6000 毫安硅负极电池！小米 15Pro 升级再曝料 Jul 24, 2024 pm 12:45 PM

7月23日消息，博主数码闲聊站爆料称，小米15Pro电池容量增大至6000mAh，支持90W有线闪充，这将是小米数字系列电池最大的Pro机型。此前数码闲聊站透露，小米15Pro的电池拥有超高能量密度，硅含量远高于竞品。硅基电池在2023年大规模试水后，第二代硅负极电池被确定为行业未来发展方向，今年将迎来直接竞争的高峰。1.硅的理论克容量可达4200mAh/g，是石墨克容量的10倍以上（石墨的理论克容量372mAh/g）。对于负极而言，当锂离子嵌入量达到最大时的容量为理论克容量，这意味着相同重量下

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤 Dec 17, 2023 pm 06:55 PM

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

停止或允许此电脑在Windows 11上访问您的移动设备 Feb 19, 2024 am 11:45 AM

微软在最新的Windows11版本中将PhoneLink的名称更改为MobileDevice。这一变化使得用户可以通过提示来控制计算机访问移动设备的权限。本文将介绍如何在您的电脑上管理允许或拒绝移动设备访问的设置。该功能让您能够配置移动设备并与计算机连接，从而进行文本消息的发送和接收、移动应用程序的控制、联系人的查看、电话的拨打、图库的查看等操作。将手机连接到PC上是个好主意吗？将手机连接到WindowsPC是一个方便的选择，可以轻松地传输功能和媒体。这对那些需要在移动设备无法使用时使用电脑的人

如何使用PHP和JS创建股票蜡烛图 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3

PHP与JS开发技巧：掌握绘制股票蜡烛图的方法 Dec 18, 2023 pm 03:39 PM

随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

See all articles

js解决movebox移动问题_javascript技巧

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题