`

js移动、拖动图片

    博客分类:
  • css
阅读更多
1、
<script>var xx=0,yy=0  //拖动图片</script>
<img src="http://www.gz132.com/images/gzlogo.gif" style='position:absolute;' this.style.cursor="hand"'  ondragstart="setCapture();xx=event.x-this.offsetLeft;yy=event.y-this.offsetTop;" ondrag='this.style.left=event.x-xx;this.style.top=event.y-yy' ondragend="releaseCapture();"/>

2、
<span style='position:absolute;width:200;height:200;background:red' onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp()>meizz</span> 
<script language=javascript> 
var Obj; 
function MouseDown(obj) 
{ 
  Obj=obj; 
  Obj.setCapture(); 
  Obj.l=event.x-Obj.style.pixelLeft; 
  Obj.t=event.y-Obj.style.pixelTop; 
} 
function MouseMove() 
{ 
  if(Obj!=null) 
  { 
    Obj.style.left = event.x-Obj.l; 
    Obj.style.top = event.y-Obj.t; 
  } 
} 
function MouseUp() 
{ 
  if(Obj!=null) 
  { 
    Obj.releaseCapture(); 
    Obj=null; 
  } 
} 
</script> 

3、
<div id="myDiv" src="logo.gif" ondrag="doDrag();" onmouseover="this.style.cursor='hand'" style="position:absolute;left=100;top=100;" onmousedown="doMouseDown();"> 
<a href="#" onclick="return false"><h1>wlecome</h1></a> 
</div> 
<script language="JavaScript" type="text/javascript"> 
var orgMouseX; 
var orgMouseY; 
var orgObjX; 
var orgObjY; 
function doDrag() 
{ 
var myObject=document.all.myDiv; 

var x=event.clientX; 
var y=event.clientY; 
myObject.style.left=x-(orgMouseX-orgObjX); 
myObject.style.top=y-(orgMouseY-orgObjY); 
  
} 
function doMouseDown() 
{ 
orgMouseX=event.clientX; 
orgMouseY=event.clientY; 
orgObjX=parseInt(document.all.myDiv.style.left); 
orgObjY=parseInt(document.all.myDiv.style.top); 
} 

</script> 
分享到:
评论

相关推荐

    javascript拖拽图片到指定位置

    在JavaScript和jQuery的世界里,实现图片拖放至指定位置的功能是一项常见的交互设计,它能够提升用户的体验,使得操作更加直观和便捷。以下我们将详细探讨如何使用这两种技术来完成这一任务。 首先,我们需要理解...

    js实现在特定框内拖动图片

    在JavaScript和HTML的世界里,实现一个功能,让用户能够在特定的框内拖动图片,而当鼠标位置超出这个框时图片无法移动,是一项常见的交互设计任务。这个功能涉及到DOM操作、事件处理以及坐标计算等多个知识点。下面...

    JS鼠标拖拽图片更换位置效果代码.zip

    在JavaScript(JS)编程中,实现鼠标拖拽图片并改变其位置的效果是一项常见的交互功能,尤其在网页设计和开发中非常实用。这个"JS鼠标拖拽图片更换位置效果代码.zip"压缩包提供了一种实现这一功能的方法。下面将详细...

    javascript图片预览(滚动放大缩小和拖动查看)

    `ext-watchimg.js`是自定义的JavaScript脚本,可能是实现图片预览功能的核心部分。在这个文件中,开发者可能定义了以下函数: 1. `initWatchImg()`: 初始化图片预览功能,可能包括设置初始状态、绑定事件等。 2. `...

    JS拖拽图片特效并存入数据库

    综上所述,"JS拖拽图片特效并存入数据库"项目结合了JavaScript的事件处理、AJAX的异步通信、数据库操作等多个核心技术,旨在提供一个交互性强且功能完善的图片管理平台。通过不断优化和迭代,可以打造出更加高效和...

    js鼠标拖拽图片切换预览特效

    在JavaScript编程中,实现“js鼠标拖拽图片切换预览特效”涉及到多个技术点和步骤。这个特效使得用户可以通过鼠标拖动来改变堆叠在一起的图片的显示顺序,从而预览不同的图片。以下是对这个特效的详细解释: 1. **...

    js行拖动,div拖动,图片拖动

    本示例主要关注的是“js行拖动”,“div拖动”以及“图片拖动”。这些功能通常用于创建可自定义排序的列表、布局调整或图像编辑等场景。 1. **js行拖动**: js行拖动通常涉及到HTML表格中的行或者列表项(li)的...

    微信小程序内拖动图片实现移动、放大、旋转的方法

    微信小程序内拖动图片实现移动、放大、旋转的方法涉及的技术点包括:触摸事件处理、画布绘图以及动态数据更新。以下是详细的技术知识点。 首先,了解微信小程序的基本布局和事件系统是关键。微信小程序的页面结构由...

    JS+Html图片放大缩小旋转拖动效果

    在JavaScript(JS)和HTML的结合使用中,可以创建丰富的用户体验,例如图片的放大、缩小、旋转和拖动查看功能。这些动态效果是现代网页设计中常见且实用的技术,能够增强用户与网页内容的交互性。下面将详细介绍如何...

    js图片查看器。鼠标拖动图片任意方向旋转,鼠标滚动滚轮缩放,任意角度翻转。

    用户只需按住鼠标拖动,图片就能跟随鼠标的移动轨迹旋转。这通常涉及到图像的矩阵变换,通过改变图片的旋转角度来实现。 2. **图片缩放**:图片查看器支持鼠标滚轮缩放,当用户滚动鼠标滚轮时,图片会相应地放大或...

    js放大缩小拖拽图片(兼容IE、火狐)

    ### js放大缩小拖拽图片(兼容IE、火狐) #### 概述 本文将详细介绍一个JavaScript脚本,该脚本可以实现图片的放大、缩小以及拖拽功能,并且能够兼容Internet Explorer (IE) 和 Firefox 浏览器。通过这个脚本,...

    JS实现图片拖拽排序(亲测可用)

    "JS实现图片拖拽排序"是一项技术,它允许用户通过鼠标拖放操作来调整图片的顺序,增强了用户与应用的互动性。这种功能常用于照片墙、画廊或者任何需要自定义顺序的视觉元素展示场景。以下是对这个功能的详细讲解: ...

    jquery拖动图片移动拼图小游戏

    **jQuery 拖动图片移动拼图小游戏详解** 在前端开发中,制作一款基于jQuery的拖动图片拼图游戏是一项有趣的挑战,同时也是一种提升用户体验的好方法。本游戏利用JavaScript和jQuery的强大功能,允许用户通过拖放...

    js中实现拖拽特效,文件图片可以随意拖动

    在JavaScript中实现拖拽特效是一项常见的交互设计技术,它可以增强用户在网页上的体验,使得文件或图片等元素能够像在桌面环境中一样自由移动。在这个场景中,我们将关注如何使用JavaScript来实现这一功能,同时结合...

    JS手动拖动图片剪切

    在JavaScript(JS)中实现手动拖动图片剪切的功能,主要涉及到HTML5的Canvas元素、事件监听、坐标处理以及图像处理等技术。以下是对这个主题的详细解释。 首先,我们需要一个HTML页面,其中包含一个用于显示原始...

    js 前端鼠标拖动事件实例

    在JavaScript前端开发中,鼠标拖动事件是一种常见的交互方式,让用户能够通过鼠标操作元素在页面上移动。这个实例主要涉及的关键词是“js”(JavaScript)、“ASP”(尽管在这个上下文中并不直接相关,但可能是用户...

    jquery实现简单图片的拖动

    "jquery实现简单图片的拖动"这个主题是关于如何利用jQuery的API来实现图片元素的拖放功能,这是一个常见的交互设计,使得用户可以通过鼠标拖动图片在页面上自由移动。 在jQuery中,实现图片拖动主要涉及到`...

    js图片拖动验证码完美版

    可以直接运行,双击页面打开即可展示效果,此图片验证是用js实现的

    js拖动代码

    JavaScript(简称JS)是一种轻量级的编程语言,广泛用于网页和网络应用的开发,包括实现用户交互、动画效果和动态网站功能。在本主题中,我们将深入探讨JS如何实现拖放(Drag and Drop)功能,这是一种允许用户通过...

    原生js可拖拽排列图片布局代码.zip

    在本项目中,"原生js可拖拽排列图片布局代码.zip" 提供了一个使用纯JavaScript实现的可拖拽图片网格布局系统。这个系统允许用户通过直观地拖拽图片来改变它们在页面上的位置,从而实现自定义的图片排列顺序。下面...

Global site tag (gtag.js) - Google Analytics