今天给大家带来一款图片的缩放插件。该插件适用浏览器：IE9及IE9 +、360、Chrome、Firefox、Safari、Opera。
首先展示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的基础上增加了下载、旋转两个功能，先贴效果图：
demo地址：http://zyk3.ataw.cn/discuz/index.html
再者其实现代码为：
【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);
}
【js代码】--common_extra.js
注：<head></head>中间必须加 var IMGDIR = ‘img/‘, VERHASH = ‘zfhf‘, JSPATH = ‘js/‘;否则无法生成common_extra.js文件，因而导致页面无法正常显示。
在common_extra.js文件中找到menu.innerHTML，并且添加两个a标签，其代码为：
‘<p class="zoom_text"><span class="y">‘ + ‘<a href="javascript:;" onclick="_ACT_imgupload(this);" class="imgdownload" title="下载"></a>‘ + ‘<a id="‘ + menuid + ‘_imglink" class="imglink" target="_blank" title="在新窗口打开"></a><a id="‘ + menuid + ‘_adjust" href="javascipt:;" class="imgadjust" title="实际大小"></a>‘ + ‘<a href="javascript:;" onclick="_ACT_imgroate(this);" class="imgroate" title="旋转"></a>‘ + ‘<a href="javascript:;" onclick="hideMenu()" class="imgclose" 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;
}
}
好了，到这里为止就是全部的实现代码，有没有跃跃一试的感觉呢？体验一下高大上的图片缩放效果。为了能更好地使用这个插件，另外再分享一下在此过程中遇到的几个问题，希望可以帮助到大家。
【常见问题】：
1.图片不能随鼠标滚动而放大缩小
解决方法：上传的图片大小应控制在宽度width ≠ 600px
2.在使用下载和旋转功能按钮时，需载入jquery.js和jquery.rotate.js两个文件
3.载入2上的两个js文件之后，点击图片，无法正常显示，报错信息为"无法获取 obj.getAttribute(‘file‘) "，"Cannot read property‘parentNode‘ of undefined"
解决方法：（1）将common.js文件中的
function $(id) {
return !id ? null : document.getElementById(id);
}
改为
function G_$_D(id) {
return !id ? null : document.getElementById(id);
}
（2）将common_extra.js文件中的"$"改为G_$_D
4.页面中无法自动生成common_extra.js文件
解决方法：在页面中手动引入文件即可
时间： 2024-11-10 07:41:41