`
fengchao
  • 浏览: 137190 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

【JavaScript】画面元素（图片）可拖动的技术实现收藏

JavaScriptHTML 
阅读更多
这个关键是用好3个事件，一个是onmousedown一个是onmousemove一个是onmouseup
onmousedown记录当前鼠标所触发的对象，在onmousemove所触发的方法中进行移动，onmouseup放下拖动的对象。

代码： 

<script language="javascript">
  var checkMoving;
  function divMove(){
    checkMoving = false;
    document.onmousedown=startMove;
    document.onmousemove=moveObj;
    document.onmouseup=new Function("checkMoving = false");
  }

  function startMove(){
    if(event.srcElement.className!="imgObj") return;
    checkMoving=true;
    Xdiff=event.clientX-event.srcElement.style.pixelLeft;
    Ydiff=event.clientY-event.srcElement.style.pixelTop;
  }

  function moveObj(){
    if(!checkMoving) return true;
    event.srcElement.style.pixelLeft=event.clientX-Xdiff;
    event.srcElement.style.pixelTop=event.clientY-Ydiff;
    return false;
  }
</script>

<body style="margin: auto;" onLoad="divMove();">
<div style="left:0;top:0;position:relative;overflow:hidden;width:100%;height:100%" id="div1">
<img src="default.gif" style="position:relative;left:0px;top:0px;width:100px;height:100px;cursor:hand;" class=imgObj>
</div>
</body>
分享到：
| Struts标签示例收藏
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

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

    bootstrap模态框实现拖拽效果

    在某些情况下，特别是在复杂布局中，模态框可能会被其他元素遮挡，这时就需要实现模态框的拖拽功能，以便用户可以根据需要调整其位置。 在Bootstrap中，模态框默认并不具备拖拽功能。要实现这一效果，通常需要借助...

    javascript实现移动端触屏拖拽功能

    通过以上的JavaScript代码，我们可以实现在移动端触屏上拖动`div1`元素的功能。这个功能在移动设备上可以提供良好的交互体验，让用户能够自由地移动和操作界面元素。在实际开发中，可以根据需求对代码进行适当的调整...

    js弹出可拖动div

    在JavaScript中，创建一个可拖动的div元素是一项常见的任务，尤其在开发交互式Web应用时。这个"js弹出可拖动div"的主题主要涵盖了HTML、CSS和JavaScript的结合，用于实现用户友好的界面元素。下面我们将深入探讨这个...

    three.js拖拽生成场景简单示例

    在本文中，我们将深入探讨如何使用three.js库创建一个简单的拖拽生成场景的示例。three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建3D图形变得容易。结合OrbitControls.js，我们可以实现对场景中的对象...

    拼图将碎片拼凑成一个完整画面HTML5源码

    【标题】：“拼图将碎片拼凑成一个完整画面HTML5源码”指的是一个使用HTML5技术实现的在线拼图游戏。在这个项目中，开发者利用HTML5的Canvas元素和JavaScript编程来创建一个互动的拼图游戏，玩家可以将打乱的图片...

    JavaScript特效大全

    9. **Web组件**：利用Web Components技术，可以创建自定义的可复用组件，封装样式和行为，实现更高效的代码组织。 10. **响应式设计**：JavaScript可以帮助实现响应式布局，根据设备屏幕大小调整内容显示，提供一致...

    Wincc画面窗口操作教程

    2. 添加图形对象：从对象库中拖拽所需图形元素到画面窗口，如文本框、按钮、图像等，并进行位置和尺寸的调整。 3. 配置对象属性：每个图形对象都有自己的属性设置，如文字内容、颜色、字体、链接的变量等。通过双击...

    jQuery实现的电影背景画面对比滑块效果源码.zip

    【标题】"jQuery实现的电影背景画面对比滑块效果源码"是一个基于JavaScript库jQuery创建的项目，它主要用于在网页上展示电影背景画面的对比效果。这种效果通常用于电影预告片网站或电影主题的网页设计中，允许用户...

    Canvas可拖动人物关系图代码.zip

    本项目“Canvas可拖动人物关系图代码”提供了一种利用JavaScript和Canvas实现动态、可交互的人物关系图的解决方案。这个代码库可能包含HTML、CSS和JavaScript文件，用于创建一个用户可以手动拖动节点来调整关系展示...

    展示效果（原生JS）

    4. **图形绘制**：利用`canvas`元素，JavaScript可以直接在网页上绘制2D图形，实现图表、游戏画面或其他自定义图形的展示。 5. **AJAX异步请求**：通过XMLHttpRequest或fetch API，JavaScript可以向服务器发送异步...

    全景图片拖动查看全貌

    全景图片拖动查看全貌是一种常见的网页互动效果，主要用于展示360度全景视图，让用户可以通过鼠标或触摸设备自由地上下左右拖动画面，从而获得全方位的视觉体验。这种技术广泛应用于虚拟旅游、室内设计、产品展示等...

    JavaScript特效

    6. **拖放功能**：JavaScript的拖放API允许用户将元素从一处拖拽到另一处，常用于创建自定义的界面交互，如文件上传或布局调整。 7. **响应式设计**：随着移动设备的普及，JavaScript可以用于检测设备特性，如屏幕...

    HTML5+Three.js实现的可拖拽玻璃曲面折射全景动画效果源码.zip

    在这个"HTML5+Three.js实现的可拖拽玻璃曲面折射全景动画效果源码"项目中，开发者利用HTML5的Canvas元素和Three.js库创建了一个交互式的3D场景。Canvas是HTML5的一个核心部分，它提供了一个二维绘图环境，允许开发者...

    jquery全景拖动查看效果.zip

    首先，创建一个小图作为全景的预览，用户在小图上进行拖动操作时，JavaScript会捕获这些事件，并根据拖动的位置计算出大图相应部分的坐标。然后，通过CSS或JavaScript动态修改大图的显示区域，使其显示被拖动到的...

    HTML5+Three.js实现可拖拽的虚拟天空环境全景动画效果源码.zip

    在本项目中，"HTML5+Three.js实现可拖拽的虚拟天空环境全景动画效果源码"，我们可以深入理解HTML5与Three.js库如何结合，以构建一个动态的、用户可操作的虚拟环境。 Three.js是基于JavaScript的一个3D图形库，它...

    html5 canvas实现可响应鼠标拖动、旋转的3D发光蓝宝石动画特效源码.zip

    通过学习和分析这段源码，开发者可以深入了解Canvas的图形绘制和动画技术，以及如何通过JavaScript实现鼠标交互。对于想要提升Web前端技能，特别是3D图形编程的开发者来说，这是一个非常有价值的资源。

    精选_基于JavaScript Canvas的植物大战僵尸_源码打包

    《基于JavaScript Canvas的植物大战僵尸_源码打包》是一个涵盖了多方面前端开发技术的项目，主要使用了JavaScript作为开发语言，结合HTML5的Canvas元素，实现了经典的“植物大战僵尸”游戏。这个项目不仅展示了...

    html5+three.js实现可拖动的月球3D动画特效源码.zip

    总的来说，"html5+three.js实现可拖动的月球3D动画特效源码.zip" 是一个结合了HTML5、WebGL和Three.js技术的实例，展示了如何利用这些工具在浏览器中创建交互式的3D视觉效果。通过学习和研究这个项目，开发者可以...

    HTML5+Three.js实现可拖拽的粒子光团动画全景效果源码.zip

    在这个项目中，`Three.js`库被用来在`Canvas`上构建一个可拖拽的粒子光团动画全景效果。 `Three.js`是一个基于WebGL的JavaScript库，用于在浏览器中创建3D图形。WebGL是一种JavaScript API，它允许在任何兼容的Web...

Magicbox
Global site tag (gtag.js) - Google Analytics