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

柔光的暖阳◎ 2022-10-11 03:37 304阅读 0赞

用户点击小图一般是要查看小图放大后的大图，或者鼠标移到小图后想要查看详细的信息的大图，这时候要考虑大图的定位问题，以下代码可以参考（需要引入 `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')
    			}
    		}
    
    	}