提问
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,极速登录

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

恍1 实名认证 番薯互助团队 互助砖家
发表于 2018-3-13 11:39 | 显示全部楼层 |取消关注该作者的回复
        我记得年前有个同学发过一个这种方案,但是不是很完美,有一些瑕疵。
         这里我发一个通用版本的吧,基于原楼主。有兴趣的同学可以去找下原楼主的帖子。
         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的右键单元格插入图片来代替第二步,缺点就是这种图片是经过处理之后的图片,放大出来可能会不清晰,但是这样效率高,相比与上面的方法会比较的快,大家根据自己的需求自己选择就可以了。
                  kl.gif
tf.cpt (357.65 KB, 下载次数: 9, 售价: 100 个F豆)

评分

参与人数 1F豆 +1 收起 理由
flyingsnake + 1 骚年,我看好你哦

查看全部评分

此帖共有 199 位番薯登录后查看
回复

使用道具 举报

x82905301 实名认证 初出茅庐(Lv3)
发表于 2018-3-14 11:05 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

好望角 实名认证 渐入佳境(Lv2)
发表于 2018-3-15 08:44 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

茉莉  初出茅庐(Lv3)
发表于 2018-3-15 09:17 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

铃兰の舞 社区微信达人 渐入佳境(Lv2)
发表于 2018-3-15 10:34 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

flyingsnake 社区微信达人实名认证 番薯互助团队 文档共创团队 互助叫兽、助理编辑
发表于 2018-3-15 12:58 | 显示全部楼层 |取消关注该作者的回复
升级了.不错不错哦
  • 评论

回复 支持 反对

使用道具 举报

XavierFLY  初学乍练(Lv1)
发表于 2018-3-15 13:43 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

540922194  渐入佳境(Lv2)
发表于 2018-8-10 16:48 | 显示全部楼层 |取消关注该作者的回复
可以写绝对路径吗,因为不是放在项目下的
  • 评论

回复 支持 反对

使用道具 举报

恍1 实名认证 番薯互助团队 互助砖家
发表于 2018-8-14 14:51 | 显示全部楼层 |取消关注该作者的回复
540922194 发表于 2018-8-10 16:48
可以写绝对路径吗,因为不是放在项目下的

应该是可以,前提是你的页面你的服务能够访问你的路径
  • 评论

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册  

本版积分规则

what a fine day
任务进行中

Copyright © 帆软|联系帆软| 联系管理员@兔子酱|免责声明|手机版|帆软社区 ( 苏ICP备14031611号-3 )

GMT+8, 2018-10-20 21:09 , Processed in 0.799684 second(s), 137 queries , Gzip On.

返回顶部 返回列表