基于angularjs实现图片放大镜效果
更新时间：2016年08月31日 15:15:27 作者：MakingChoice
这篇文章给大家分享了angularjs实现购物放大镜效果的源码实例，代码介绍的很详细，有需要的可以参考借鉴，下面来一起看看。
前言
一开始打算用原生的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>
总结
以上就是这篇文章的全部内容，不知道大家都学会了吗？希望这篇文章对大家的学习或者工作能带来一定帮助，如果有问题欢迎大家留言交流。
相关文章
这篇文章主要介绍了Angular 实现输入框中显示文章标签的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
本文主要介绍AngularJS ng-class-odd 指令,这里对ng-class-odd基础知识做了详细整理,并有示例代码和效果图,学习AngularJS的同学可以参考下2016-08-08
这篇文章主要介绍了angularjs性能优化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家介绍了angular父子组件通信，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。接下来通过本文给大家简单介绍angularjs中http服务的用法，喜欢的朋友可以参考下2016-02-02
这篇文章主要介绍了AngularJS入门教程（一）：静态模板,本文是系列文章的第二篇,本系列会用一个项目来讲解AngularJS的使用,需要的朋友可以参考下2014-12-12
本篇文章主要介绍了angular中实现控制器之间传递参数的方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-04-04
系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解，感兴趣的朋友一起学习吧2015-12-12
vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，所以下面这篇文章主要给大家分享了关于使用axios的一些心得技巧，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
在客户端使用AngularJS做身份验证的话，推荐使用service来做，下面脚本之家小编给大家介绍AngularJS身份验证的方法，感兴趣的朋友一起学习吧2016-02-02
最新评论