前言
一開始打算用原生的angularjs寫，但是發現用原生angularjs，無論如何都不能擷取裡面圖片的寬度和高度，因為angularjs內建的jquery方法裡沒有winth() 、height()方法。
最好我還是引入了jquery，在同一scope上綁定了寬度高度。下面上源碼，順便我會把裡面的一些注意的點說一下。
效果圖
首先說明下
1、首先使用了兩個同級指令，並在兩個同級指令間進行通訊，同級指令間通訊，非常簡單，就是不要讓同級的指令產生獨立的scope，並且在同一個範圍下就完成了。如果指令scope沒有特殊聲明，那麼就是父scope。指令產生的模板沒有特殊意義，除非在特定的scope下編譯，預設情況下，指令並不會建立新的子scope，更多的是使用父scope，也就是說，如果指令存在一個controller下，它會使用controller下的scope。
2、然後就是用$q來延遲非同步擷取資料，這個也可以看一下$q的用法。
源碼樣本
<!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/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 class="content"> <div class="left" ng-init="isActive=0"> <div>{{x}}+{{y}}</div> <div magnifier-top></div> <div class="bottom" > <img src="img/blue_1.jpg" alt="1" ng-mouseover="isActive=0"/> <img src="img/yellow_1.jpg" alt="1" 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 class="top" ng-mousemove="getPosition($event.offsetX,$event.offsetY)" ng-mouseover="isshow=true" ng-mouseleave="isshow=false"> <img src="img/blue_2.jpg" alt="0" ng-class="{true:'show',false:'hidden'}[isActive==0]"/> <img src="img/yellow_2.jpg" alt="1" ng-class="{true:'show',false:'hidden'}[isActive==1]"/> </div> </script> <script type="text/ng-template" id="magnifier-right.html" > <div class="right" > <img src="{{img1.src}}" alt="1" ng-class="{true:'show',false:'hidden'}[isActive==0]" id="img1"/> <img src="{{img2.src}}" alt="1" 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]; }); //右側容器內照片寬度、高度 scope.rightWidth=$(element).find("img").eq(scope.isActive).width(); scope.rightHeight=$(element).find("img").eq(scope.isActive).height(); //右側容器寬度、高度 scope.rightBoxWidth=$(element).width(); scope.rightBoxHeight=$(element).height(); //移動比例 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>
總結
以上就是這篇文章的全部內容，不知道大家都學會了嗎？希望這篇文章對大家的學習或者工作能帶來一定協助，如果有問題歡迎大家留言交流。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
