写了个图片放大效果，

sohighthesky 2009-11-15 02:47:11

演示：http://www.cnblogs.com/sohighthesky/archive/2009/11/15/1603348.html

大家看看，顺序测试下，

源代码：



/*

 *Author:sohighthesky

 *From:http://www.cnblogs.com/sohighthesky/

 *Date:2009-11-14

 */

/*

 *img 指定要放大的图片或者其id

 *options:参见代码中setOptions中的注释

 */

var imageZoom = function(img,options) {

	this.img=this.g(img);

	if(this.img.nodeName!="IMG") {

		if(this.img && this.img.children[0].nodeName=="IMG")this.img=this.img.children[0];

		else throw Error("Invalid argument [img]!");

	}

	this.setOptions(options);

	this.init();

}

imageZoom.prototype={

	g:function(id) {return typeof(id)=="string"?document.getElementById(id):id;},

	ae:function(el,type,call) {

        if(el.addEventListener)el.addEventListener(type,call,false);

		else el.attachEvent("on"+type,call);

    },

	getPos:function(o){//取元素坐标

		var x = 0, y = 0;

		do{x += o.offsetLeft; y += o.offsetTop;}

		while(o=o.offsetParent);

		return {'x':x,'y':y};

	},

	setOptions:function(options) {

	    this.options={

	        mul:0,//默认为不放大（显示图片的原来大小）

		    bigImg:null,//指定放大的图片路径（要跟小图成比例才好）

		    viewer:null, //指定显示的位置(可以为一个div或者其id)

		    viewerMul:1//指定显示div的放大倍数，默认为原大小,设置viewer时此参数无效

	    };

		for(var o in options) {this.options[o]=options[o];}

		this.options.bigImg =this.options.bigImg ||this.img.src;

    },

    getSize:function(o) {

		return {w:o.offsetWidth,h:o.offsetHeight};

    },

	createView:function() {		

		var _is=this.getSize(this.img);

		var d=document;

		if(this.options.viewer){

			this.viewer=this.g(this.options.viewer);

			this.viewer.style.overflow="hidden";

			this.viewer.style.position="relative";

		} else {

			this.viewer=d.createElement("div");

			var pos=this.getPos(this.img);

			this.viewer.style.cssText="display:none;overflow:hidden;position:absolute;top:"+pos.y+"px;left:"+(pos.x+_is.w+10)+"px;height:"+_is.h*this.options.viewerMul+"px;width:"+_is.w*this.options.viewerMul+"px";

			d.body.appendChild(this.viewer);

		}		

		this.viewimg=d.createElement("img");

		this.viewimg.style.cssText="position:relative;left:-33%;top:-33%;";

		this.viewimg.src=this.options.bigImg;

		if(this.options.mul) {//设置放大倍数

			this.viewimg.style.width=_is.w*this.options.mul +"px";

			this.viewimg.style.height=_is.h*this.options.mul +"px";

		}

		this.viewer.appendChild(this.viewimg);

	},

	move:function(e) {

		if(!this.options.mul)

		    this.options.mul=this.viewimg.offsetHeight/this.img.offsetHeight;

		var pos=this.getPos(this.img);

		var l=e.clientX-pos.x+(document.documentElement.scrollLeft || document.body.scrollLeft);//鼠标位置相对于图片左上角的偏移

		var t=e.clientY-pos.y+(document.documentElement.scrollTop || document.body.scrollTop);

		var zs=this.getSize(this.viewer);

		var pl=-l*this.options.mul+zs.w/2;

		var pt=-t*this.options.mul+zs.h/2;

		pl=pl>0?0:pl;

		pt=pt>0?0:pt;



        var vs=this.getSize(this.viewimg);

        pl=Math.max(pl,zs.w-vs.w);

        pt=Math.max(pt,zs.h-vs.h);



		this.viewimg.style.left=pl+"px";

		this.viewimg.style.top=pt+"px";

	},

	init:function() {

	    var o=this;

	    var load=function(a) {//图片加载

	        o.createView.call(o);

	        o.img.setAttribute("alt","");

	        o.ae(o.img,"mousemove",function(event){o.move.call(o,event);});

		    if(!o.options.viewer) {

		        o.ae(o.img,"mouseover",function(){o.viewer.style.display=""});

		        o.ae(o.img,"mouseout",function(){o.viewer.style.display="none"});

		    }

	    };

	    if(typeof(document.readyState)=="undefined" || window.opera) {

			var de=document.documentElement || document.body;

			var h=de.scrollHeight;

			var t=setInterval(function() {

				if(h==de.scrollHeight){

					clearInterval(t);

					load();					

				} else h=de.scrollHeight;

			},500);

	    } else if(document.readyState=="complete")

	        load();

	    else

	        o.ae(window,"load",load);

	}

};