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

简单的图片放大缩小

阅读更多

以左上角为定点,放大缩小,该点位置不变。

 

方法一:

 

   <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图片放大缩小,类似windows的图片查看器

    结合网上的一些源码和书上的源码弄了个C#开发的winform的简易图片放大缩小。功能:打开图片,支持放大和缩小功能,一开始能展现全图,能无限放大和缩小到原图。保持居中展示。滚动条保持居中。还有一个可以旋转的请...

    mfc 图片的放大缩小

    在处理图片放大缩小的场景下,我们可以利用CStatic的自定义绘图功能来实现。这需要覆盖CStatic的OnPaint()函数,并在其中调用CPaintDC类来获取绘图设备上下文(DC),然后使用CDC类的方法进行绘图。 在实现图片放大...

    QT图片放大缩小

    总结起来,QT中实现图片放大缩小的功能主要涉及到QLabel的`setPixmap()`和QPixmap的`scaled()`方法,以及QPushButton的信号槽机制。通过灵活运用这些组件和方法,你可以轻松地创建出一个具有图片放大缩小功能的用户...

    基于JQuery的图片放大缩小,拖动

    总结来说,基于JQuery的图片放大缩小和拖动功能是通过监听鼠标和触摸事件,结合DOM操作和简单的数学计算来实现的。JQuery提供的便捷API使得这些功能的实现变得相对简单,极大地提高了开发效率。通过深入理解这些基本...

    jQuery H5弹出图片放大缩小旋转插件.zip

    js特效-jQuery H5弹出图片放大缩小旋转插件

    js图片放大缩小效果 商品展示 一

    它允许用户通过简单的鼠标点击或触控操作,将图片放大以查看细节,同时保持页面布局的整洁。FancyZoom的核心原理是通过创建一个新的弹出层或者浮动层,将放大后的图片放置其中,以达到放大效果。 首先,要使用...

    c# 图片放大缩小(鼠标点击放大区域为原始大小)

    总的来说,“图片放大缩小”项目涉及了C#图形处理、Windows Forms控件、鼠标事件处理、图像操作等多个方面,是一个很好的学习和实践C# GUI编程的例子。通过这个项目,开发者可以深入理解如何利用.NET Framework提供...

    Android 图片随手势放大缩小功能

    两手指同时触摸屏幕实现图片放大缩小,依赖于ACTION_POINTER_DOWN和ACTION_POINTER_UP事件。ACTION_POINTER_DOWN表示有第二个手指触摸屏幕,ACTION_POINTER_UP表示其中一个手指离开。通过比较手指间的距离变化,...

    C# 对图片的放大缩小 局部放大

    以下是一个简单的图片放大示例: ```csharp using System.Drawing; public static Bitmap BlowUpImage(Bitmap originalImage, int newWidth, int newHeight) { Bitmap scaledImage = new Bitmap(newWidth, ...

    WPF 鼠标拖动图片放大缩小

    以上就是实现WPF中鼠标拖动图片放大缩小的基本步骤。通过结合`Image`控件、`Canvas`以及鼠标的事件处理,你可以创建出具有直观交互的图像查看功能。这不仅提高了用户体验,也是WPF应用中常见且实用的技能之一。

    JQuery点击放大缩小图片并可左右滑动

    Rebox可能是基于JQuery的一个轻量级实现,它可能包含了图片放大、缩小以及左右滑动的功能。使用这样的插件可以大大简化开发工作,因为它们通常已经封装好了所有必要的逻辑和样式。 在实际应用中,我们还需要考虑...

    asp.net 图片放大缩小

    以下是实现图片放大缩小的基本步骤: 1. **加载图片**:使用Bitmap类的构造函数从文件路径或流中加载图片,例如: ```csharp Bitmap originalImage = new Bitmap(filePath); ``` 2. **创建新的Bitmap对象**:...

    jquery图片放大缩小

    jQuery图片放大缩小功能使得用户可以在网页上自由地查看图片的细节,提升用户体验。本篇文章将详细探讨如何利用jQuery实现这一功能,以及相关的核心知识点。 首先,我们需要了解jQuery的基本用法。jQuery是一个轻量...

    图片放大缩小功能

    在这个场景下,"图片放大缩小功能"是ASP应用中的一个关键点,主要用于优化用户在网页上查看图片的体验。 首先,我们要理解图片放大和缩小的基本原理。图片的尺寸通常由宽度和高度的像素值决定。当图片被放大时,...

    点击图片放大缩小

    "点击图片放大缩小"的功能就是一个典型的交互设计,它可以让用户更细致地查看图片而不影响页面的整体布局。这个功能通常通过JavaScript实现,因为JavaScript具有良好的动态效果处理能力,并且可以直接操作DOM(文档...

    C# PictureBox图片放大缩小、旋转、打印等

    图片放大与缩小** PictureBox控件提供了调整图片大小的能力。通过设置`SizeMode`属性,我们可以实现图片的缩放。例如: - `PictureBoxSizeMode.AutoSize`:图片大小会自动适应控件的大小。 - `PictureBoxSizeMode...

    可放大缩小图片控件

    可放大缩小的imageview,能够多点操作,也可单点滑动,图片自动缩放并在中间显示

    WPF利用缩略图实现图片放大缩小

    在本文中,我们将深入探讨如何在Windows Presentation Foundation (WPF) 中利用缩略图实现图片的放大缩小功能。WPF是微软.NET Framework的一部分,提供了一种强大的方式来创建丰富的、交互式的桌面应用程序。 首先...

Global site tag (gtag.js) - Google Analytics