HTML代码：

 

JS代码：

 

 

$(document).ready(function(){	/******** 先将图片居中并完全显示 ********/	var proportion = 1;	if($(window).width() / $('#back').width() < $(window).height() / $('#back').height())		proportion = $(window).width()/$('#back').width();	else		proportion = $(window).height()/$('#back').height();		var back_width = $('#back').width() * proportion;	var back_height = $('#back').height() * proportion;	var back_left = ($(window).width() - back_width)/2;	var back_top = ($(window).height() - back_height)/2;	$('#back').width(back_width);      	$('#back').height(back_height);	$("#back").offset({left:back_left,top:back_top});	//放大缩小操作时的尺寸变化	var sizeX = back_width/10;	var sizeY = back_height/10;	//放大缩小操作时的位置变化	var moveX = sizeX/2;	var moveY = sizeY/2;	//点击放大按钮	$('#larger').click(function(){		$('#back').height("+=" + sizeX);      		$('#back').width("+=" + sizeY);		$("#back").offset(function(n,c){			newPos = new Object();			newPos.left = c.left-moveX;			newPos.top = c.top-moveY;			return newPos;		});	});	//点击缩小按钮	$('#smaller').click(function(){		$('#back').height("-=" + sizeX);      		$('#back').width("-=" + sizeY);		$("#back").offset(function(n,c){			newPos = new Object();			newPos.left = c.left + moveX;			newPos.top = c.top + moveY;			return newPos;		});	});	//点击图片	$('#back').click(function(event){		var x=($(window).width()/2) - event.clientX + $("#back").offset().left;		var y=($(window).height()/2) - event.clientY + $("#back").offset().top;		$("#back").animate({left:x,top:y});	});});

 

 

css代码：

 

#back{	left: 0px;    top:  0px;	position:absolute;	z-index:-1;}.size_btn{	position:absolute;	height:30px;	width:30px;}#larger{}#smaller{	top:60px;}

 

最终效果：

 

点击放大按钮：

点击图片的任意位置：