Preface
At first I planned to write it in native angularjs, but I found that using native angularjs, I could not get the width and height of the picture in it anyway, because the built-in jquery method of angularjs does not have winth() height() methods.
It would be better if I introduced jquery and bound the width and height on the same scope . Let’s go to the source code below, and by the way, I will talk about some of the points in it.
Reproduction diagram
First of all, let's explain
1. First, two simultaneous instructions are used and communication is conducted between two simultaneous instructions. Communication between simultaneous instructions is very simple, that is, do not allow simultaneous instructions to generate independent scope and complete them under the same scope. If the directive scope has no special declaration, then it is the parent scope . The template generated by the directive has no special meaning unless it is compiled under a specific scope . By default, the directive does not create a new child scope , but uses the parent scope . That is, if the directive exists under a controller , it will use scope under controller .
2. Then use $q to delay the data acquisition asynchronously. You can also see the usage of $q .
Source code example
<!DOCTYPE html><html lang="en" ng-app="magnifierAPP"><head> <meta charset="UTF-8"> <title></title> <script src="lib/angular.min.js" type="text/javascript"></script> <script src="lib/angular-animate.js" type="text/javascript"></script> <script src="lib/angular-animate.js" type="text/javascript"></script> <script src="lib/jquery-2.1.4.min.js" type="text/javascript"></script></head><style> *{ padding: 0px; margin: 0px; } .content{ width: 800px; height: 400px; position: relative; border: 1px solid red; } .left{ width: 310px; height: 380px; } .top{ width: 310px; height: 310px; border: 1px solid blue; cursor: pointer; } .top img{ width: 310px; height: 310px; } .bottom{ position: relative; width: 310px; height: 60px; border: 1px solid black; } .bottom img{ display: inline-block; width: 60px; height: 60px; float: left; margin: 0 30px; cursor: pointer; } .right{ border: 1px solid ; width: 300px; height: 300px; position: absolute; left: 400px; top: 20px; overflow: hidden; } .right img{ position: absolute; width: 700px; height: 600px; } .show{ display: block; } .hidden{ display: none; }</style><body><div ng-controller="magnifierController"> <div> <div ng-init="isActive=0"> <div>{{x}}+{{y}}</div> <div magnifier-top></div> <div > <img src="img/blue_1.jpg" ng-mouseover="isActive=0"/> <img src="img/yellow_1.jpg" ng-mouseover="isActive=1"/> </div> </div> <div magnifier-right> <div>{{x}}+{{y}}</div> </div> </div> <script type="text/ng-template" id="magnifier-top.html"> <div ng-mousemove="getPosition($event.offsetX,$event.offsetY)" ng-mouseover="isshow=true" ng-mouseleave="isshow=false"> <img src="img/blue_2.jpg" ng-class="{true:'show',false:'hidden'}[isActive==0]"/> <img src="img/yellow_2.jpg" ng-class="{true:'show',false:'hidden'}[isActive==0]"/> <img src="img/yellow_2.jpg" ng-class="{true:'show',false:'hidden'}[isActive==1]"/> </div> </script> <script type="text/ng-template" id="magnifier-right.html" > <div > <img src="{{img1.src}}" ng-class="{true:'show',false:'hidden'}[isActive==0]" id="img1"/> <img src="{{img2.src}}" ng-class="{true:'show',false:'hidden'}[isActive==0]" id="img1"/> <img src="{{img2.src}}" ng-class="{true:'show',false:'hidden'}[isActive==1]"/> </div> </script></div></body><script> var app=angular.module('magnifierAPP',[]); app.controller('magnifierController',['$scope', function ($scope) { }]); app.directive('magnifierRight',['readJson',function (readJson) { return { restrict: 'EA', replace:true, templateUrl:'magnifier-right.html', link: function (scope,element,attr) { var promise=readJson.getJson(); promise.then(function (data) { scope.img1=data[0]; scope.img2=data[1]; }); //The width and height of the photo in the container on the right side scope.rightWidth=$(element).find("img").eq(scope.isActive).width(); scope.rightHeight=$(element).find("img").eq(scope.isActive).height(); //The width and height of the container on the right side scope.rightBoxWidth=$(element).width(); scope.rightBoxHeight=$(element).height(); //Move the ratio var radX=(scope.rightWidth-scope.rightBoxWidth)/scope.topWidth; var radY=(scope.rightHeight-scope.rightBoxHeight)/scope.topHeight; console.log(radX); console.log(radY); setInterval(function (){ scope.$apply(function (){ element.find("img").eq(scope.isActive).css({ "left":-scope.x*radX+"px", "top":-scope.y*radY+"px" }); }) },30) } } } }]); app.directive('magnifierTop',[function () { return{ restrict:'EA', replace:true, templateUrl:'magnifier-top.html', link: function (scope,element,attr) { scope.topWidth=$(element).find("img").eq(scope.isActive).width(); scope.topHeight=$(element).find("img").eq(scope.isActive).height(); scope.getPosition= function (x,y) { scope.x=x; scope.y=y; } } } }]); app.factory('readJson',['$http','$q', function ($http,$q) { return{ getJson: function (){ var deferred=$q.defer(); $http({ method:'GET', url:'magnifier.json' }).success(function (data, status, header, config) { deferred.resolve(data); }).error(function (data, status, header, config) { deferred.reject(data); }); return deferred.promise; } } }]);</script></html>Summarize
The above is the entire content of this article. I wonder if everyone has learned it? I hope this article will be of some help to everyone's study or work. If you have any questions, please leave a message and communicate.