你的位置:首页 > Java教程

[Java教程]Discuz升级!图片查看插件(支持鼠标缩放、实际大小、旋转、下载)

  图片查看是网站中的常用功能,用于展示详细的图片。在discuz图片插件的基础上进行了改造,因此这篇文章主要从以下几个方面来讨论图片查看插件。希望可以帮助到大家,有不对的地方也欢迎大家给以正确的指导。

  • discuz的实现过程及效果

  • discuz的局限性

  • discuz的改进步骤

  • 兼容性及最后效果

  • 总结(常见问题)

 demo示例:http://zyk3.ataw.cn/discuz/index.html

一、discuz的实现过程及效果

点击图片,弹出层有大图,同时有在新窗口打开、显示实际大小、关闭按钮。

效果图如下:

实现代码为:

【html代码】

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>diszuc点击图片放大、拖动、鼠标滚动缩放</title> <meta name="keywords" content="diszuc点击图片放大、拖动、鼠标滚动缩放" /> <meta name="description" content="diszuc点击图片放大、拖动、鼠标滚动缩放" /> <link rel="stylesheet" type="text/css" href="img/style_1_forum_viewthread.css" /> <script type="text/javascript">  var IMGDIR = 'img/', VERHASH = 'zfhf', JSPATH = 'js/'; //全局设置,必不可少,否则无法正常使用 </script>  <script src="js/common.js" type="text/javascript"></script> //可自行在网上下载</head><body><div id="append_parent"></div><div id="ajaxwaitid"></div><img id="aimg_156139" aid="156139" src="img/none.gif" zoomfile="uploadfiles/100306znrbsxfzuclbplu6.jpg" file="uploadfiles/100306znrbsxfzuclbplu6.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="400" alt="我是一朵花" title="我是一朵花" /><script src="js/forum_viewthread.js" type="text/javascript"></script><script type="text/javascript"> zoomstatus = parseInt(1); var imagemaxwidth = '500'; var aimgcount = new Array();</script><script type="text/javascript" reload="1"> aimgcount[1000] = ['156139','156140','156141']; attachimggroup(1000); attachimgshow(1000); var aimgfid = 0;</script></body></html>

【css代码】-- style_1_forum_viewthread.css

