基于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 (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 Javascript
Vue.js的模板语法详解
Feb 16 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
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
django rest framework 过滤时间操作
2020/07/12 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
公司面试感谢信
2014/02/01 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
消防安全月活动总结
2015/05/08 职场文书
Go语言读取txt文档的操作方法
2022/01/22 Golang
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang