基于angularjs实现图片放大镜效果

2019-11-20 09:07:06

字体：大中小

来源：转载

供稿：网友

前言

一开始打算用原生的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>

总结

以上就是这篇文章的全部内容，不知道大家都学会了吗？希望这篇文章对大家的学习或者工作能带来一定帮助，如果有问题欢迎大家留言交流。

上一篇：ES6记录异步函数的执行时间详解

下一篇：用AngularJS的指令实现tabs切换效果