html如何控制图片自动放缩,如何用js控制图片放大缩小

js控制图片放大缩小的效果，可以通过JavaScript的width和height属性来实现。其属性可以实现按比例放大和缩小图像尺寸的功能。

在前面的文章中，也为大家介绍了JS获取图片当前宽高和JS获取图片原始宽高的方法，需要的朋友可以参考学习。

下面我们就结合具体的代码示例，给大家介绍js控制图片放大缩小的方法。

代码示例如下：

js控制图片放大缩小的示例

button{

padding: 3px 6px;

}

button img{

vertical-align: middle;

}

function zoomin(){

var myImg = document.getElementById("sky");

var currWidth = myImg.clientWidth;

if(currWidth == 500){

alert("已经达到最大尺寸.");

} else{

myImg.style.width = (currWidth + 50) + "px";

}

function zoomout(){

var myImg = document.getElementById("sky");

var currWidth = myImg.clientWidth;

if(currWidth == 50){

alert("已经达到最小尺寸.");

} else{

myImg.style.width = (currWidth - 50) + "px";

}

放大

缩小

当点击放大按钮时，就会调用zoomin()方法。首先通过document.getElementById方法获取指定图片元素，并通过clientWidth属性获取图片当前宽度。如果图片当前宽度等于500，则提示"已经达到最大尺寸."，否则每点击放大按钮就在图片当前宽度上再加50px。

当点击缩小按钮时，就会调用zoomout()方法，同样获取指定图片元素后，通过if判断，如果当前宽度等于50，则提示"已经达到最小尺寸."，否则每点击缩小按钮就会使当图片前宽度再减去50px。高度均为自适应。

最终效果如下图所示：

本篇文章就是关于js控制图片放大缩小的具体实现方法介绍，通俗易懂，希望对需要的朋友有所帮助！

html如何控制图片自动放缩,如何用js控制图片放大缩小相关推荐

pdfjs 使用viewer 实现自动翻页（js控制）
pdfjs 使用viewer 实现自动翻页使用js控制自动翻页 //获取嵌入在iframe中的子页面的window对象var childWindow = $("#myFrame" ...
如何用js实现图片下载
如何用js实现图片下载??? 需求场景:点击图标,实现图片下载. html代码: js函数: downLoadImg(imgsrc, name) {var image = new Image();// ...
ecshop图片自动本地化插件,ECSHOP下载商品图片,ECSHOP商品详情远程图片,ecshop商品远程图片保存,ecshop图片自动本地化插件,商品图片本地化
ecshop图片自动本地化插件,ECSHOP下载商品图片,ECSHOP商品详情远程图片,ecshop商品远程图片保存,ecshop图片自动本地化插件,商品图片本地化,图片远程本地化插件,ecshop远 ...
WordPress彻底禁用上传媒体图片自动生成缩略图及多尺寸图片（亲测可用）
WordPress默认上传图片的时候会自动生成缩略图及多尺寸的图片文件,大部分网站都用不到这些多余的图片,不仅仅占用空间,而且上传的时候还会消耗额外的性能. 下面仅需两段函数代码即可彻底禁用该功能. ...
如何用js实现图片切换的同时，文字也同时切换
如何用js实现图片切换的同时,文字也同时切换? 图片切换的实现我会代码如下: <!doctype html> <html> <head> <meta cha ...
pycharm编辑器如何用鼠标滚轮随时放大缩小代码
pycharm编辑器如何用鼠标滚轮随时放大缩小代码我们用pycharm的时候发现不能快捷的像其他编辑器那样用鼠标滚轮随时放大缩小代码,这是因为你还没有设置,下面我们就来设置一下. 1.放大代码设置 ...
HTML 如何让图片自动改变大小,CSS如何设置图片的大小
原标题:CSS如何设置图片的大小图片是的基本构成元素,通过img元素的属性值可以调整图片在浏览器中的显示效果,如图片的边框.大小以及为图片设置透明效果等各种样式. 通过img元素的属性值可以调整图片 ...
html中图片自动循环滚动代码,实现长图片自动循环滚动效果
实现思路滚动效果用实现.有个方法,可以滚动到指定位置(有滚动效果,不是直接到指定位置),不了解的看这里种定位滚动方式演示.每一个Item是一张长图,这样首尾相接滚动起来(滚到无限远)就是无限循环的效 ...
html让图片自动旋转360,html5 canvas 360图片旋转制作抽奖转盘代码
特效描述:html5canvas 360图片旋转抽奖转盘代码.60图片旋转制作抽奖转盘代码代码结构 1. HTML代码 var colors = ["#B8D430", &qu ...

html如何控制图片自动放缩,如何用js控制图片放大缩小

html如何控制图片自动放缩,如何用js控制图片放大缩小相关推荐

最新文章

热门文章