jsp页面实现点击图片放大查看细节

最新推荐文章于 2024-01-25 12:27:20 发布

唐三水

最新推荐文章于 2024-01-25 12:27:20 发布

阅读量1.2w

点赞数 1

分类专栏： javaScripte 文章标签： js

本文链接：https://blog.csdn.net/Yuli_li/article/details/50844695

版权

javaScripte 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

方法一：最简单直接的方式直接放大img标签的长和宽属性：

<html>代码：

<js>代码：

$("#file2img").bind("click",function(){
var width = $(this).width();
   if(width==100)
   {
        $(this).width(300);
        $(this).height(300);
   }
   else
   {
        $(this).width(100);
        $(this).height(100);
   }

});

方法二：用css的方式控制图片鼠标上移图片放大的特殊效果，更加简洁比方法一效果更棒！

图片来源：

<body>
   <tr ><td style="height:12px; padding-top: 0px; width:100px" ><span style="font-size:12px" ><b>税务登记证

       </b></span></td>
         <td style="height:12px; padding-top: 0px; width:100px" >
         <div class="content1">
       <img src="${enter.taxImage}" class="img_1" id="file3img"   width="100px" height="100px" >
       <img src="${enter.taxImage}" class="img_2" >
       </div>

         </td></tr>
</body>

css特效：

<style>

  .content1{position:relative; width:100px;}
    .img_1{display:block;}
   .img_2{width:400px;position:fixed;top:70px;left:210px;display:none;}
   .content1:hover img{display: block;}

此种方法遇到一点小问题，就是鼠标应该滑到小图上就放大，但实际操作中发现还不到小图大图就hover出来了，然后发现是hover的父级元素.content1的width宽度超过了小图片的宽度导致的，然后 width的宽度也设置就好了！！
</style>