*{word-wrap:break-word;}body,input,button,select,textarea{font:12px/1.5 Tahoma,'Microsoft Yahei','Simsun';color:#444;}.z{float:left;}.y{float:right;}.hm{text-align:center;}  .zoom{cursor:pointer;}.zoominner{ padding:5px 10px 10px; background:#FFF; text-align:left;}.zoominner p{padding:8px 0;}.zoominner p a{ float:left; margin-left:10px; width:17px; height:17px; background:url(imgzoom_tb.gif) no-repeat 0 0; line-height:100px; overflow:hidden;}.zoominner p a:hover{background-position:0 -39px;}.zoominner p a.imgadjust{background-position:-40px 0;}.zoominner p a.imgadjust:hover{background-position:-40px -39px;}.zoominner p a.imgclose{background-position:-80px 0;}.zoominner p a.imgclose:hover{background-position:-80px -39px;}.zimg_c{position:relative;}.zimg_prev,.zimg_next{ display:block; position:absolute; width:80px; height:100%; background:url(pic-prev.png) no-repeat 0 -100px; cursor:pointer;}.zimg_next{ right:10px; background-image:url(pic-next.png); background-position:100% -100px;}.zimg_c img{margin:0 auto;}.zimg_p strong{display:none;}

【js代码】-- forum_viewthread.js

/*  [Discuz!] (C)2001-2099 Comsenz Inc.  This is NOT a freeware, use is subject to license terms  $Id: forum_viewthread.js 28794 2012-03-13 05:39:46Z zhangguosheng $*/var replyreload = '', attachimgST = new Array(), zoomgroup = new Array(), zoomgroupinit = new Array();function attachimggroup(pid) {  if(!zoomgroupinit[pid]) {    for(i = 0;i < aimgcount[pid].length;i++) {      zoomgroup['aimg_' + aimgcount[pid][i]] = pid;    }    zoomgroupinit[pid] = true;  }}function attachimgshow(pid, onlyinpost) {  onlyinpost = !onlyinpost ? false : onlyinpost;  aimgs = aimgcount[pid];  aimgcomplete = 0;  loadingcount = 0;  for(i = 0;i < aimgs.length;i++) {    obj = $('aimg_' + aimgs[i]);    if(!obj) {      aimgcomplete++;      continue;    }    if(onlyinpost && obj.getAttribute('inpost') || !onlyinpost) {      if(!obj.status) {        obj.status = 1;        if(obj.getAttribute('file')) obj.src = obj.getAttribute('file');        loadingcount++;      } else if(obj.status == 1) {        if(obj.complete) {          obj.status = 2;        } else {          loadingcount++;        }      } else if(obj.status == 2) {        aimgcomplete++;        if(obj.getAttribute('thumbImg')) {          thumbImg(obj);        }      }      if(loadingcount >= 10) {        break;      }    }  }  if(aimgcomplete < aimgs.length) {    setTimeout(function () {      attachimgshow(pid, onlyinpost);    }, 100);  }}

到这里为止,只要以上代码,就可以轻松实现图片随鼠标滚动而自由缩放大小了,是不是很简单呢?

二、discuz的局限性

      虽然discuz插件已经基本满足前端技术人员的需求,但在实际项目应用中还存在着一定局限性。比如用的比较多的下载、旋转图片的功能。因此,小菜升级了discuz,新增了下载、旋转图片功能。

三、discuz的改进

想要升级discuz,其实很简单。只要在common_extra.js文件中找到找到menu.innerHTML,并且添加两个a标签,分别设置下载和旋转即可。以下是需要修改的文件及代码:

【js】--common_extra.js

<p ><span ><a href="javascript:;" onclick="_ACT_imgupload(this);" title="下载"></a><a id="' + menuid + '_imglink" target="_blank" title="新窗口打开"</a><a id="' + menuid + '_adjust" href="javascipt:;" title="实际大小"></a>' +'<a href="javascript:;" onclick="_ACT_imgroate(this);" title="旋转"></a><a href="javascript:;" onclick="hideMenu()" title="关闭"</a></span></p>

这样就成功添加了下载和旋转按钮。当然要想实现功能,还要另外写事件。其中_ACT_imgupload方法为

window._ACT_imgupload = function (dom) {            var _$dom = $(dom);            var _$pic = _$dom.parent().parent().parent().find("#imgzoom_zoom");            if (_$pic.length > 0) {              window.open(_$pic.attr("src"));            }          }

_ACT_imgroate方法为

window._ACT_imgroate = function (dom) {           var _$dom = $(dom);           var _$pic = _$dom.parent().parent().parent().find("#imgzoom_zoom");           if (_$pic.length > 0) {               var _ra = _$pic.data("raval");               if (!_ra) _ra = 0;               if (_$pic.attr("isleft") != "0") {                 _$pic.css('rotate', _ra + 90);                 _$pic.data("raval", _ra + 90);               }               else {                 _$pic.css('rotate', _ra - 90);                 _$pic.data("raval", _ra - 90);               }               return false;           }         }

【css】-- style_1_forum_viewthread.css

.zoom_text { position: fixed; bottom: 0; left: 50%; margin-left: -130px; height: 50px; line-height: 60px; padding: 0 50px; background: rgba(0,0,0,.5); border-top-left-radius: 6px; border-top-right-radius: 6px;}.zoom_text span { display: block; width: 100%; text-align: center;}.zoom_text a { display: inline-block; margin-left: 10px; width: 22px; height: 22px; line-height: 100px; overflow: hidden;}.zoom_text a.imglink { background: url(imglink.png);}.zoom_text a.imgdownload { background: url(imgdownload.png);}.zoom_text a.imgadjust { background: url(imgadjust.png);}.imgroate { display: inline-block; width: 17px; height: 17px; margin-left: 10px; background: url(imgroate.png) !important;}.zoom_text a.imgclose { background: url(imgclose.png);}

四、兼容性及最后效果

兼容性:

经测试,该插件适用浏览器:IE9及IE9 +、360、Chrome、Firefox、Safari、Opera。

最终效果图:

五、总结

   好了,以上就是全部的实现代码,有没有跃跃一试的感觉呢?立马体验一下高大上的图片缩放效果。为了能更好地使用这个插件,另外再分享一下在此过程中遇到的几个问题,希望可以帮助到大家。

 

【常见问题】

  • 图片不能随鼠标滚动而放大缩小

    解决方法:上传的图片大小应控制在宽度width ≠ 600px

  • 在使用下载和旋转功能按钮时,需载入jquery.js和jquery.rotate.js两个文件

  • 载入2上的两个js文件之后,点击图片,无法正常显示,报错信息为"无法获取 obj.getAttribute('file') ","Cannot read property'parentNode' of undefined"

     解决办法:

    • 将common.js文件中的

      function $(id) {  return !id ? null : document.getElementById(id);} 

        改为

      function G_$_D(id) {  return !id ? null : document.getElementById(id);}

    • 将common_extra.js文件中的"$"改为G_$_D

  • <head></head>中间必须加  var IMGDIR = 'img/', VERHASH = 'zfhf', JSPATH = 'js/';否则无法生成common_extra.js文件,因而导致页面无法正常显示。如果不想添加这段代码,也可以手动引入common_extra.js