鼠标控制图片缩放的代码(IE下面可以使用)
<SCRIPT language=JavaScript type=text/JavaScript>
var isdrag = false;
function img_zoom(e, o) //图片鼠标滚轮缩放 {
var zoom = parseInt(o.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;
if (zoom > 0)
o.style.zoom = zoom + '%';
return false;
}
function mouseover() {
div1.border = "1";
div1.style.cursor = "nw-resize";
}
function mouseout() {
div1.border = "0";
}
function mousemove() {
if (isdrag) {
div1.style.width = event.clientX;
//div1.style.height=event.clientY;
}
}
function mousedown() {
div1.setCapture();
isdrag = true;
div1.onmousemove = mousemove;
}
function mouseup() {
div1.releaseCapture();
isdrag = false;
//event.returnValue=false;
}
</SCRIPT>
<IMG onmouseover="mouseover()" onmouseout="mouseout()"
onmouseup="mouseup()" onmousedown="mousedown()" id="div1"
onmousewheel="return img_zoom(event,this)" alt="鼠标的滚轮控制图片自动缩放"
src="http://www.java2000.net/images/company/www.java2000.net.gif"
onload="javascript:if(this.width>screen.width-500)this.width=screen.width-500">
分享到:
相关推荐
本文将详细介绍如何使用JavaScript来实现通过鼠标滚轮控制图片缩放效果的方法,其中将涉及onmousewheel事件的使用以及JavaScript操作DOM来调整图片大小的技巧。 首先,我们应当理解onmousewheel事件。这是一个鼠标...
总结一下,"js图片缩放效果制作鼠标滚动图片等比例缩放"涉及到的技术点有: 1. JavaScript事件监听:监听鼠标的滚轮事件。 2. CSS3变换:使用`transform`属性进行等比例缩放。 3. 计算缩放比例:根据滚动的增量和...
对于鼠标控制图片缩放,我们需要在C#中创建一个带有pictureBox控件的用户界面,然后编写响应鼠标滚轮事件的代码。当用户滚动鼠标滚轮时,可以调整pictureBox的缩放比例,从而实现图像的放大和缩小。这涉及到窗体的...
在本文中,我们将深入探讨如何使用Halcon库与C#结合,实现在HWindow中对图像进行鼠标控制的缩放、拖动以及ROI(Region of Interest)操作。这对于图像处理和机器视觉应用来说是非常关键的功能,它能帮助我们更有效地...
以上就是利用WPF实现鼠标滚轮控制图片缩放的核心步骤。在实际应用中,可能还需要考虑其他细节,比如平滑过渡效果、图片的中心对齐等,但基本原理就是这样。通过这样的技术,用户可以方便地通过鼠标滚轮来浏览和查看...
"js图片缩放效果制作鼠标滚动图片等比例缩放代码"是一个JavaScript实现的项目,它旨在提供一种动态的、响应式的图片展示解决方案,特别是在用户滚动页面时,图片能按照其原始比例进行平滑缩放。这个项目的核心目标是...
描述中提到的“鼠标拖动移动”是指在图片缩放后,用户还可以通过鼠标拖动来改变图片的位置,以便更全面地查看图片的各个部分。这增加了用户体验的互动性和灵活性,让用户可以自由控制查看图片的角度和范围。 基于...
在本文中,我们将深入探讨如何在C#环境中与HALCON集成,实现图像处理中的鼠标控制功能,如图片的缩放、拖动以及交互式ROI(Region of Interest)绘制。HALCON是一款强大的机器视觉软件,提供了丰富的图像处理算法,...
在本话题中,我们将探讨如何利用VBScript实现鼠标滚轮控制图片缩放的特效,这在网页交互设计中是一项实用且吸引用户注意力的功能。 首先,我们需要了解VBScript的基本语法和事件处理。在HTML页面中,我们可以嵌入...
以上就是利用鼠标滚轮控制图片缩放的基本原理和实现方法。通过这个功能,用户可以通过简单地滚动鼠标滚轮来轻松放大或缩小图片,提高了交互性和用户体验。在实际应用中,还可以根据需求添加平移、动画过渡等高级特性...
在QT框架下,开发图像处理应用时,我们经常会遇到图片的自适应显示、缩放、移动和截图等需求。本文将详细介绍如何实现这些功能,并提供一个名为`EditPic`的示例项目,帮助你理解其背后的原理和实现方法。 首先,...
在本文中,我们将深入探讨如何在MFC(Microsoft Foundation Classes)框架下与Halcon库集成,实现图像的鼠标缩放和拖动功能。Halcon是一款强大的机器视觉软件,提供了丰富的图像处理函数,而MFC是C++编程中用于构建...
以上就是在jQuery中实现鼠标滚轮控制图片缩放的基本步骤。需要注意的是,这种方法可能在触摸设备上不起作用,因为它们没有鼠标滚轮。在这种情况下,可以考虑使用触摸手势如 pinch-zoom 来实现相同的效果。同时,为了...
"百度百科图片大小缩放代码"是一个示例,它展示了如何模仿百度百科的图片播放界面来实现图片的动态缩放功能。这个项目可能包含了一个HTML文件(index.html)、一个图片文件(index.jpg)、一个或多个图片资源文件夹...
图片的切换通常涉及到数组存储多张图片的URL,然后使用JavaScript控制图片的显示。可以使用定时器或事件驱动(如点击按钮)来改变img标签的src属性,实现图片的切换效果。同时,可以添加过渡动画,使得切换过程更...
在本文中,我们将深入探讨如何使用Flex技术来实现在网页中通过鼠标滚动来实现图片的放大缩小,并且确保每次缩放都是以鼠标当前位置为中心进行的。Flex是一种强大的前端开发框架,它允许开发者创建灵活的、响应式的...
这段代码利用鼠标滚轮事件来控制图片的缩放,通过修改`matrix`的缩放系数实现。 五、综合应用 为了同时实现图片的缩放和拖动,我们需要在上述代码的基础上进行整合。在拖动时,需要考虑到图片缩放后的位置,确保...
WPF 提供了强大的图形和绘图能力,使得实现图片缩放变得相对简单。本文将详细介绍如何在WPF中实现图片的缩放功能,并着重讲解如何在鼠标所点位置进行缩放。 首先,我们需要了解WPF中的Image控件。Image控件是WPF中...
我们可以通过设置其SizeMode属性来控制图片的显示方式。例如,可以设置为PictureBoxSizeMode.StretchImage,使图片自适应控件大小。 接下来,我们需要加载图片到PictureBox中。VB提供了LoadImage函数,可以从文件...