经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JS实现点击图片放大、关闭效果
来源:cnblogs  作者:下页、再停留  时间:2021/3/1 15:03:24  对本文有异议

实现效果:

点击图片在弹出层显示大图,点击大图或空白区域关闭大图,图片高度宽度根据窗口大小判断

html代码

  1. <td width="350">
  2. <img class="pimg" height="100" width="100" src="http://or7y3wqnj.bkt.clouddn.com/${fhFeed.feedImageId}" />
  3. <img class="pimg" height="100" width="100" src="http://or7y3wqnj.bkt.clouddn.com/${fhFeed.feedImageId2}" />
  4. <img class="pimg" height="100" width="100" src="http://or7y3wqnj.bkt.clouddn.com/${fhFeed.feedImageId3}" />
  5. </td>

Js代码

  1. <script>
  2. $(function(){
  3. $(".pimg").click(function(){
  4. var _this = $(this);//将当前的pimg元素作为_this传入函数
  5. imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
  6. });
  7. });
  8. function imgShow(outerdiv, innerdiv, bigimg, _this){
  9. var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
  10. $(bigimg).attr("src", src);//设置#bigimg元素的src属性
  11. /*获取当前点击图片的真实大小,并显示弹出层及大图*/
  12. $("<img/>").attr("src", src).load(function(){
  13. var windowW = $(window).width();//获取当前窗口宽度
  14. var windowH = $(window).height();//获取当前窗口高度
  15. var realWidth = this.width;//获取图片真实宽度
  16. var realHeight = this.height;//获取图片真实高度
  17. var imgWidth, imgHeight;
  18. var scale = 0.8;//缩放尺寸,当图片真实宽度和高度大于窗口宽度和高度时进行缩放
  19. if(realHeight>windowH*scale) {//判断图片高度
  20. imgHeight = windowH*scale;//如大于窗口高度,图片高度进行缩放
  21. imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
  22. if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
  23. imgWidth = windowW*scale;//再对宽度进行缩放
  24. }
  25. } else if(realWidth>windowW*scale) {//如图片高度合适,判断图片宽度
  26. imgWidth = windowW*scale;//如大于窗口宽度,图片宽度进行缩放
  27. imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
  28. } else {//如果图片真实高度和宽度都符合要求,高宽不变
  29. imgWidth = realWidth;
  30. imgHeight = realHeight;
  31. }
  32. $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放
  33. var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
  34. var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
  35. $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
  36. $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
  37. });
  38. $(outerdiv).click(function(){//再次点击淡出消失弹出层
  39. $(this).fadeOut("fast");
  40. });
  41. }
  42. </script>

 

原文链接:http://www.cnblogs.com/zxf100/p/14463311.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号