如何把JSP图片点击放大，再次点击还原

最新推荐文章于 2024-08-21 23:57:05 发布

李大本事..

最新推荐文章于 2024-08-21 23:57:05 发布

阅读量2.1k

点赞数

分类专栏： java 文章标签： jsp 图片放大

本文链接：https://blog.csdn.net/weixin_44005175/article/details/89788690

版权

java 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先需要给图片加上一个id和一个初始的width和heigh

<div id="div1">
     <img alt="" id="img" class="img_1" src="${pageContext.request.contextPath }/showPic" width="400px;" height="300px;">
    </div>

之后

<script type="text/javascript">
     $(function(){
             $("#img").click(function(){
                 var width = $(this).width();
                 if(width==400)
                 {
                     $(this).width(700);
                     $(this).height(600);
                 }
                 else
                 {
                     $(this).width(400);
                     $(this).height(300);
                 }
             });
         });
    </script>

如果width为400就会放大，不等于400就会缩小
这就实现了，点击一次图片就放大，再点击一次就缩小