鼠标放上去图片放大,通用版

楼主
我是社区第70504位番薯,欢迎点我头像关注我哦~
        我记得年前有个同学发过一个这种方案,但是不是很完美,有一些瑕疵。
         这里我发一个通用版本的吧,基于原楼主。有兴趣的同学可以去找下原楼主的帖子。
         1.首先在加载结束事件加一个JS
  1. $("img").mouseover(function(e){

  2. var img=$(this).attr("src");  //获取鼠标当前所在单元格的row

  3. $("body").append("<div id='preview'><img src='"+ img +"'  /></div>");        //弹出一个div里面放着图片
  4. $("#preview")//修改这个div的样式,让他居中
  5. .css("-ms-transform","translate(-50%,-50%)")
  6. .css("-moz-transform","translate(-50%,-50%)")
  7. .css("-o-transform","translate(-50%,-50%)")
  8. .css("transform","translate(-50%,-50%)")
  9. .css("left","40%")
  10. .css("top","40%")
  11. .css("z-index","9999999")
  12. .css("position","absolute")        
  13. .css("transform","scale(1)")
  14.                                 
  15.     });
  16.     //鼠标离开这个div移除
  17. $("img").mouseout(function(e){
  18.                 $("#preview").remove();
  19.     });        

复制代码

         

            需要改动的地方就是一个.css("transform","scale(3)")。这里的3就是放大倍数。这个放大倍数指的是相对与原图,大家记住。.css("left","50%") .css("top","50%") 这2个是调整弹出放大图片的位置

         2.在放图片的单元格加上,注意这里一定不要写在公式里面,直接双击单元格粘贴
  1. <img id="simon_img" width="auto" height="40px" src="page_demo/翠鸟.png">
复制代码


          注意这里的图片路径是放在webreport目录下的,所以不用写绝对路径。调整height的大小可以调整图片的大小。然后选择用html显示,并且支持gif
           这样就完成了,这种方法的优点就是图片都是读的路径下的图片,不会出现模糊的状况,原图清晰度多少,放大出来清晰度不会太改变,因为都是读出来的原图。缺点就是如果图片多了会稍微的比较占内存。也可以直接用FR的右键单元格插入图片来代替第二步,缺点就是这种图片是经过处理之后的图片,放大出来可能会不清晰,但是这样效率高,相比与上面的方法会比较的快,大家根据自己的需求自己选择就可以了。
                 
tf.cpt (357.65 KB, 下载次数: 53, 售价: 100 个F豆)
编辑于 2018-3-13 11:39  


分享扩散:
参与人数 +1 F豆 +1 理由
flyingsnake + 1 骚年,我看好你哦

查看全部评分

沙发
发表于 2018-3-14 11:05:11
板凳
发表于 2018-3-15 08:44:38
地板
发表于 2018-3-15 09:17:08
5楼
发表于 2018-3-15 10:34:26
6楼
发表于 2018-3-15 12:58:32
升级了.不错不错哦
7楼
发表于 2018-3-15 13:43:16
8楼
发表于 2018-8-10 16:48:32
可以写绝对路径吗,因为不是放在项目下的
9楼
发表于 2018-8-14 14:51:36
540922194 发表于 2018-8-10 16:48
可以写绝对路径吗,因为不是放在项目下的

应该是可以,前提是你的页面你的服务能够访问你的路径
10楼
发表于 2019-6-8 13:57:46
不写在公式上。那我查看其他图片怎么办?图片多了怎么办?
11楼
发表于 2019-6-8 20:09:09
换了自己的图片就不显示,换系统自带图片就显示.什么鬼?
12楼
发表于 2020-12-9 14:30:08
研究院一句话
13楼
发表于 2022-4-19 11:48:45
您好,我想问下您发的  鼠标放上去图片放大,通用版  这个帖子,我按照您发的做了,为什么放大的图片还是单元格里的,很不清楚,不是原图
14楼
发表于 2022-8-24 17:07:40
66666666666
15楼
发表于 2023-5-17 14:41:55
16楼
发表于 2023-10-19 14:02:22
问下大佬FVS里咋实现
17楼
发表于 2023-10-25 15:08:10
为什么我用了这个语句后,上面的格子有效果,下面的格子没效果,但是我如果加js延迟的话,就有效果了,而且能得到图片路径。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

17回帖数 6关注人数 15348浏览人数
最后回复于:2023-10-25 15:08

返回顶部 返回列表