我记得年前有个同学发过一个这种方案,但是不是很完美,有一些瑕疵。
这里我发一个通用版本的吧,基于原楼主。有兴趣的同学可以去找下原楼主的帖子。
1.首先在加载结束事件加一个JS
- $("img").mouseover(function(e){
- var img=$(this).attr("src"); //获取鼠标当前所在单元格的row
- $("body").append("<div id='preview'><img src='"+ img +"' /></div>"); //弹出一个div里面放着图片
- $("#preview")//修改这个div的样式,让他居中
- .css("-ms-transform","translate(-50%,-50%)")
- .css("-moz-transform","translate(-50%,-50%)")
- .css("-o-transform","translate(-50%,-50%)")
- .css("transform","translate(-50%,-50%)")
- .css("left","40%")
- .css("top","40%")
- .css("z-index","9999999")
- .css("position","absolute")
- .css("transform","scale(1)")
-
- });
- //鼠标离开这个div移除
- $("img").mouseout(function(e){
- $("#preview").remove();
- });
复制代码
需要改动的地方就是一个.css("transform","scale(3)")。这里的3就是放大倍数。这个放大倍数指的是相对与原图,大家记住。.css("left","50%") .css("top","50%") 这2个是调整弹出放大图片的位置
2.在放图片的单元格加上,注意这里一定不要写在公式里面,直接双击单元格粘贴
- <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
|