hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 杂谈 - 正文 君子好学,自强不息!

【杂谈】如何用js掌握图片放大减少

2019-11-18杂谈搜奇网34°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网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
【杂谈】如何用js掌握图片放大减少

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

本文来源:搜奇网

本文地址:https://www.sou7.cn/282025.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>