[jQuery]地图浏览：如何实现图片的放大缩小和点击之后的位置居中

runfeel

浏览: 905374 次

最近访客更多访客>>

gaozzsoft

hudaafei

seancheer

sugar005

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1069)

社区版块

存档分类

2013-08 ( 1)
2013-07 ( 211)
2013-06 ( 235)
更多存档...

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <link rel="stylesheet" href="style.css" type="text/css" />
        <script type='text/javascript' src='script.js'></script>
	</head>

	<body>
	
	<img id="back" name="back" src="back.jpg" alt = "背景"/>

	<div>
		<div id="larger" class="size_btn"><img src="+.png" alt="+"></div>
		<div id="smaller" class="size_btn"><img src="-.png" alt="+"></div>
	</div>

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

最终效果：