怎么实现discuz论坛里图片点击放大图片，可移动等功能

怎么实现discuz论坛里图片点击放大原图，可移动等功能

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <HTML xmlns="http://www.w3.org/1999/xhtml">
    <HEAD>
    <TITLE>DZ6.0&6.1韩风_温馨（粉色风格)</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=gbk">
    <SCRIPT src="files/common.js" type=text/javascript></SCRIPT>
    <SCRIPT src="files/viewthread.js" type=text/javascript></SCRIPT>
    <link href="files/style_1_viewthread.css" rel="stylesheet">
    </HEAD>
    <BODY id=viewthread onkeydown="if(event.keyCode==27) return false;">
    <DIV id=append_parent></DIV>
    <A href="javascript:;"><IMG id=aimg_297876
                onclick="zoom(this, 'http://www.discuz.net/attachments/month_0808/20080817_2899ba5aa435ac3183bdOIyuTapkisPS.jpg')" 
                src="files/20080817_2899ba5aa435ac3183bdOIyuTapkisPS.jpg.thumb.jpg" 
                border=0></A>
    </BODY>
    </HTML>
      

  2.   

    common.js
    var userAgent = navigator.userAgent.toLowerCase();
    var is_opera = userAgent.indexOf('opera') != -1 && opera.version();
    var is_moz = (navigator.product == 'Gecko') && userAgent.substr(userAgent.indexOf('firefox') + 8, 3);
    var is_ie = (userAgent.indexOf('msie') != -1 && !is_opera) && userAgent.substr(userAgent.indexOf('msie') + 5, 3);
    var is_mac = userAgent.indexOf('mac') != -1;if(is_moz && window.HTMLElement) {
    HTMLElement.prototype.__defineSetter__('outerHTML', function(sHTML) {
             var r = this.ownerDocument.createRange();
    r.setStartBefore(this);
    var df = r.createContextualFragment(sHTML);
    this.parentNode.replaceChild(df,this);
    return sHTML;
    }); HTMLElement.prototype.__defineGetter__('outerHTML', function() {
    var attr;
    var attrs = this.attributes;
    var str = '<' + this.tagName.toLowerCase();
    for(var i = 0;i < attrs.length;i++){
    attr = attrs[i];
    if(attr.specified)
    str += ' ' + attr.name + '="' + attr.value + '"';
    }
    if(!this.canHaveChildren) {
    return str + '>';
    }
    return str + '>' + this.innerHTML + '</' + this.tagName.toLowerCase() + '>';
            }); HTMLElement.prototype.__defineGetter__('canHaveChildren', function() {
    switch(this.tagName.toLowerCase()) {
    case 'area':case 'base':case 'basefont':case 'col':case 'frame':case 'hr':case 'img':case 'br':case 'input':case 'isindex':case 'link':case 'meta':case 'param':
    return false;
             }
    return true;
    });
    HTMLElement.prototype.click = function(){
    var evt = this.ownerDocument.createEvent('MouseEvents');
    evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
    this.dispatchEvent(evt);
    }
    }function $(id) {
    return document.getElementById(id);
    }
    function doane(event) {
    e = event ? event : window.event;
    if(is_ie) {
    e.returnValue = false;
    e.cancelBubble = true;
    } else if(e) {
    e.stopPropagation();
    e.preventDefault();
    }
    }function fetchOffset(obj) {
    var left_offset = obj.offsetLeft;
    var top_offset = obj.offsetTop;
    while((obj = obj.offsetParent) != null) {
    left_offset += obj.offsetLeft;
    top_offset += obj.offsetTop;
    }
    return { 'left' : left_offset, 'top' : top_offset };
    }//得到一个定长的hash值， 依赖于 stringxor()
    function hash(string, length) {
    var length = length ? length : 32;
    var start = 0;
    var i = 0;
    var result = '';
    filllen = length - string.length % length;
    for(i = 0; i < filllen; i++){
    string += "0";
    }
    while(start < string.length) {
    result = stringxor(result, string.substr(start, length));
    start += length;
    }
    return result;
    }
      

  3.   

    viewthread.jsvar zoomobj = Array();
    var zoomadjust;var zoomstatus = 1;function zoom(obj, zimg) {
    if(!zoomstatus) {
    window.open(zimg, '', '');
    return;
    }
    if(!zimg) {
    zimg = obj.src;
    }
    if(!$('zoomimglayer_bg')) {
    div = document.createElement('div');
    div.id = 'zoomimglayer_bg';
    div.style.position = 'absolute';
    div.style.left = div.style.top = '0px';
    div.style.zIndex = '998';
    div.style.width = '100%';
    div.style.height = document.body.scrollHeight + 'px';
    div.style.backgroundColor = '#000';
    div.style.display = 'none';
    div.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=50,finishOpacity=100,style=0)';
    div.style.opacity = 0.8;
    $('append_parent').appendChild(div);
    div = document.createElement('div');
    div.id = 'zoomimglayer';
    div.style.position = 'absolute';
    div.style.padding = 0;
    $('append_parent').appendChild(div);
    }
    zoomobj['srcinfo'] = fetchOffset(obj);
    zoomobj['srcobj'] = obj;
    zoomobj['zimg'] = zimg;
    zoomobj['id'] = 'zoom_' + Math.random();
    $('zoomimglayer').setAttribute('pid', obj.getAttribute('pid'));
    $('zoomimglayer').style.display = '';
    $('zoomimglayer').style.left = zoomobj['srcinfo']['left'] + 'px';
    $('zoomimglayer').style.top = zoomobj['srcinfo']['top'] + 'px';
    $('zoomimglayer').style.width = zoomobj['srcobj'].width + 'px';
    $('zoomimglayer').style.height = zoomobj['srcobj'].height + 'px';
    $('zoomimglayer').style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=40)';
    $('zoomimglayer').style.opacity = 0.4;
    $('zoomimglayer').style.zIndex = 999;
    $('zoomimglayer').innerHTML = '<table width="100%" height="100%" cellspacing="0" cellpadding="0"><tr><td align="center" valign="middle"><img src="files/loading.gif"></td></tr></table><div style="position:absolute;top:-100000px;display:none"><img id="' + zoomobj['id'] + '" src="' + zoomobj['zimg'] + '"></div>';
    setTimeout('zoomimgresize($(\'' + zoomobj['id'] + '\'))', 100);
    if(is_ie) {
    doane(event);
    }
    }var zoomdragstart = new Array();
    var zoomclick = 0;
    function zoomdrag(e, op) {
    if(op == 1) {
    zoomclick = 1;
    zoomdragstart = is_ie ? [event.clientX, event.clientY] : [e.clientX, e.clientY];
    zoomdragstart[2] = parseInt($('zoomimglayer').style.left);
    zoomdragstart[3] = parseInt($('zoomimglayer').style.top);
    doane(e);
    } else if(op == 2 && zoomdragstart[0]) {
    zoomclick = 0;
    var zoomdragnow = is_ie ? [event.clientX, event.clientY] : [e.clientX, e.clientY];
    $('zoomimglayer').style.left = (zoomdragstart[2] + zoomdragnow[0] - zoomdragstart[0]) + 'px';
    $('zoomimglayer').style.top = (zoomdragstart[3] + zoomdragnow[1] - zoomdragstart[1]) + 'px';
    doane(e);
    } else if(op == 3) {
    if(zoomclick) zoomclose();
    zoomdragstart = [];
    doane(e);
    }
    }function zoomST(c) {
    if($('zoomimglayer').style.display == '') {
    $('zoomimglayer').style.left = (parseInt($('zoomimglayer').style.left) + zoomobj['x']) + 'px';
    $('zoomimglayer').style.top = (parseInt($('zoomimglayer').style.top) + zoomobj['y']) + 'px';
    $('zoomimglayer').style.width = (parseInt($('zoomimglayer').style.width) + zoomobj['w']) + 'px';
    $('zoomimglayer').style.height = (parseInt($('zoomimglayer').style.height) + zoomobj['h']) + 'px';
    c++;
    if(c <= 5) {
    setTimeout('zoomST(' + c + ')', 1);
    } else {
    $('zoomimglayer').style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=100,style=0)';
    $('zoomimglayer').style.opacity = 1;
    zoomadjust = 1;
    $('zoomimglayer').style.filter = '';
    $('zoomimglayer_bg').style.display = '';
    $('zoomimglayer').innerHTML = '<div class="zoominner"><p><span class="right"><a href="' + zoomobj['zimg'] + '" class="imglink" target="_blank" title="在新窗口打开">在新窗口打开</a><a href="javascipt:;" onclick="zoomimgadjust(event, 1)" class="imgadjust" title="实际大小">实际大小</a><a href="javascript:;" onclick="zoomclose()" class="imgclose" title="关闭">关闭</a></span>鼠标滚轮缩放图片</p><div id="zoomimgbox"><img id="zoomimg" style="cursor: move;" src="' + zoomobj['zimg'] + '" width="' + parseInt($('zoomimglayer').style.width) + '" height="' + parseInt($('zoomimglayer').style.height) + '"></div></div>';
    $('zoomimglayer').style.overflow = 'visible';
    $('zoomimglayer').style.width = (parseInt($('zoomimg').width < 300 ? 300 : parseInt($('zoomimg').width)) + 20) + 'px';
    $('zoomimglayer').style.height = (parseInt($('zoomimg').height) + 20) + 'px';
    if(is_ie){
    $('zoomimglayer').onmousewheel = zoomimgadjust;
    } else {
    $('zoomimglayer').addEventListener("DOMMouseScroll", zoomimgadjust, false);
    }
    $('zoomimgbox').onmousedown = function(event) {try{zoomdrag(event, 1);}catch(e){}};
    $('zoomimgbox').onmousemove = function(event) {try{zoomdrag(event, 2);}catch(e){}};
    $('zoomimgbox').onmouseup = function(event) {try{zoomdrag(event, 3);}catch(e){}};
    }
    }
    }function zoomimgresize(obj) {
    if(!obj.complete) {
    setTimeout('zoomimgresize($(\'' + obj.id + '\'))', 100);
    return;
    }
    obj.parentNode.style.display = '';
    zoomobj['zimginfo'] = [obj.width, obj.height];
    var r = obj.width / obj.height;
    var w = document.body.clientWidth * 0.95;
    w = obj.width > w ? w : obj.width;
    var h = w / r;
    var clientHeight = document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
    var scrollTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;
    if(h > clientHeight) {
    h = clientHeight;
    w = h * r;
    }
    var l = (document.body.clientWidth - w) / 2;
    var t = h < clientHeight ? (clientHeight - h) / 2 : 0;
    t += + scrollTop;
    zoomobj['x'] = (l - zoomobj['srcinfo']['left']) / 5;
    zoomobj['y'] = (t - zoomobj['srcinfo']['top']) / 5;
    zoomobj['w'] = (w - zoomobj['srcobj'].width) / 5;
    zoomobj['h'] = (h - zoomobj['srcobj'].height) / 5;
    $('zoomimglayer').style.filter = '';
    $('zoomimglayer').innerHTML = '';
    setTimeout('zoomST(1)', 5);
    }function zoomimgadjust(e, a) {
    if(!a) {
    if(!e) e = window.event;
    if(e.altKey || e.shiftKey || e.ctrlKey) return;
    var l = parseInt($('zoomimglayer').style.left);
    var t = parseInt($('zoomimglayer').style.top);
    if(e.wheelDelta <= 0 || e.detail > 0) {
    if($('zoomimg').width <= 200 || $('zoomimg').height <= 200) {
    doane(e);return;
    }
    $('zoomimg').width -= zoomobj['zimginfo'][0] / 10;
    $('zoomimg').height -= zoomobj['zimginfo'][1] / 10;
    l += zoomobj['zimginfo'][0] / 20;
    t += zoomobj['zimginfo'][1] / 20;
    } else {
    if($('zoomimg').width >= zoomobj['zimginfo'][0]) {
    zoomimgadjust(e, 1);return;
    }
    $('zoomimg').width += zoomobj['zimginfo'][0] / 10;
    $('zoomimg').height += zoomobj['zimginfo'][1] / 10;
    l -= zoomobj['zimginfo'][0] / 20;
    t -= zoomobj['zimginfo'][1] / 20;
    }
    } else {
    var clientHeight = document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
    var scrollTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;
    $('zoomimg').width = zoomobj['zimginfo'][0];$('zoomimg').height = zoomobj['zimginfo'][1];
    var l = (document.body.clientWidth - $('zoomimg').clientWidth) / 2;l = l > 0 ? l : 0;
    var t = (clientHeight - $('zoomimg').clientHeight) / 2 + scrollTop;t = t > 0 ? t : 0;
    }
    $('zoomimglayer').style.left = l + 'px';
    $('zoomimglayer').style.top = t + 'px';
    $('zoomimglayer_bg').style.height = t + $('zoomimglayer').clientHeight > $('zoomimglayer_bg').clientHeight ? (t + $('zoomimglayer').clientHeight) + 'px' : $('zoomimglayer_bg').style.height;
    $('zoomimglayer').style.width = (parseInt($('zoomimg').width < 300 ? 300 : parseInt($('zoomimg').width)) + 20) + 'px';
    $('zoomimglayer').style.height = (parseInt($('zoomimg').height) + 20) + 'px';
    doane(e);
    }function zoomclose() {
    $('zoomimglayer').innerHTML = '';
    $('zoomimglayer').style.display = 'none';
    $('zoomimglayer_bg').style.display = 'none';
    }style_1_viewthread.css.zoominner {
    PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #fff; PADDING-BOTTOM: 10px; PADDING-TOP: 5px; TEXT-ALIGN: left
    }
    .zoominner P {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 8px; COLOR: #999; PADDING-TOP: 8px
    }
    .zoominner P A {
    BACKGROUND: url(imgzoom_tb.gif) no-repeat 0px 0px; FLOAT: left; MARGIN-LEFT: 10px; OVERFLOW: hidden; WIDTH: 17px; LINE-HEIGHT: 100px; HEIGHT: 17px
    }
    .zoominner P A:hover {
    BACKGROUND-POSITION: 0px -39px
    }
    .zoominner P A.imgadjust {
    BACKGROUND-POSITION: -40px 0px
    }
    .zoominner P A.imgadjust:hover {
    BACKGROUND-POSITION: -40px -39px
    }
    .zoominner P A.imgclose {
    BACKGROUND-POSITION: -80px 0px
    }
    .zoominner P A.imgclose:hover {
    BACKGROUND-POSITION: -80px -39px
    }
    .zoominner #zoomimgbox {
    TEXT-ALIGN: center
    }
    P {
    FONT: 12px/1.6em Verdana,Helvetica,Arial,sans-serif; COLOR: #444;PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
    }
    .right {
    FLOAT: right
    }
      

  4.   

    测试发现图片放大后只有部分背景是黑色的，滚动滚轮背景才全黑。另三个小操作图标能否提供？请高人提供下，谢谢 [email protected]