【原创】ImageZoom 图片放大效果 [复制链接]

cloudgamer　楼主

天空里的一片云

荣誉管理 

帖子: 4223
体力: 15687
威望: 15
居住地: 广东省佛山市

发表于 2010-4-1 03:30:55 |显示全部楼层

这个效果也叫放大镜效果，最早好像在ppg出现的，之后就有了很多仿制品出来了。
一般用于放大查看商品图片，在凡客，京东商城，阿里巴巴等都有类似的效果。
好处是能在原图附近对图片进行局部放大查看，而且可以通过鼠标控制查看的部位。
这个程序有以下特点：
1，支持使用原图放大或新图片设置大图；
2，大图完成载入前使用原图放大代替，减少操作等待时间；
3，支持鼠标滚动缩放大图；
4，可以通过设置显示范围或显示框大小设置显示尺寸；
5，可以设置是否自动隐藏显示框；
6，支持插件形式的扩展来实现更多的功能（下一篇再详细介绍）。
兼容：ie6/7/8, firefox 3.6.2, opera 10.51, safari 4.0.4, chrome 4.1

前台效果预览

完整实例下载

效果预览

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ImageZoom 图片放大效果</title>
<script>eval(function(p,a,c,k,e,r){e=function(c){return(c<62?'':e(parseInt(c/62)))+((c=c%62)>35?String.fromCharCode(c+29):c.toString(36))};if('0'.replace(0,e)==0){while(c--)r[e(c)]=k[c];k=[function(e){return r[e]||e}];e=function(){return'([3-59cf-hj-mo-rt-yCG-NP-RT-Z]|[12]\\w)'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('5 $$,$$B,$$A,$$F,$$D,$$E,$$S;(3(){5 O,B,A,F,D,E,S;O=3(id){4"1R"==1y id?G.getElementById(id):id};O.emptyFunction=3(){};O.extend=3(H,Z){I(5 N P Z){H[N]=Z[N]}4 H};O.deepextend=3(H,Z){I(5 N P Z){5 17=Z[N];9(H===17)continue;9(1y 17==="c"){H[N]=C.callee(H[N]||{},17)}J{H[N]=17}}4 H};O.wrapper=3(me,1T){5 1z=3(){me.Q(11,C)};5 1A=3(){};1A.18=1T.18;1z.18=new 1A;4 1z};B=(3(K){5 b={12:/12/.x(K)&&!/1B/.x(K),1B:/1B/.x(K),1U:/webkit/.x(K)&&!/1C/.x(K),1V:/1V/.x(K),1C:/1C/.x(K)};5 1j="";I(5 i P b){9(b[i]){1j="1U"==i?"19":i;1D}}b.19=1j&&1E("(?:"+1j+")[\\\\/: ]([\\\\d.]+)").x(K)?1E.$1:"0";b.ie=b.12;b.1W=b.12&&1G(b.19,10)==6;b.ie7=b.12&&1G(b.19,10)==7;b.1X=b.12&&1G(b.19,10)==8;4 b})(1H.navigator.userAgent.toLowerCase());A=3(){5 k={isArray:3(1Y){4 Object.18.toString.1k(1Y)==="[c 1Z]"},1l:3(v,R,f){9(v.1l){4 1m(f)?v.1l(R):v.1l(R,f)}J{5 L=v.1a;f=1m(f)?0:f<0?1n.20(f)+L:1n.21(f);I(;f<L;f++){9(v[f]===R)4 f}4-1}},1o:3(v,R,f){9(v.1o){4 1m(f)?v.1o(R):v.1o(R,f)}J{5 L=v.1a;f=1m(f)||f>=L-1?L-1:f<0?1n.20(f)+L:1n.21(f);I(;f>-1;f--){9(v[f]===R)4 f}4-1}}};3 X(c,r){9(undefined===c.1a){I(5 j P c){9(w===r(c[j],j,c))1D}}J{I(5 i=0,L=c.1a;i<L;i++){9(i P c){9(w===r(c[i],i,c))1D}}}};X({22:3(c,r,q){X(c,3(){r.Q(q,C)})},map:3(c,r,q){5 k=[];X(c,3(){k.23(r.Q(q,C))});4 k},1p:3(c,r,q){5 k=[];X(c,3(24){r.Q(q,C)&&k.23(24)});4 k},every:3(c,r,q){5 k=1b;X(c,3(){9(!r.Q(q,C)){k=w;4 w}});4 k},some:3(c,r,q){5 k=w;X(c,3(){9(r.Q(q,C)){k=1b;4 w}});4 k}},3(25,j){k[j]=3(c,r,q){9(c[j]){4 c[j](r,q)}J{4 25(c,r,q)}}});4 k}();F=(3(){5 1c=1Z.18.1c;4{bind:3(1q,q){5 1r=1c.1k(C,2);4 3(){4 1q.Q(q,1r.26(1c.1k(C)))}},bindAsEventListener:3(1q,q){5 1r=1c.1k(C,2);4 3(g){4 1q.Q(q,[E.1d(g)].26(1r))}}}})();D={1s:3(m){5 13=m?m.27:G;4 13.28.29||13.2a.29},1t:3(m){5 13=m?m.27:G;4 13.28.2b||13.2a.2b},2c:G.1e?3(a,b){4!!(a.compareDocumentPosition(b)&16)}:3(a,b){4 a!=b&&a.2c(b)},u:3(m){5 o=0,M=0,T=0,U=0;9(!m.2d||B.1X){5 n=m;while(n){o+=n.offsetLeft,M+=n.offsetTop;n=n.offsetParent};T=o+m.offsetWidth;U=M+m.offsetHeight}J{5 u=m.2d();o=T=D.1t(m);M=U=D.1s(m);o+=u.o;T+=u.T;M+=u.M;U+=u.U};4{"o":o,"M":M,"T":T,"U":U}},clientRect:3(m){5 u=D.u(m),1I=D.1t(m),1J=D.1s(m);u.o-=1I;u.T-=1I;u.M-=1J;u.U-=1J;4 u},curStyle:G.1e?3(p){4 G.1e.2e(p,2f)}:3(p){4 p.1u},getStyle:G.1e?3(p,j){5 h=G.1e.2e(p,2f);4 j P h?h[j]:h.getPropertyValue(j)}:3(p,j){5 h=p.1u;9(j=="Y"){9(/1K\$Y=(.*)\$/i.x(h.1p)){5 Y=parseFloat(1E.$1);4 Y?Y/2g:0}4 1};9(j=="2h"){j="2i"}5 k=h[j]||h[S.1L(j)];9(!/^\\-?\\d+(px)?$/i.x(k)&&/^\\-?\\d/.x(k)){h=p.h,o=h.o,2k=p.1M.o;p.1M.o=p.1u.o;h.o=k||0;k=h.pixelLeft+"px";h.o=o;p.1M.o=2k}4 k},setStyle:3(1f,h,14){9(!1f.1a){1f=[1f]}9(1y h=="1R"){5 s=h;h={};h[s]=14}A.22(1f,3(p){I(5 j P h){5 14=h[j];9(j=="Y"&&B.ie){p.h.1p=(p.1u.1p||"").2l(/1K\$[^)]*\$/,"")+"1K(Y="+14*2g+")"}J 9(j=="2h"){p.h[B.ie?"2i":"cssFloat"]=14}J{p.h[S.1L(j)]=14}}})}};E=(3(){5 1g,1h,15=1;9(1H.2m){1g=3(t,l,y){t.2m(l,y,w)};1h=3(t,l,y){t.removeEventListener(l,y,w)}}J{1g=3(t,l,y){9(l==="2n")l="2o";9(!y.$$15)y.$$15=15++;9(!t.V)t.V={};5 W=t.V[l];9(!W){W=t.V[l]={};9(t["on"+l]){W[0]=t["on"+l]}}W[y.$$15]=y;t["on"+l]=1v};1h=3(t,l,y){9(l==="2n")l="2o";9(t.V&&t.V[l]){delete t.V[l][y.$$15]}};3 1v(){5 1w=1b,g=1d();5 W=11.V[g.l];I(5 i P W){11.$$1v=W[i];9(11.$$1v(g)===w){1w=w}}4 1w}}3 1d(g){9(g)4 g;g=1H.g;g.pageX=g.clientX+D.1t(g.1O);g.pageY=g.clientY+D.1s(g.1O);g.target=g.1O;g.1P=1P;g.1Q=1Q;5 1x={"mouseout":g.toElement,"mouseover":g.fromElement}[g.l];9(1x){g.1x=1x}4 g};3 1P(){11.cancelBubble=1b};3 1Q(){11.1w=w};4{"1g":1g,"1h":1h,"1d":1d}})();S={1L:3(s){4 s.2l(/-([a-z])/ig,3(all,2p){4 2p.toUpperCase()})}};9(B.1W){try{G.execCommand("BackgroundImageCache",w,1b)}catch(e){}};$$=O;$$B=B;$$A=A;$$F=F;$$D=D;$$E=E;$$S=S})();',[],150,'|||function|return|var||||if|||object|||from|event|style||name|ret|type|node||left|elem|thisp|callback||element|rect|array|false|test|handler||||arguments||||document|destination|for|else|ua|len|top|property||in|apply|elt||right|bottom|events|handlers|each|opacity|source||this|msie|doc|value|guid||copy|prototype|version|length|true|slice|fixEvent|defaultView|elems|addEvent|removeEvent||vMark|call|indexOf|isNaN|Math|lastIndexOf|filter|fun|args|getScrollTop|getScrollLeft|currentStyle|handleEvent|returnValue|relatedTarget|typeof|ins|subclass|opera|chrome|break|RegExp||parseInt|window|sLeft|sTop|alpha|camelize|runtimeStyle||srcElement|stopPropagation|preventDefault|string||parent|safari|firefox|ie6|ie8|obj|Array|ceil|floor|forEach|push|item|method|concat|ownerDocument|documentElement|scrollTop|body|scrollLeft|contains|getBoundingClientRect|getComputedStyle|null|100|float|styleFloat||rsLeft|replace|addEventListener|DOMMouseScroll|mousewheel|letter'.split('|'),0,{}))</script>
<script>

var ImageZoom = function(image, viewer, options) {
	this._initialize( image, viewer, options );
	this._initMode( this.options.mode );
	this._oninit();
	this._initLoad();
};

ImageZoom.prototype = {
  //初始化程序
  _initialize: function(image, viewer, options) {
	this._image = $$(image);//原图
	this._zoom = document.createElement("img");//显示图
	this._viewer = $$(viewer);//显示框
	this._viewerWidth = 0;//显示框宽
	this._viewerHeight = 0;//显示框高
	this._preload = new Image();//预载对象
	this._rect = null;//原图坐标
	this._repairLeft = 0;//显示图x坐标修正
	this._repairTop = 0;//显示图y坐标修正
	this._rangeWidth = 0;//显示范围宽度
	this._rangeHeight = 0;//显示范围高度
	this._timer = null;//计时器
	this._loaded = false;//是否加载
	this._substitute = false;//是否替换
	
	var opt = this._setOptions(options);
	
	this._scale = opt.scale;
	this._max = opt.max;
	this._min = opt.min;
	this._originPic = opt.originPic;
	this._zoomPic = opt.zoomPic;
	this._rangeWidth = opt.rangeWidth;
	this._rangeHeight = opt.rangeHeight;
	
	this.delay = opt.delay;
	this.autoHide = opt.autoHide;
	this.mouse = opt.mouse;
	this.rate = opt.rate;
	
	this.onLoad = opt.onLoad;
	this.onStart = opt.onStart;
	this.onMove = opt.onMove;
	this.onEnd = opt.onEnd;
	
	var oThis = this, END = function(){ oThis._end(); };
	this._END = function(){ oThis._timer = setTimeout( END, oThis.delay ); };
	this._START = $$F.bindAsEventListener( this._start, this );
	this._MOVE = $$F.bindAsEventListener( this._move, this );
	this._MOUSE = $$F.bindAsEventListener( this._mouse, this );
	this._OUT = $$F.bindAsEventListener( function(e){
			if ( !e.relatedTarget ) this._END();
		}, this );
  },
  //设置默认属性
  _setOptions: function(options) {
    this.options = {//默认值
		mode:		"simple",//模式
		scale:		0,//比例(大图/原图)
		max:		10,//最大比例
		min:		1.5,//最小比例
		originPic:	"",//原图地址
		zoomPic:	"",//大图地址
		rangeWidth:	0,//显示范围宽度
		rangeHeight:0,//显示范围高度
		delay:		20,//延迟结束时间
		autoHide:	true,//是否自动隐藏
		mouse:		false,//鼠标缩放
		rate:		.2,//鼠标缩放比率
		onLoad:		$$.emptyFunction,//加载完成时执行
		onStart:	$$.emptyFunction,//开始放大时执行
		onMove:		$$.emptyFunction,//放大移动时执行
		onEnd:		$$.emptyFunction//放大结束时执行
    };
    return $$.extend(this.options, options || {});
  },
  //根据模式初始化函数属性
  _initMode: function(mode) {
	mode = $$.extend({
		options:{},
		init:	$$.emptyFunction,
		load:	$$.emptyFunction,
		start:	$$.emptyFunction,
		end:	$$.emptyFunction,
		move:	$$.emptyFunction,
		dispose:$$.emptyFunction
    }, (ImageZoom._MODE || {})[ mode.toLowerCase() ] || {} );
	
	this.options = $$.extend( mode.options, this.options );
	this._oninit = mode.init;
	this._onload = mode.load;
	this._onstart = mode.start;
	this._onend = mode.end;
	this._onmove = mode.move;
	this._ondispose = mode.dispose;
  },
  //初始化加载
  _initLoad: function() {
	var image = this._image, originPic = this._originPic,
		useOrigin = !this._zoomPic && this._scale,
		loadImage = $$F.bind( useOrigin ? this._loadOriginImage : this._loadImage, this );
	//设置自动隐藏
	if ( this.autoHide ) { this._viewer.style.display = "none"; }
	//先加载原图
	if ( originPic && originPic != image.src ) {//使用自定义地址
		image.onload = loadImage;
		image.src = originPic;
	} else if ( image.src ) {//使用元素地址
		if ( !image.complete ) {//未载入完
			image.onload = loadImage;
		} else {//已经载入
			loadImage();
		}
	} else {
		return;//没有原图地址
	}
	//加载大图
	if ( !useOrigin ) {
		var preload = this._preload, zoomPic = this._zoomPic || image.src,
			loadPreload = $$F.bind( this._loadPreload, this );
		if ( zoomPic != preload.src ) {//新地址重新加载
			preload.onload = loadPreload;
			preload.src = zoomPic;
		} else {//正在加载
			if ( !preload.complete ) {//未载入完
				preload.onload = loadPreload;
			} else {//已经载入
				this._loadPreload();
			}
		}
	}
  },
  //原图放大加载程序
  _loadOriginImage: function() {
	this._image.onload = null;
	this._zoom.src = this._image.src;
	this._initLoaded();
  },
  //原图加载程序
  _loadImage: function() {
	this._image.onload = null;
	if ( this._loaded ) {//大图已经加载
		this._initLoaded();
	} else {
		this._loaded = true;
		if ( this._scale ) {//有自定义比例才用原图放大替换大图
			this._substitute = true;
			this._zoom.src = this._image.src;
			this._initLoaded();
		}
	}
  },
  //大图预载程序
  _loadPreload: function() {
	this._preload.onload = null;
	this._zoom.src = this._preload.src;
	if ( this._loaded ) {//原图已经加载
		//没有使用替换
		if ( !this._substitute ) { this._initLoaded(); }
	} else {
		this._loaded = true;
	}
  },
  //初始化加载设置
  _initLoaded: function(src) {
	//初始化显示图
	this._initSize();
	//初始化显示框
	this._initViewer();
	//初始化数据
	this._initData();
	//开始执行
	this._onload();
	this.onLoad();
	this.start();
  },
  //初始化显示图尺寸
  _initSize: function() {
	var zoom = this._zoom, image = this._image, scale = this._scale;
	if ( !scale ) { scale = this._preload.width / image.width; }
	this._scale = scale = Math.min( Math.max( this._min, scale ), this._max );
	//按比例设置显示图大小
	zoom.width = Math.ceil( image.width * scale );
	zoom.height = Math.ceil( image.height * scale );
  },
  //初始化显示框
  _initViewer: function() {
	var zoom = this._zoom, viewer = this._viewer;
	//设置样式
	var styles = { padding: 0, overflow: "hidden" }, p = $$D.getStyle( viewer, "position" );
	if ( p != "relative" && p != "absolute" ){ styles.position = "relative"; };
	$$D.setStyle( viewer, styles );
	zoom.style.position = "absolute";
	//插入显示图
	if ( !$$D.contains( viewer, zoom ) ){ viewer.appendChild( zoom ); }
  },
  //初始化数据
  _initData: function() {
	var zoom = this._zoom, image = this._image, viewer = this._viewer,
		scale = this._scale, rangeWidth = this._rangeWidth, rangeHeight = this._rangeHeight;
	//原图坐标
	this._rect = $$D.rect( image );
	//修正参数
	this._repairLeft = image.clientLeft + parseInt($$D.getStyle( image, "padding-left" ));
	this._repairTop = image.clientTop + parseInt($$D.getStyle( image, "padding-top" ));
	//设置范围参数和显示框大小
	if ( rangeWidth > 0 && rangeHeight > 0 ) {
		rangeWidth = Math.ceil( rangeWidth );
		rangeHeight = Math.ceil( rangeHeight );
		this._viewerWidth = Math.ceil( rangeWidth * scale );
		this._viewerHeight = Math.ceil( rangeHeight * scale );
		$$D.setStyle( viewer, {
			width: this._viewerWidth + "px",
			height: this._viewerHeight + "px"
		});
	} else {
		var styles;
		if ( !viewer.clientWidth ) {//隐藏
			var style = viewer.style;
			styles = {
				display: style.display,
				position: style.position,
				visibility: style.visibility
			};
			$$D.setStyle( viewer, {
				display: "block", position: "absolute", visibility: "hidden"
			});
		}
		this._viewerWidth = viewer.clientWidth;
		this._viewerHeight = viewer.clientHeight;
		if ( styles ) { $$D.setStyle( viewer, styles ); }
		
		rangeWidth = Math.ceil( this._viewerWidth / scale );
		rangeHeight = Math.ceil( this._viewerHeight / scale );
	}
	this._rangeWidth = rangeWidth;
	this._rangeHeight = rangeHeight;
  },
  //开始
  _start: function() {
	clearTimeout( this._timer );
	var viewer = this._viewer, image = this._image, scale = this._scale;
	viewer.style.display = "block";
	this._onstart();
	this.onStart();
	$$E.removeEvent( image, "mouseover", this._START );
	$$E.removeEvent( image, "mousemove", this._START );
	$$E.addEvent( document, "mousemove", this._MOVE );
	$$E.addEvent( document, "mouseout", this._OUT );
	this.mouse && $$E.addEvent( document, $$B.firefox ? "DOMMouseScroll" : "mousewheel", this._MOUSE );
  },
  //移动
  _move: function(e) {
	clearTimeout( this._timer );
	var x = e.pageX, y = e.pageY, rect = this._rect;
	if ( x < rect.left || x > rect.right || y < rect.top || y > rect.bottom ) {
		this._END();//移出原图范围
	} else {
		var zoom = this._zoom,
			pos = this._repair(
				x - rect.left - this._repairLeft,
				y - rect.top - this._repairTop
			);
		this._onmove( e, pos );
		//设置定位
		zoom.style.left = pos.left + "px";
		zoom.style.top = pos.top + "px";
		this.onMove();
	}
  },
  //修正坐标
  _repair: function(x, y) {
	var scale = this._scale, zoom = this._zoom,
		viewerWidth = this._viewerWidth,
		viewerHeight = this._viewerHeight;
	//修正坐标
	x = Math.ceil( viewerWidth / 2 - x * scale );
	y = Math.ceil( viewerHeight / 2 - y * scale );
	//范围限制
	x = Math.min( Math.max( x, viewerWidth - zoom.width ), 0 );
	y = Math.min( Math.max( y, viewerHeight - zoom.height ), 0 );
	return { left: x, top: y };
  },
  //结束
  _end: function() {
	this._onend();
	this.onEnd();
	if ( this.autoHide ) { this._viewer.style.display = "none"; }
	this.stop();
	this.start();
  },
  //鼠标缩放
  _mouse: function(e) {
	this._scale += ( e.wheelDelta ? e.wheelDelta / (-120) : (e.detail || 0) / 3 ) * this.rate;
	
	var opt = this.options;
	this._rangeWidth = opt.rangeWidth;
	this._rangeHeight = opt.rangeHeight;
	
	this._initSize();
	this._initData();
	this._move(e);
	e.preventDefault();
  },
  //开始
  start: function() {
	if ( this._viewerWidth && this._viewerHeight ) {
		var image = this._image, START = this._START;
		$$E.addEvent( image, "mouseover", START );
		$$E.addEvent( image, "mousemove", START );
	}
  },
  //停止
  stop: function() {
	clearTimeout( this._timer );
	$$E.removeEvent( this._image, "mouseover", this._START );
	$$E.removeEvent( this._image, "mousemove", this._START );
	$$E.removeEvent( document, "mousemove", this._MOVE );
	$$E.removeEvent( document, "mouseout", this._OUT );
	$$E.removeEvent( document, $$B.firefox ? "DOMMouseScroll" : "mousewheel", this._MOUSE );
  },
  //修改设置
  reset: function(options) {
	this.stop();
	
	var viewer = this._viewer, zoom = this._zoom;
	if ( $$D.contains( viewer, zoom ) ) { viewer.removeChild( zoom ); }
	
	var opt = $$.extend( this.options, options || {} );
	this._scale = opt.scale;
	this._max = opt.max;
	this._min = opt.min;
	this._originPic = opt.originPic;
	this._zoomPic = opt.zoomPic;
	this._rangeWidth = opt.rangeWidth;
	this._rangeHeight = opt.rangeHeight;
	
	//重置属性
	this._loaded = this._substitute = false;
	this._rect = null;
	this._repairLeft = this._repairTop = 
	this._viewerWidth = this._viewerHeight = 0;
	
	this._initLoad();
  },
  //销毁程序
  dispose: function() {
	this._ondispose();
	this.stop();
	if ( $$D.contains( this._viewer, this._zoom ) ) {
		this._viewer.removeChild( this._zoom );
	}
	this._image.onload = this._preload.onload =
		this._image = this._preload = this._zoom = this._viewer =
		this.onLoad = this.onStart = this.onMove = this.onEnd =
		this._START = this._MOVE = this._END = this._OUT = null
  }
}

</script>
</head>
<body>
<style>

.container{ position:relative;}

.izImage, .izViewer{border:1px solid #000;background:#fff url('http://www.cnblogs.com/images/cnblogs_com/cloudgamer/169629/o_loading.gif') no-repeat center;}
.izImage{width:300px;cursor:crosshair;}
.izViewer{width:200px;height:200px;position:absolute;left:320px;top:0;display:none;}

.izViewer div{position:absolute;border:0 dashed #999;top:0;left:0;z-index:999;width:100%;height:100%;}

</style>
<div class="container"> <img id="idImage" class="izImage" src="http://www.cnblogs.com/images/cnblogs_com/cloudgamer/143727/o_vivian.jpg" />
	<div id="idViewer" class="izViewer">
		<div style="height:50%;border-bottom-width:1px;"></div>
		<div style="width:50%;border-right-width:1px;"></div>
	</div>
</div>
<br>
<input id="idStop" value="暂停" type="button">
<input id="idHide" value="取消隐藏" type="button">
<input id="idRange" value="指定范围" type="button">
<input id="idMouse" value="鼠标缩放" type="button">
<select id="idScale">
	<option value="0">按大图放大</option>
	<option value="2">放大2倍</option>
	<option value="5">放大5倍</option>
	<option value="10">放大10倍</option>
</select>
<br>
<br>
原图：
<input id="idChangeOrigin" type="text" size="40" value="http://www.cnblogs.com/images/cnblogs_com/cloudgamer/143727/o_mm_small.jpg">
<br>
大图：
<input id="idChangeZoom" type="text" size="40" value="http://www.cnblogs.com/images/cnblogs_com/cloudgamer/143727/o_mm_big.jpg">
<br>
<input id="idChange" value="换图" type="button">
<input id="idChangeReturn" value="还原" type="button">

var iz = new ImageZoom( "idImage", "idViewer", { onLoad: function(){ $$("idStop").value = "暂停"; } } );

$$("idScale").onchange = function(){ iz.reset({ scale: this.value | 0 }); }

$$("idChange").onclick = function(){
	iz.reset({ scale: 5, originPic: $$("idChangeOrigin").value, zoomPic: $$("idChangeZoom").value });
	$$("idScale").selectedIndex = 2;
}

$$("idChangeReturn").onclick = function(){
	iz.reset({ originPic: "http://www.cnblogs.com/images/cnblogs_com/cloudgamer/143727/o_vivian.jpg", zoomPic: "" });
}

$$("idRange").onclick = function(){
	if ( this.value == "指定范围" ) {
		iz.reset({ rangeWidth: 40, rangeHeight: 40 });
		this.value = "自动范围";
	} else {
		$$D.setStyle( $$("idViewer"), { width: "", height: "" } );
		iz.reset({ rangeWidth: 0, rangeHeight: 0 });
		this.value = "指定范围";
	}
}

$$("idHide").onclick = function(){
	if ( this.value == "自动隐藏" ) {
		iz.autoHide = true;
		this.value = "取消隐藏";
	} else {
		iz.autoHide = false;
		iz._viewer.style.display = "block";
		this.value = "自动隐藏";
	}
}

$$("idMouse").onclick = function(){
	if ( this.value == "鼠标缩放" ) {
		iz.mouse = true;
		this.value = "取消缩放";
	} else {
		iz.mouse = false;
		iz.reset({ scale: $$("idScale").value | 0 });
		this.value = "鼠标缩放";
	}
}

$$("idStop").onclick = function(){
	if ( this.value == "暂停" ) {
		iz.stop(); this.value = "继续";
	} else {
		iz.start(); this.value = "暂停";
	}
}

</script>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 cloudgamer 于 2010-4-15 22:23 编辑 ]

		自动登录	找回密码
密码			注册

【原创】ImageZoom 图片放大效果 [复制链接]

回复 3# bluetoothswh 的帖子

回复 7# sky94yu 的帖子

回复 10# ornet 的帖子

回复 14# cjj 的帖子

回复 16# cyczy 的帖子

我发个简单的

回复 19# kfguoguo 的帖子

回复 19# kfguoguo 的帖子

回复 24# sarsls 的帖子

回复 27# sarsls 的帖子

浏览过的帖子

浏览过的版块