【JQ】点击图片放大缩小（等比例放大）

最新推荐文章于 2022-01-22 14:37:28 发布

longlongfishday

最新推荐文章于 2022-01-22 14:37:28 发布

阅读量1.6k

点赞数

分类专栏：前端 JQ 文章标签： jq 前端

本文链接：https://blog.csdn.net/m0_37715455/article/details/100549384

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

图片放大缩小demo

①文件路径

②enlarge.html

<!DOCTYPE html>
<script src="jquery/jquery-3.4.1.min.js"></script>
<script src="../0903/enlarge.js"></script>
<html lang ="en">
<head>
    <meta charset="UTF-8">
</head>
    <body>
        <img src="../0903/guigui.png" style="border:1px salmon solid" width="200px" height="200px" id="Img">
    </body>
</html>

③enlarge.js


$(function(){
    imgenlarge('Img')
})
function imgenlarge(val){
    var flag=true
    var img = document.getElementById(val)
    console.log("imgbyid",img)
    img.onclick=function(){
        var imgH = img.height
        var imgW = img.width
        if(flag){
            flag=false
            img.height = imgH*2
            img.width = imgW*2
        }else{
            flag=true
            img.height = imgH/2
            img.width = imgW/2
        }
    }
}