`
guanhuaing
  • 浏览: 1195360 次
文章分类
社区版块
存档分类
最新评论

HTML--如何实现通过鼠标事件拖动页面图像(代码)

 
阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>onMouseMove Event Handler</title>
<style type="text/css">
#camap {position:absolute; left:20; top:120}
#ormap {position:absolute; left:80; top:120}
#wamap {position:absolute; left:140; top:120}
</style>
</head>

<script type="text/javascript">
// global variables used while dragging
var offsetX = 0
var offsetY = 0
var selectedObj
var frontObj
// set document-level event handlers
document.onmousedown = engage
document.onmouseup = release
// positioning an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
obj.style.pixelLeft = x
obj.style.pixelTop = y
}
// setting the z-order of an object
function bringToFront(obj) {
if (frontObj) {
frontObj.style.zIndex = 0
}
frontObj = obj
frontObj.style.zIndex = 1
}
// set global var to a reference to dragged element
function setSelectedObj() {
var imgObj = window.event.srcElement
if (imgObj.id.indexOf("map") == 2) {
selectedObj = imgObj
bringToFront(selectedObj)
return
}
selectedObj = null
return
}
// do the dragging (called repeatedly by onMouseMove)
function dragIt() {
if (selectedObj) {
shiftTo(selectedObj, (event.clientX - offsetX), (event.clientY - offsetY))
return false
}
}
// set global vars and turn on mousemove trapping (called by onMouseDown)
function engage() {
setSelectedObj()
if (selectedObj) {
document.onmousemove = dragIt
offsetX = window.event.offsetX - document.body.scrollLeft
offsetY = window.event.offsetY - document.body.scrollTop
}
}
// restore everything as before (called by onMouseUp)
function release() {
if (selectedObj) {
document.onmousemove = null
selectedObj = null
}
}
</script>

<body>
<h1>onMouseMove Event Handler</h1>
<img id="camap" src="d:/bw/n001387.jpg" style="left: 31px; top: 1px" />
<br />
<img id="ormap" src="d:/bw/n001387.jpg" style="left: 31px; top: 297px" />
<br />
<img id="wamap" src="d:/bw/n001387.jpg" style="left: 31px; top: 184px" />
<br />
</body>
</html>

分享到:
评论

相关推荐

    多图表实现员工满意度调查数据分析python

    员工满意度是指员工对于工作环境、待遇、职业发展和组织管理等方面的满意程度。它是衡量员工对工作的整体感受和情绪状态的重要指标。

    2020届软件工程本科毕业生毕业设计项目.zip

    2020届软件工程本科毕业生毕业设计项目

    基于stm32平衡小车

    平衡小车 基于stm32 平衡小车 基于stm32 平衡小车 基于stm32

    c语言火车票订票管理源码.rar

    c语言火车票订票管理源码.rar

    施耐德PLC例程源码四台水泵的轮换

    施耐德PLC例程源码四台水泵的轮换提取方式是百度网盘分享地址

    node-v16.13.2-linux-s390x.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    digix算法创新大赛2019baseline.zip

    digix算法创新大赛2019baseline

    三菱PLC小型立体仓库项目.zip

    三菱PLC小型立体仓库项目.zip 叉手篮具到位检测 入库2电机前限

    node-v15.3.0-linux-s390x.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    软考高项-ITTO背诵打印必过版-2024-高项已通过

    软考高项_ITTO背诵打印必过版_2024_高项已通过

    巧解HTTP三次握手四次挥手流程(超详细).docx

    TCP三次握手及四次挥手详细图解 相对于SOCKET开发者,TCP创建过程和链接折除过程是由TCP/IP协议栈自动创建的.因此开发者并不需要控制这个过程.但是对于理解TCP底层运作机制,相当有帮助. TCP三次握手 所谓三次握手(Three-way Handshake),是指建立一个TCP连接时,需要客户端和服务器总共发送3个包。 三次握手的目的是连接服务器指定端口,建立TCP连接,并同步连接双方的序列号和确认号并交换 TCP 窗口大小信息.在socket编程中,客户端执行connect()时。将触发三次握手。 1.TCP建立流程 第一次握手:建立连接时,客户端发送SYN(Seq = J)包到服务器,并进入到syn_sent状态。等待服务器确认。 第二次握手:服务器收到SYN包,知道了Client端想建立连接. 它会向客户端发送SYN+ ACK包(ack =J+1 TCP 四次挥手 TCP的连接的拆除需要发送四个包,因此称为四次挥手(four-way handshake)。客户端或服务器均可主动发起挥手动作,在socket编程中,任何一方执行close()操作即可产生挥手操作

    node-v13.5.0-linux-arm64.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    欧母龙PLC例程源码扎钢机程序

    欧母龙PLC例程源码扎钢机程序提取方式是百度网盘分享地址

    基于RGB相机的驾驶员注视区域估计_刘觅涵.pdf

    驾驶员注意力检测,驾驶员分神驾驶检测,DMS,汽车智能驾驶,智能座舱

    Unity实现二维码扫描,二维码生成

    Unity实现二维码扫描,二维码生成 提供ZXing.unity.dll可以进行二维码的生成和扫描,扫描的方式是在场景中发射射线,射线获取rawimage的texture并读取,然后作为二维码进行解析。 提供源代码。

    中山大学-计科-操作系统实验.zip

    中山大学-计科-操作系统实验.zip

    施耐德PLC例程源码恒压供水程序(用施耐德TWIDOPLC编的)

    施耐德PLC例程源码恒压供水程序(用施耐德TWIDO PLC编的)提取方式是百度网盘分享地址

    node-v14.8.0-darwin-x64.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    node-v14.6.0-darwin-x64.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    python实现小说词频统计

    小说词频统计是指对一本小说中出现的各个词语进行计数和分析,以确定每个词语在整篇小说中的出现频率。 以下是对小说词频统计的一些基本说明: 数据收集:首先需要获取目标小说的文本数据。这可以通过手动输入、复制粘贴文本内容或使用自动化工具来提取文本。 文本处理:在进行词频统计之前,通常需要对文本数据进行预处理。这可能包括去除标点符号、停用词(如“的”、“是”等)和特殊字符,将文本转换为统一的格式。 词语计数:进行词频统计时,遍历整个文本,逐个词语地计数它们的出现次数。通常会使用字典、哈希表或其他数据结构来存储词语及其计数。

Global site tag (gtag.js) - Google Analytics