view.js

浏览器工具qwer3rw34542325

//此JS适用于xxcms图片预览
//此JS来源于Discuz 6.0 论坛，由Hansheng修改，若要使用，请保留此段注释
//附：不知道为什么直接把Discuz的源文件拿来使用，总是会有很多问题
//    只好自己修改代码了，很多代码，看起来很怪的都删了，换了较简单的代码
//    经过半天的大量修改代码和艰难的测试，终于初部搞定，别说，效果还真不赖



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 zoomobj = Array();
var zoomadjust;
var zoomstatus = 1;
var IMGDIR='';

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 };
}

function zoom(obj, zimg, img_dir) {
	if(!zoomstatus) {
		window.open(zimg, '', '');
		return;
	}
	if(!zimg) {
		zimg = obj.src;
	}
	IMGDIR = img_dir;
	if(!$('zoomimglayer_bg')) {
		div = document.createElement('div');div.id = 'zoomimglayer_bg';
		div.style.position = 'absolute';
		div.style.left = div.style.top = '0px';
		div.style.width = '100%';
		div.style.height = document.body.scrollHeight + 'px';
		div.style.backgroundColor = '#333';
		div.style.display = 'none';
		div.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=60,finishOpacity=100,style=0)';
		div.style.opacity = 0.6;
		$('append_parent').appendChild(div);
		div = document.createElement('div');div.id = 'zoomimglayer';
		div.style.position = 'absolute';
		div.className = 'popupmenu_popup';
		div.style.padding = 0;
		div.ondblclick = zoomclose;
		$('append_parent').appendChild(div);
	}
	zoomobj['srcinfo'] = fetchOffset(obj);
	zoomobj['srcobj'] = obj;
	zoomobj['zimg'] = zimg;
	
	$('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,finishOpacity=100,style=0)';
	$('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="' + IMGDIR + '/loading.gif"></td></tr></table><div style="position:absolute;top:-100000px;visibility:hidden"><img onload="zoomimgresize(this)" src="' + zoomobj['zimg'] + '"></div>';
}

function zoomimgresize(obj) {
	zoomobj['zimginfo'] = [obj.width, obj.height];
	zoomobj['w'] = obj.width;
	zoomobj['h'] = obj.height;
	zoomobj['l'] = (document.body.clientWidth/2-zoomobj['w']/2)
	zoomobj['t'] = (document.body.scrollTop+document.body.clientHeight/2-zoomobj['h']/2)
	if (zoomobj['l']<0) zoomobj['l'] = 0
	$('zoomimglayer').style.filter = '';
	$('zoomimglayer').innerHTML = '';
	setTimeout('zoomST()', 5);
}


function zoomST() {
	if($('zoomimglayer').style.display == '') {
		$('zoomimglayer').style.left = zoomobj['l'] +"px";
		$('zoomimglayer').style.top = zoomobj['t'] +"px";
		$('zoomimglayer').style.width = zoomobj['w'] + 'px';
		$('zoomimglayer').style.height = zoomobj['h'] + 'px';
		$('zoomimglayer').style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=40,finishOpacity=100,style=0)';
		$('zoomimglayer').style.opacity = 0.5;
		zoomadjust = 1;
		$('zoomimglayer').style.filter = '';
		$('zoomimglayer_bg').style.display = '';
		$('zoomimglayer').innerHTML = '<table cellspacing="0" cellpadding="2"><tr><td style="text-align: right">鼠标滚轮缩放图片 <a href="' + zoomobj['zimg'] + '" target="_blank"><img src="' + IMGDIR + '/newwindow.gif" border="0" style="vertical-align: middle" title="在新窗口打开" /></a> <a href="javascript:void(0);" onclick="zoomimgadjust2(event)"><img src="' + IMGDIR + '/resize.gif" border="0" style="vertical-align: middle" title="实际大小" /></a> <a href="javascript:void(0);" onclick="zoomclose()"><img style="vertical-align: middle" border=0 src="' + IMGDIR +'/close.gif" title="关闭(双击图片)" /></a>&nbsp;</td></tr><tr><td align="center"><img id="zoomimg" style="cursor: move; margin: 5px;" src="' + zoomobj['zimg'] + '" width="' + $('zoomimglayer').style.width + '" height="' + $('zoomimglayer').style.height + '"></td></tr></table>';
		$('zoomimglayer').style.overflow = 'visible';
		$('zoomimglayer').style.width = $('zoomimglayer').style.height = 'auto';
		if(is_ie){
			$('zoomimglayer').onmousewheel = zoomimgadjust;
		} else {
			$('zoomimglayer').addEventListener("DOMMouseScroll", zoomimgadjust, false);
		}
		$('zoomimglayer').onmousedown = function(event) {try{zoomdrag(event, 1);}catch(e){}};
		$('zoomimglayer').onmousemove = function(event) {try{zoomdrag(event, 2);}catch(e){}};
		$('zoomimglayer').onmouseup = function(event) {try{zoomdrag(event, 3);}catch(e){}};
	}
}

function zoomimgadjust(e, a) {
	if(!a) {
		var l = parseInt($('zoomimglayer').style.left);
		var t = parseInt($('zoomimglayer').style.top);
		if(!e) e = window.event;
		if(e.altKey || e.shiftKey || e.ctrlKey) return;
		if(e.wheelDelta <= 0 || e.detail > 0) {
			if($('zoomimg').width >= zoomobj['zimginfo'][0]*2 || $('zoomimg').width >= document.body.clientWidth*0.8) {
				doane(e);return;
			}
			zoomadjust = 1.1;
			l -= $('zoomimg').clientWidth * 0.1 / 2;
			t -= $('zoomimg').clientHeight * 0.1 / 2;
		} else {
			if($('zoomimg').width <= 200) {
				doane(e);return;
			}
			zoomadjust = 0.9;
			l += $('zoomimg').clientWidth * 0.1 / 2;
			t += $('zoomimg').clientHeight * 0.1 / 2;
		}
		$('zoomimg').width *= zoomadjust;$('zoomimg').height *= zoomadjust;
	} else {
		$('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 = (document.documentElement.clientHeight - $('zoomimg').clientHeight) / 2 + document.documentElement.scrollTop;t = t > 0 ? t : 0;
	}
	$('zoomimglayer').style.left = l + 'px';
	$('zoomimglayer').style.top = t + 'px';
	doane(e);
}

function zoomimgadjust2(e) {
	$('zoomimg').width = zoomobj['w']
	$('zoomimg').height = zoomobj['h']
	$('zoomimglayer').style.left = zoomobj['l'] +"px";
	$('zoomimglayer').style.top = zoomobj['t'] +"px";
	doane(e);
}


var zoomdragstart = new Array();
function zoomdrag(e, op) {
	if(op == 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]) {
		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) {
		zoomdragstart = [];
		doane(e);
	}
}

function zoomclose() {
	$('zoomimglayer').innerHTML = '';
	$('zoomimglayer').style.display = 'none';
	$('zoomimglayer_bg').style.display = 'none';
}