【杂谈】如何用js掌握图片放大减少
2019-11-18杂谈搜奇网41°c
A+ A-
js掌握图片放大减少的结果,能够经由过程JavaScript的width和height属性来完成。其属性能够完成按比例放大和减少图象尺寸的功用。
引荐参考:《JavaScript教程》
在前面的文章中,也为人人引见了JS猎取图片当前宽高和JS猎取图片原始宽高的要领,须要的朋侪能够参考进修。
下面我们就连系细致的代码示例,给人人引见js掌握图片放大减少的要领。
代码示例以下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>js掌握图片放大减少的示例</title> <style type="text/css"> button{ padding: 3px 6px; } button img{ vertical-align: middle; } </style> <script type="text/javascript"> 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"; } } </script> </head> <body> <p> <button type="button" onclick="zoomin()"> 放大</button> <button type="button" onclick="zoomout()"> 减少</button> </p> <img src="./1.png" id="sky" style="width: 250px;"> </body> </html>
当点击放大按钮时,就会挪用zoomin()要领。起首经由过程document.getElementById要领猎取指定图片元素,并经由过程clientWidth属性猎取图片当前宽度。假如图片当前宽度即是500,则提醒"已到达最大尺寸.",不然每点击放大按钮就在图片当前宽度上再加50px。
当点击减少按钮时,就会挪用zoomout()要领,一样猎取指定图片元素后,经由过程if推断,假如当前宽度即是50,则提醒"已到达最小尺寸.",不然每点击减少按钮就会使当图片前宽度再减去50px。高度均为自适应。
终究结果以下图所示:
本篇文章就是关于js掌握图片放大减少的细致完成要领引见,通俗易懂,愿望对须要的朋侪有所协助!
以上就是如何用js掌握图片放大减少的细致内容,更多请关注ki4网别的相干文章!
标签:js控制图片放大缩小