以左上角为定点，放大缩小，该点位置不变。
方法一：
<script type="text/javascript">
//兼容IE和火狐 缩小放大、缩放
function ImageSuofang(args) {
var oImg = document.getElementById("oImg");
if (args) {
oImg.width = oImg.width * 1.1;
oImg.height = oImg.height * 1.1;
}
else {
oImg.width = oImg.width / 1.1;
oImg.height = oImg.height / 1.1;
}
}
</script>
<form id="form1">
<div class="pancontainer" data-orient="center" style="width:320px; height:480px;margin: 5px 300px 0px 400px;border: 1px solid #000;">
<img id="oImg" src="/img/c.jpg" alt="pic"/>
</div>
<input id="btn1" type="button" value="放大" onclick="ImageSuofang(true)" />
<input id="btn2" type="button" value="缩小" onclick="ImageSuofang(false)" />
<!-- <input type="button" value="<-Rotate逆时针" name="RotateL" id="RotateL" onclick="rotateRight('oImg',90);"> -->
</form>
方法二：
CSS编码如下：
#biankuang{height:480px;width:320px;margin: 30px auto;}//加一个border可以看到定点为左上角。
下面是实现图片缩小放大功能的JS代码：
var zoomLevel = 0;
var currentWidth = 0;
var currentHeight = 0;
var originalWidth = 0;
var originalHeight = 0;
function initial(){
currentWidth = document.myImage.width;
currentHeight = document.myImage.height;
originalWidth = currentWidth;
originalHeight = currentHeight;
update();
}
function zoomIn(){
document.myImage.width = currentWidth*1.2;
document.myImage.height = currentHeight*1.2;
zoomLevel = zoomLevel + 1;
update();
}
function zoomOut(){
document.myImage.width = currentWidth/1.2;
document.myImage.height = currentHeight/1.2;
zoomLevel = zoomLevel - 1;
update();
}
function resetImage(){
document.myImage.width = originalWidth;
document.myImage.height = originalHeight;
zoomLevel = 0;
update();
}
function update(){
currentWidth = document.myImage.width;
currentHeight = document.myImage.height;
zoomsize.innerText = zoomLevel;
imgsize.innerText = currentWidth + "X" + currentHeight;
}
html的body中的代码如下：
<body onload="initial()">
<div id="biankuang" data-orient="center">
<img name="myImage" src="/img/c.jpg" alt="pic"/> //引入本地图片
</div>
<p>
<input type="button" value="放大图片" onclick="zoomIn()">
<input type="button" value="缩小图片" onclick="zoomOut()">
<input type="button" value="重置图片" onclick="resetImage()">
<span id="zoomsize"></span> <span id="imgsize"></span></p>
</body>
分享到：
相关推荐
本文将深入探讨“易语言图片放大缩小例程”，包括源码解析、图片处理原理以及如何在易语言中实现显示和移动图片。 在易语言中，处理图片放大缩小的关键在于理解图像处理的基本概念和技术。首先，我们需要了解位图和...
标题“在线图片放大缩小”指的是一个在线服务或应用程序，它允许用户无损地调整图片的尺寸，无论是放大还是缩小。这种技术在数字媒体处理、网页设计、社交媒体分享以及个人照片编辑等领域都十分常见。下面我们将深入...
结合网上的一些源码和书上的源码弄了个C#开发的winform的简易图片放大缩小。功能：打开图片，支持放大和缩小功能，一开始能展现全图，能无限放大和缩小到原图。保持居中展示。滚动条保持居中。还有一个可以旋转的请...
在处理图片放大缩小的场景下，我们可以利用CStatic的自定义绘图功能来实现。这需要覆盖CStatic的OnPaint()函数，并在其中调用CPaintDC类来获取绘图设备上下文（DC），然后使用CDC类的方法进行绘图。 在实现图片放大...
总结起来，QT中实现图片放大缩小的功能主要涉及到QLabel的`setPixmap()`和QPixmap的`scaled()`方法，以及QPushButton的信号槽机制。通过灵活运用这些组件和方法，你可以轻松地创建出一个具有图片放大缩小功能的用户...
总结来说，基于JQuery的图片放大缩小和拖动功能是通过监听鼠标和触摸事件，结合DOM操作和简单的数学计算来实现的。JQuery提供的便捷API使得这些功能的实现变得相对简单，极大地提高了开发效率。通过深入理解这些基本...
js特效-jQuery H5弹出图片放大缩小旋转插件
它允许用户通过简单的鼠标点击或触控操作，将图片放大以查看细节，同时保持页面布局的整洁。FancyZoom的核心原理是通过创建一个新的弹出层或者浮动层，将放大后的图片放置其中，以达到放大效果。 首先，要使用...
在JavaFX中，我们可以利用其丰富的图形和媒体处理能力来实现动态的图像操作，如放大、缩小和移动图片。本项目就是针对这些需求，提供了一个在JavaFX环境中能够同时进行图片缩放和移动的实例。 在JavaFX中，我们通常...
总的来说，“图片放大缩小”项目涉及了C#图形处理、Windows Forms控件、鼠标事件处理、图像操作等多个方面，是一个很好的学习和实践C# GUI编程的例子。通过这个项目，开发者可以深入理解如何利用.NET Framework提供...
两手指同时触摸屏幕实现图片放大缩小，依赖于ACTION_POINTER_DOWN和ACTION_POINTER_UP事件。ACTION_POINTER_DOWN表示有第二个手指触摸屏幕，ACTION_POINTER_UP表示其中一个手指离开。通过比较手指间的距离变化，...
以下是一个简单的图片放大示例： ```csharp using System.Drawing; public static Bitmap BlowUpImage(Bitmap originalImage, int newWidth, int newHeight) { Bitmap scaledImage = new Bitmap(newWidth, ...
Rebox可能是基于JQuery的一个轻量级实现，它可能包含了图片放大、缩小以及左右滑动的功能。使用这样的插件可以大大简化开发工作，因为它们通常已经封装好了所有必要的逻辑和样式。 在实际应用中，我们还需要考虑...
以下是实现图片放大缩小的基本步骤： 1. **加载图片**：使用Bitmap类的构造函数从文件路径或流中加载图片，例如： ```csharp Bitmap originalImage = new Bitmap(filePath); ``` 2. **创建新的Bitmap对象**：...
jQuery图片放大缩小功能使得用户可以在网页上自由地查看图片的细节，提升用户体验。本篇文章将详细探讨如何利用jQuery实现这一功能，以及相关的核心知识点。 首先，我们需要了解jQuery的基本用法。jQuery是一个轻量...
以上就是实现WPF中鼠标拖动图片放大缩小的基本步骤。通过结合`Image`控件、`Canvas`以及鼠标的事件处理，你可以创建出具有直观交互的图像查看功能。这不仅提高了用户体验，也是WPF应用中常见且实用的技能之一。
在这个场景下，"图片放大缩小功能"是ASP应用中的一个关键点，主要用于优化用户在网页上查看图片的体验。 首先，我们要理解图片放大和缩小的基本原理。图片的尺寸通常由宽度和高度的像素值决定。当图片被放大时，...
"点击图片放大缩小"的功能就是一个典型的交互设计，它可以让用户更细致地查看图片而不影响页面的整体布局。这个功能通常通过JavaScript实现，因为JavaScript具有良好的动态效果处理能力，并且可以直接操作DOM（文档...
图片放大与缩小** PictureBox控件提供了调整图片大小的能力。通过设置`SizeMode`属性，我们可以实现图片的缩放。例如： - `PictureBoxSizeMode.AutoSize`：图片大小会自动适应控件的大小。 - `PictureBoxSizeMode...
可放大缩小的imageview，能够多点操作，也可单点滑动，图片自动缩放并在中间显示