基于angularjs实现图片放大镜效果
程序员文章站
2023-11-17 18:16:10
前言
一开始打算用原生的angularjs写,但是发现用原生angularjs,无论如何都不能获取里面图片的宽度和高度,因为angularjs内置的jquery方法里...
前言
一开始打算用原生的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>
总结
以上就是这篇文章的全部内容,不知道大家都学会了吗?希望这篇文章对大家的学习或者工作能带来一定帮助,如果有问题欢迎大家留言交流。