提问
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,极速登录

鼠标悬浮 图片放大

剧终 社区微信达人实名认证 番薯互助团队 互助砖家
发表于 2018-1-23 16:52 | 显示全部楼层 |取消关注该作者的回复
前段日子看到一位番薯在论坛提问,说一个表格中有图片,能不能做到鼠标悬浮上去然后图片放大。
我给他回答是写js来实现,但是一直没有理我     o(╥﹏╥)o
刚刚做了一个例子
sl.gif
应该可以满足这个番薯的需求。


步骤1:
准备一个表格,然后选一列放图片,比如我这里C列放了图片,然后D列放要放大的图片的路径,相对路径就行。
截图201801231648597358.png
步骤2:
在web属性中选择填报页面,我比较喜欢在填报页面做所以我就选填报,不爽咬我啊~~~
然后添加加载结束事件
  1. $(".x-table td").mouseover(function(e){
  2. var col=Number($(this).attr("col"))+1;  //获取鼠标当前所在单元格的col
  3. var row=$(this).attr("row");  //获取鼠标当前所在单元格的row
  4. var img=contentPane.curLGP.getCellValue(col,row);  //获取到隐藏的图片地址
  5. $("body").append("<div id='preview'><img src='"+ img +"'  /></div>");        //弹出一个div里面放着图片
  6. $("#preview")//修改这个div的样式,让他居中
  7. .css("-ms-transform","translate(-50%,-50%)")
  8. .css("-moz-transform","translate(-50%,-50%)")
  9. .css("-o-transform","translate(-50%,-50%)")
  10. .css("transform","translate(-50%,-50%)")
  11. .css("left","50%")
  12. .css("top","50%")
  13. .css("z-index","9999999")
  14. .css("position","absolute")                               
  15.     });
  16.     //鼠标离开这个div移除
  17. $(".x-table td").mouseout(function(e){
  18.                 $("#preview").remove();
  19.     });       

复制代码
然后点击确定。

搞定 溜了溜了溜了。。。。。




图片.cpt

129.74 KB, 下载次数: 45

评分

参与人数 3F豆 +367 收起 理由
李复勇 + 1 老太太摔倒了我都不扶,就服你
兔子酱 + 300 太棒了,给你32个赞,么么哒
shalor + 66 太棒了,给你32个赞,么么哒

查看全部评分

此帖共有 154 位番薯登录后查看

已有1人关注本帖

agentHugo
回复

使用道具 举报

gxy120313 社区微信达人番薯互助团队 互助叫兽、助理编辑
发表于 2018-1-23 17:06 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

星痕 社区微信达人番薯互助团队 文档共创团队 互助叫兽、助理编辑、VIP1
发表于 2018-1-23 17:07 | 显示全部楼层 |取消关注该作者的回复
已提名精华帖,待论坛运营委员会评分后可评为精华帖,帆软论坛精华帖奖励计划http://bbs.fanruan.com/thread-91079-1-1.html
  • 评论

回复 支持 反对

使用道具 举报

laobiah 社区微信达人 渐入佳境(Lv2)
发表于 2018-1-24 08:37 | 显示全部楼层 |取消关注该作者的回复
666666
  • 评论

回复 支持 反对

使用道具 举报

恍1 实名认证 番薯互助团队 互助砖家
发表于 2018-1-24 10:58 | 显示全部楼层 |取消关注该作者的回复
楼主,你可以优化一下,你D列的src可以取前面img标签的src,这样用途就广泛多了,你这样局限性有点大。而且还比较麻烦,地址要一个个的写
  收起(4)
  • 1176846029 1176846029 : 因为是两个图片,一个是大图一个是小图所以就这样写了,因为如果图片直接放大 分辨率就不一样了。
    而且 如果知道了这个思路,就可以随便换要弹出的内容了
    2018-01-24 11:10 评论
  • 恍1 恍1 : 你这样说也有道理,其实你这个严格来说不叫放大,是原图缩小了,你放大图是本身,而且你还有个问题,你的对象不应该取td,不然你随便放到一个单元格都会弹出那个div,而且如果是那种图片较多的公网服务器,应该会比较卡,不过还是看取舍吧
    2018-01-24 11:23 评论
  • 恍1 恍1 : 回复 1176846029 :其实你加图片的时候完全可以用img来加,建议你修改下吧,不然你这个实用性有点低,评精华的话有点点牵强啊
    2018-01-24 12:50 评论
  • 1176846029 1176846029 : 回复 恍1 :恩恩  选整个TD 是偷偷懒·· 方便实现功能 弄的。这个可以优化一下  浮动到图片就行了   然后那个连接  你刚刚说的 我想了一下  也对  我可以直接获取到图片的链接就行了 因为本来这个图片就是缩小了的,我只是显示了原来的图。这样就不用弄两中不同分辨率的图片了
    2018-01-24 12:59 评论
  • 评论

回复 支持 反对

使用道具 举报

葛智 实名认证 番薯互助团队 文档共创团队 浪迹天涯(Lv4)
发表于 2018-3-29 13:12 | 显示全部楼层 |取消关注该作者的回复
6666666666666666666666666
  • 评论

回复 支持 反对

使用道具 举报

异体 社区微信达人实名认证 渐入佳境(Lv2)
发表于 2018-4-3 13:16 | 显示全部楼层 |取消关注该作者的回复
好耶~
  • 评论

回复 支持 反对

使用道具 举报

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

本版积分规则

what a fine day
任务进行中

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

GMT+8, 2018-10-17 13:40 , Processed in 0.490377 second(s), 120 queries , Gzip On.

返回顶部 返回列表