JS放大缩小图片的二种方法_js图片操作

当前位置：首页 > 脚本编程 > javascript实例 > js图片操作 > 正文

JS放大缩小图片的二种方法: 发布时间：2020-07-13编辑：脚本学堂

本文介绍下，使用js脚本放大与缩小图片的两种方法与实例，感兴趣的朋友参考学习下。

本节内容：
JS图片放大缩小

原理：
以左上角为定点，放大缩小，该点位置不变。

方法一：

Html代码：

复制代码代码示例:

</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中的代码：

复制代码代码示例:

<div id="biankuang" data-orient="center">
<img name="myImage" src="/img/c.jpg" alt="pic"/>//引入本地图片
</div>

上一篇：js image对象预加载图片的方法详解
下一篇：js 鼠标滚轮改变图片大小的小例子

与 JS放大缩小图片的二种方法有关的文章

本文标题：JS放大缩小图片的二种方法
本页链接：http://www.jb200.com/article/13704.html

浏览排行

栏目分类

热点文章

JS放大缩小图片的二种方法

JS放大缩小图片的二种方法

与 JS放大缩小图片的二种方法 有关的文章

浏览排行

栏目分类

栏目导航

热点文章

与 JS放大缩小图片的二种方法有关的文章