`
izuoyan
  • 浏览: 9222023 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

IE中实现图片的拖拽

阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script language="javascript">
function moveImage(){
if(window.event.button!=1){
return;
}
with(window.event.srcElement.style){
//重新设置图像在浏览器中的位置
pixelLeft=window.event.x-236/2-document.all.ImageDiv.offsetLeft;
pixelTop=window.event.y-118/2-document.all.ImageDiv.offsetTop;
}
window.event.returnValue=false;//取消系统拖动事件
}
</script>
</HEAD>

<BODY>
<div style="position:relative" id="ImageDiv">
<img id="image2" style="container:positioned;position:absolute;top:60px;left:250px;width:236px;height:108px;" src="booka.gif">
<img id="image2" style="container:positioned;position:absolute;top:60px;left:60px;width:236px;height:108px;" src="booka.gif" onmouseMove="moveImage()">
</div>
</BODY>
</HTML>

分享到:
评论

相关推荐

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

    2. **图片拖拽**:允许用户在页面上自由拖动图片。 3. **兼容性**:确保脚本可以在不同的浏览器环境下正常运行,特别是对于已经不再主流但仍然有用户使用的IE浏览器。 #### 代码解析 ##### 初始化图片位置 ```...

    ie9超级拖拽(亲测能用)

    在IE9中,这个特性允许用户通过拖动网页上的链接、图片或其他元素到桌面或另一程序窗口来实现快速保存、打开或分享内容。这一功能大大提升了浏览体验和工作效率。 首先,我们要理解什么是拖放技术。拖放是用户界面...

    让你的图片实现可以拖动的效果

    这段代码实现了一个功能,即让网页中的图片具备可拖动的效果。主要涉及到HTML、CSS和JavaScript三方面的知识。 首先,我们来看HTML部分。在这里,只有一个`&lt;img&gt;`标签用于显示图片,其`src`属性指定了图片的路径,`...

    可拖拽图片文本框(类似QQ发送消息框

    在IT行业中,尤其是在前端开发领域,可拖拽图片并将其转化为文本框内可编辑的base64编码是一项实用的功能。这种技术通常用于提高用户体验,比如在聊天应用、论坛或者在线编辑器中,用户可以直接通过拖放操作上传图片...

    js实现鼠标滚轮控制图片缩放效果的方法

    在如今的网络应用中,经常会遇到需要实现用户通过鼠标滚轮控制页面元素缩放的场景,例如图片查看器、地图应用等。本文将详细介绍如何使用JavaScript来实现通过鼠标滚轮控制图片缩放效果的方法,其中将涉及...

    JS实现列表图片拖拽排序效果特效源码.zip

    在JavaScript(JS)中实现列表图片的拖拽排序效果,是一种增强用户体验的常见技术,尤其适用于需要用户自定义顺序的场景。本项目提供了一个特效源码,帮助开发者创建具有动态反馈和流畅动画的拖放功能。以下是实现...

    jquery实现图片旋转(js实现)

    本文将深入探讨如何使用jQuery来实现图片旋转功能,并兼容IE、Firefox、Opera和Chrome等主流浏览器。 首先,要实现图片旋转,我们需要理解CSS3中的`transform`属性,尤其是`rotate()`函数。`rotate()`允许我们以...

    C# 实现类似傲游webbrowser超级拖拽 (此程序有些bug)

    - 图片拖拽则可能涉及到图像的抓取和转换,需要将图片数据包装成可拖放的数据对象。 - 当拖放到其他程序或桌面时,需要根据接收端的需求,提供合适的数据格式,如文本、URL或二进制数据。 5. **注意的问题和存在...

    Super Drag and Go for IE (超级拖拽for IE)

    1. **拖放功能增强**:Super Drag and Go使用户能够通过拖动网页上的链接、图片、文字等元素来实现快速打开新页面、保存文件、搜索信息等多种操作。例如,拖动链接到新的标签页可直接打开链接,拖动图片到桌面可快速...

    HTML5拖动条实现图片滚动浏览效果.rar

    HTML5拖动条实现图片滚动浏览效果,当运行本效果后,拖动底部的滚动条即可控制上面的图片滑动起来,可浏览到每一张图片,采用最新的HTML5移动设备技术,效果不错,本代码面向移动设备开发,在电脑上浏览需要Chrome或...

    sortable 图片排序 ,拖拽

    在本篇文章中,我们将深入探讨Sortable库以及如何在项目中实现图片排序和拖拽功能。 Sortable是一个轻量级的开源库,它基于HTML5的`draggable`和`data-*`属性,提供了跨浏览器的拖放排序解决方案。这个库不仅支持...

    用JS实现和google地图类似的图片查看器-----放大、缩小、移动和还原,都控制在div里,兼容ie,FF

    在本文中,我们将深入探讨如何使用JavaScript(JS)来创建一个类似于Google地图的图片查看器。这个查看器将具备放大、缩小、移动和还原图片的功能,并且能够在div容器内正常工作,同时兼容Internet Explorer(IE)和...

    js 拖动排序,文本拖动,图片拖动,支持移动端,兼容性好。

    实现图片拖动 图片拖放的实现与文本类似,只需将HTML元素替换为`&lt;img&gt;`标签,并设置适当的源URL。在`drop`事件处理函数中,可以通过`event.dataTransfer.files`获取到拖放的文件,然后利用FileReader API读取并...

    jquery全屏滑块拖动横向图片滚动.zip

    这种特效使得网页中的图片能够全屏显示,并且支持通过鼠标滚轮或直接拖动来实现横向的平滑滚动,为用户提供了沉浸式的浏览体验。在网页设计和开发中,这种滑块效果被广泛应用,尤其是在产品展示、摄影作品集或网站...

    用JS实现和google地图类似的图片查看器-放大、缩小、移动和还原,都控制在div里,兼容ie,FF

    为了实现图片的平移,我们需要监听鼠标事件,计算鼠标相对于图片左上角的位置,然后根据鼠标的移动调整图片的位置: ```javascript let offsetX = 0, offsetY = 0; container.addEventListener('mousedown', ...

    JS图片拖动裁剪代码.zip

    在JavaScript(JS)中实现图片拖动裁剪功能是一项常见的前端技术需求,它涉及到HTML、CSS和JavaScript的深度结合。这个"JS图片拖动裁剪代码.zip"压缩包可能包含了一个实现这一功能的完整示例。以下是这个技术点的...

    js动画图片拖动排序效果

    在JavaScript(JS)中实现图片拖动排序效果是一项常见的交互设计任务,它可以为用户带来更加直观和有趣的体验。本文将深入探讨如何利用JS技术来创建这样的功能,包括基本原理、核心代码以及可能遇到的问题和解决方案...

    H5实现拖动验证码.zip

    在这个拖动验证码中,用户需要将一个特定的图像或者标记拖动到正确的位置,以证明他们是真实的交互。这个过程既增加了安全性,又提高了用户参与度,相比传统的输入数字或点击图片的验证码方式,更具有互动性和趣味性...

    js实现覆盖层浏览图片及特效(可拖动) js封装成类库

    在实现图片浏览组件时,我们需要监听`mousedown`(鼠标按下)、`mousemove`(鼠标移动)和`mouseup`(鼠标释放)等事件,来追踪用户的拖动操作。例如: ```javascript element.addEventListener('mousedown', ...

    jquery拖拽图片排序

    "jquery拖拽图片排序"是一种交互式功能,允许用户通过拖放操作来改变图片或包含图片的div元素的顺序,从而实现自定义布局。这种功能在各种应用场景中都非常实用,比如相册管理、任务卡片排序等。 实现jQuery拖拽...

Global site tag (gtag.js) - Google Analytics