点击小图查看大图的定位功能

用户点击小图一般是要查看小图放大后的大图，或者鼠标移到小图后想要查看详细的信息的大图，这时候要考虑大图的定位问题，以下代码可以参考（需要引入 jq ）：

	// 小图  大图  定位
	$(document).on('mouseover', '.smallimg', function(e){
		var src = $(this).attr('src');
		$('body').append('<img src="'+src+'" style="display:none;position:absolute;top:0;left:0;z-index:99999;" class="position_img"/>');
		$('.position_img').fadeIn();
		runPosition($(this), $('.position_img'));
	})
	$(document).on('mouseout', '.smallimg', function(){
		$('.position_img').remove();
	})

	// 实现定位功能 定位到目标元素旁边
	// $target是目标元素  $position是需要定位的元素，放到body层  
	// place是设置位置，如果不设置就按照右下左上的顺序判断能否定位
	function runPosition($target, $position, place){
		var space = 5;
		var offset = $target.offset();
		var top = offset.top;
		var left = offset.left;
		var targetWidth = $target.outerWidth();
		var targetHeight = $target.outerHeight();
		var documentWidth = $(document).width();
		var documentHeight = $(document).height();
		var bottom = documentHeight-top-targetHeight;
		var right = documentWidth-left-targetWidth;

		var positionWidth = $position.outerWidth();
		var positionHeight = $position.outerHeight();
		var deltaTop = top+targetHeight/2 - positionHeight/2;
		var deltaBottom = bottom+targetHeight/2 - positionHeight/2;
		var deltaLeft = left+targetWidth/2 - positionWidth/2;
		var deltaRight = right+targetWidth/2 - positionWidth/2;

		if(!place && (right > positionWidth+space*2) && (documentHeight > positionHeight+space*2)){               // 右边
			$position.css({
				left: left+targetWidth+space+'px',
				top: top+targetHeight/2-positionHeight/2+'px'
			})

			if(deltaTop<space){
				$position.css('top', space+'px')
			} else 
			if(deltaBottom<space){
				$position.css('top', documentHeight-positionHeight-space+'px')
			}
		} else
		if(!place && (bottom > positionHeight+space*2) && (documentWidth > positionWidth+space*2)){             // 下面
			$position.css({
				left: left+targetWidth/2-positionWidth/2+'px',
				top: top+targetHeight+space+'px'
			})

			if(deltaLeft<space){
				$position.css('left', space+'px')
			} else 
			if(deltaRight<space){
				$position.css('left', documentWidth-positionWidth-space+'px')
			}
		} else 
		if(!place && (left > positionWidth+space*2) && (documentHeight > positionHeight+space*2)){                // 左边
			$position.css({
				left: left-positionWidth-space+'px',
				top: top+targetHeight/2-positionHeight/2+'px'
			})

			if(deltaTop<space){
				$position.css('top', space+'px')
			} else 
			if(deltaBottom<space){
				$position.css('top', documentHeight-positionHeight-space+'px')
			}
		} else
		if(!place && (top > positionHeight+space*2) && (documentWidth > positionWidth+space*2)){                 // 上面
			$position.css({
				left: left+targetWidth/2-positionWidth/2+'px',
				top: top-positionHeight-space+'px'
			})

			if(deltaLeft<space){
				$position.css('left', space+'px')
			} else 
			if(deltaRight<space){
				$position.css('left', documentWidth-positionWidth-space+'px')
			}
		} 

		if(place == 'right'){               // 右边
			$position.css({
				left: left+targetWidth+space+'px',
				top: top+targetHeight/2-positionHeight/2+'px'
			})

			if(deltaTop<space){
				$position.css('top', space+'px')
			} else 
			if(deltaBottom<space){
				$position.css('top', documentHeight-positionHeight-space+'px')
			}
		}
		if(place == 'bottom'){             // 下面
			$position.css({
				left: left+targetWidth/2-positionWidth/2+'px',
				top: top+targetHeight+space+'px'
			})

			if(deltaLeft<space){
				$position.css('left', space+'px')
			} else 
			if(deltaRight<space){
				$position.css('left', documentWidth-positionWidth-space+'px')
			}
		}
		if(place == 'left'){                // 左边
			$position.css({
				left: left-positionWidth-space+'px',
				top: top+targetHeight/2-positionHeight/2+'px'
			})

			if(deltaTop<space){
				$position.css('top', space+'px')
			} else 
			if(deltaBottom<space){
				$position.css('top', documentHeight-positionHeight-space+'px')
			}
		}
		if(place == 'top'){                 // 上面
			$position.css({
				left: left+targetWidth/2-positionWidth/2+'px',
				top: top-positionHeight-space+'px'
			})

			if(deltaLeft<space){
				$position.css('left', space+'px')
			} else 
			if(deltaRight<space){
				$position.css('left', documentWidth-positionWidth-space+'px')
			}
		}

	}