angularJS-实现放大镜效果_angular图片放大-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36898102/article/details/77803511

<!DOCTYPE html>
<html ng-app="myPro">
	<head>
		<meta charset="utf-8" />
		<title>angularJS-实现放大镜效果</title>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<style>
			*{margin: 0;padding: 0;}
			.content{width: 800px;height: 400px;position: relative;border:1px solid red;}
			.left{width: 400px;height: 400px;cursor: pointer;}
			.left img{width: 100%;height:100%;}
			.right{width: 300px;height: 300px;border: 1px solid;position: absolute;left: 440px;top: 20px;overflow: hidden;display: none;}
			.right img{width:1000px;height: 1000px; position: absolute;}
			.show{display: block !important;}
		</style>
	</head>
	<body ng-controller="myProController">
		<div class="content">
			<div class="left" magnifier-left ng-mousemove="getPosition($event.offsetX,$event.offsetY)" ng-mouseover="mouseover()" ng-mouseleave="mouseleave()">
				<img src="img/banner.jpg"/>
			</div>
			<div class="right" magnifier-right ng-class="{show:aa}">
				<img src="img/banner.jpg"/>
			</div>
		</div>
	</body>
	<script>
		var pro = angular.module("myPro",[]);
		pro.controller("myProController",["$scope",function($scope){
			$scope.mouseover = function(){
				$scope.aa = true;
			};
			$scope.mouseleave = function(){
				$scope.aa = false;
			};
		}]);
		
		pro.directive("magnifierRight",[function(){
			return{
				restrict:"EA",
				replace:true,
				link:function(scope,element,attr){
					//右侧容器内照片宽度、高度
					scope.rightWidth = $(element).find("img").width();
					scope.rightHeight = $(element).find("img").height();
					//右侧容器宽度、高度
					scope.rightBoxWidth = $(element).width();
					scope.rightBoxHeight = $(element).height();
					//移动比例
					var radX = (scope.rightWidth-scope.rightBoxWidth)/scope.leftWidth;
					var radY = (scope.rightHeight-scope.rightBoxHeight)/scope.leftHeight;
					setInterval(function(){
						scope.$apply(function(){
							element.find("img").css({
								"left":-scope.x*radX+"px",
								"top":-scope.y*radY+"px"
							});
						})
					},30)
				}
			}
		}]);
		
		pro.directive("magnifierLeft",[function(){
			return{
				restrict:"EA",
				replace:true,
				link:function(scope,element,attr){
					scope.leftWidth = $(element).find("img").width();
					scope.leftHeight = $(element).find("img").height();
					scope.getPosition = function(x,y){
						scope.x = x;
						scope.y = y;
					}
				}
			}
		}]);
		
	</script>
</html>