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

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

原创最新推荐文章于 2024-08-21 23:57:05 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jsp #图片放大

java 专栏收录该内容

6 篇文章

订阅专栏

博客介绍了实现图片点击放大缩小的方法。先给图片添加id及初始的宽度和高度，然后根据宽度是否为400来判断是放大还是缩小，以此实现点击一次图片放大，再点击一次缩小的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先需要给图片加上一个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就会缩小
这就实现了，点击一次图片就放大，再点击一次就缩小