基于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 相关文章推荐
javascript &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
js Event对象的5种坐标
Sep 12 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
用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
解析htaccess伪静态的规则
2013/06/18 PHP
开启PHP的伪静态模式
2015/12/31 PHP
php实现socket推送技术的示例
2017/12/20 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
深入浅出分析Python装饰器用法
2017/07/28 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
Python定时器实例代码
2017/11/01 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
python numpy数组中的复制知识解析
2020/02/03 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
Keras搭建自编码器操作
2020/07/03 Python
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
儿子婚宴答谢词
2014/01/09 职场文书
教师业务学习制度
2014/01/25 职场文书
卖车协议书范例
2014/09/16 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
php+laravel 扫码二维码签到功能
2021/05/15 PHP
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python