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


Posted in Javascript onAugust 31, 2016

前言

一开始打算用原生的angularjs写,但是发现用原生angularjs,无论如何都不能获取里面图片的宽度和高度,因为angularjs内置的jquery方法里没有winth()  、height()方法。

最好我还是引入了jquery,在同一scope上绑定了宽度高度。下面上源码,顺便我会把里面的一些注意的点说一下。

效果图

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

首先说明下

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>

总结

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

Javascript 相关文章推荐
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
jquery checkbox,radio是否选中的判断代码
Mar 20 Javascript
js数组操作学习总结
Nov 04 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
vue实现匀速轮播效果
Jun 29 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 #Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 #Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 #Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 #Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 #Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 #Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 #Javascript
You might like
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
php结合表单实现一些简单功能的例子
2011/06/04 PHP
PHP5函数小全(分享)
2013/06/06 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
js+html制作简单验证码
2017/02/16 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
vue 实现tab切换保持数据状态
2020/07/21 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
python中元组的用法整理
2020/06/15 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
上海奥佳笔试题面试题
2016/11/16 面试题
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
小学家长会邀请函
2014/01/23 职场文书
公司端午节活动方案
2014/02/04 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
一分钟演讲稿
2014/04/30 职场文书