`
java_frog
  • 浏览: 253154 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript用鼠标拖动图片移动

阅读更多
<script language="JavaScript">
var allow=false;//判断是否允许被拖动
var img;//被拖动的图片的对象
var x;//鼠标相对于浏览器的x坐标
var y;//鼠标相对于浏览器y坐标
function move()
{
  if (event.button==1 && allow) //改变被拖动元素在页面上的位置
   {
    img.style.pixelLeft=temp1+event.clientX-x;
    img.style.pixelTop=temp2+event.clientY-y;
   }
}
function begin()
{
  if (!document.all)//说明一个元素也没有则结束
  return
  if (event.srcElement.id=="drag") //捕捉鼠标和被拖动元素的当前位置,通过id来获得某个唯一元素
   {
    allow=true;
    img=event.srcElement;
    temp1=img.style.pixelLeft;//记录该图片的x坐标
    temp2=img.style.pixelTop;
    x=event.clientX;//记录鼠标当前的x坐标
    y=event.clientY;
    document.onmousemove=move;
   }
}
document.onmousedown=begin; //鼠标左键按下时,准备拖动
document.onmouseup=function(){allow=false}//鼠标左键放开时,拖动停止
</script>
<span style="font-family:DextorOutD;font-size: 9pt"><img src="**********.jpg" id="drag" onmouseover="this.style.cursor='hand';this.style.position='relative'"></span>

分享到:
评论

相关推荐

    javascript 鼠标拖动图片

    在JavaScript编程中,实现“鼠标拖动图片”功能是一项常见的交互设计,它可以增强用户体验,让用户更直观地操作和浏览图片。这项技术的核心是利用事件监听和处理,包括鼠标按下、移动和释放等事件,以及对图片位置和...

    javascript实现鼠标拖动div的效果

    在JavaScript中实现鼠标拖动div的效果是一项常见的交互功能,它能增强用户与网页元素的互动性。这个功能主要涉及到事件监听、元素位置的计算以及页面重绘等技术。以下将详细讲解如何通过JavaScript来实现这一效果。 ...

    JavaScript模仿鼠标拖动选择功能

    在JavaScript编程中,实现鼠标拖动选择功能是一项常见的需求,特别是在网页交互设计中。这个功能可以让用户通过鼠标拖动来选取一个矩形区域内的元素,比如在文本编辑器中选择文字,或者在图像编辑工具中选取部分图像...

    JS实现鼠标拖动div移动(附效果演示).zip

    在JavaScript中,实现鼠标拖动div移动的效果是前端开发中常见的交互设计,它涉及到DOM操作、事件处理以及坐标计算等多个知识点。以下将详细介绍这个过程。 首先,我们需要理解`div`在HTML中的作用。`div`元素是块级...

    js 前端鼠标拖动事件实例

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

    html5鼠标拖动图片3D旋转动画效果代码

    本示例着重介绍如何利用HTML5实现鼠标拖动图片进行3D旋转的动画效果。 首先,我们需要一个HTML文件作为基础,包含Canvas元素以及用于展示图片的div元素。HTML结构可能如下: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;...

    javascript 表格鼠标移动变色

    鼠标移动表格行上行变色的JS脚本,鼠标移动表格行上行变色的JS脚本,

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

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

    js鼠标拖动图片360度平面旋转代码

    在JavaScript(简称JS)编程中,实现鼠标拖动图片360度平面旋转的效果涉及到多个关键技术点,包括事件监听、CSS3变换以及动画帧更新。下面将详细解释这些知识点。 首先,我们需要理解JavaScript中的事件监听。事件...

    jquery图片全景查看器鼠标拖动图片全景预览效果代码

    【jQuery图片全景查看器】是一种基于JavaScript库jQuery实现的交互式图像展示技术,它允许用户通过鼠标拖动来查看图片的全景视图。这种技术在网页设计中常用于展示360度产品视图、虚拟旅游场景或者任何需要全方位...

    实现鼠标拖动图像的源代码资源

    在计算机图形用户界面(GUI)开发中,允许用户通过鼠标拖动图像是一种常见的交互方式,可以提高用户体验并增强应用程序的可操作性。本资源提供的源代码着重于如何在不同的编程环境中实现在屏幕上拖动图像的功能。...

    javascript 鼠标拖动商品图片添加到购物车的功能实例.zip

    在JavaScript编程中,实现鼠标拖动商品图片并添加到购物车的功能是一项常见的交互设计,它提升了用户的购物体验。这个功能实例通常涉及到事件监听、DOM操作、数据管理等多个方面。下面我们将详细探讨如何实现这一...

    JS图片轮显+鼠标拖动图片

    在这个项目中,“JS图片轮显+鼠标拖动图片”指的是利用JavaScript技术来创建一个功能,它不仅可以让图片自动轮播,还能允许用户通过鼠标拖动来手动浏览图片。 图片轮显是网页设计中常用的一种展示多张图片的方式,...

    网页模板——javascript 鼠标拖动商品图片添加到购物车的功能实例.zip

    "网页模板——javascript 鼠标拖动商品图片添加到购物车的功能实例"是一个典型的电商网站功能,它利用JavaScript技术实现了用户可以方便地通过鼠标拖拽商品图片直接添加到购物车的操作。这个功能极大地提升了用户的...

    超级酷的3d鼠标拖动图片360°旋转动画效果

    在3d鼠标拖动图片特效中,jQuery主要负责监听鼠标的移动事件,并根据用户的输入调整图片的旋转角度。 实现这个360°旋转动画效果通常包括以下几个关键步骤: 1. **初始化设置**:在HTML中,我们需要一个容器元素来...

    jQuery鼠标拖动图片摇晃特效.zip

    总的来说,“jQuery鼠标拖动图片摇晃特效”是一个集成了jQuery基础、CSS3变换和事件处理的综合性实例,对于想要提升JavaScript技能的开发者来说,是一个很好的学习资源。通过解压提供的“jQuery鼠标拖动图片摇晃特效...

    鼠标拖动图片,可用鼠标滚动条放大缩小

    在IT领域,尤其是在图形用户界面(GUI)设计和交互中,"鼠标拖动图片,可用鼠标滚动条放大缩小"是一项常见的功能,它极大地提升了用户体验。这个功能涉及到图像处理、GUI编程以及用户交互等多个方面的知识。下面我们...

    鼠标拖动2D图片,呈现360°旋转3D动画效果

    在IT领域,实现鼠标拖动2D图片以呈现360°旋转的3D动画效果是一种常见的交互式设计技术,广泛应用于产品展示、游戏开发、虚拟现实等多种场景。这一技术结合了计算机图形学、JavaScript编程以及HTML5的Canvas元素等...

    javascript无刷新窗口,鼠标壳拖动窗口位置

    在JavaScript编程中,实现无刷新窗口以及允许用户通过鼠标拖动窗口位置的技术是现代Web应用中常见的需求。这种功能能够提供更加流畅和交互性强的用户体验,尤其适用于弹出框、对话框或者浮动面板等元素。以下是对这...

Global site tag (gtag.js) - Google Analytics