Discuz！图片查看插件（支持鼠标缩放、实际大小、旋转、下载） |
您所在的位置：网站首页 › 延时器原理图解说明图片 › Discuz！图片查看插件（支持鼠标缩放、实际大小、旋转、下载） |
Discuz！图片查看插件（支持鼠标缩放、实际大小、旋转、下载）
|
Discuz！图片查看插件（支持鼠标缩放、实际大小、旋转、下载） 图片查看是网站中的常用功能，用于展示详细的图片。在discuz图片插件的基础上进行了改造，因此这篇文章主要从以下几个方面来讨论图片查看插件。希望可以帮助到大家，有不对的地方也欢迎大家给以正确的指导。 （1）discuz的实现过程及效果 （2）discuz的局限性 （3）discuz的改进步骤 （4）兼容性及最后效果 （5）总结（常见问题） demo示例：http://zyk3.ataw.cn/discuz/index.html 一、discuz的实现过程及效果 点击图片，弹出层有大图，同时有在新窗口打开、显示实际大小、关闭按钮。 效果图如下：
实现代码为： 【html代码】 DOCTYPE html> diszuc点击图片放大、拖动、鼠标滚动缩放 var IMGDIR = 'img/', VERHASH = 'zfhf', JSPATH = 'js/'; //全局设置，必不可少，否则无法正常使用 //可自行在网上下载 zoomstatus = parseInt(1); var imagemaxwidth = '500'; var aimgcount = new Array(); aimgcount[1000] = ['156139','156140','156141']; attachimggroup(1000); attachimgshow(1000); var aimgfid = 0;【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 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。 最终效果图：
五、总结 好了，以上就是全部的实现代码，有没有跃跃一试的感觉呢？立马体验一下高大上的图片缩放效果。为了能更好地使用这个插件，另外再分享一下在此过程中遇到的几个问题，希望可以帮助到大家。
【常见问题】 （1）图片不能随鼠标滚动而放大缩小 解决方法：上传的图片大小应控制在宽度width ≠ 600px （2）在使用下载和旋转功能按钮时，需载入jquery.js和jquery.rotate.js两个文件 （3）载入2上的两个js文件之后，点击图片，无法正常显示，报错信息为"无法获取 obj.getAttribute('file') "，"Cannot read property'parentNode' of undefined" 解决办法： a.将common.js文件中的 function $(id) { return !id ? null : document.getElementById(id); }改为 function G_$_D(id) { return !id ? null : document.getElementById(id); }b.将common_extra.js文件中的"$"改为G_$_D （4）中间必须加 var IMGDIR = 'img/', VERHASH = 'zfhf', JSPATH = 'js/';否则无法生成common_extra.js文件，因而导致页面无法正常显示。如果不想添加这段代码，也可以手动引入common_extra.js |
【本文地址】