基于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具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
vue-cli常用设置总结
Feb 24 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 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&amp;&amp;mysql)六
2006/10/09 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
python实现简单遗传算法
2018/03/19 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
Python笔试面试题小结
2019/09/07 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
Python里面如何拷贝一个对象
2014/02/17 面试题
学习十八大报告感言
2014/02/28 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
五一活动标语
2014/06/30 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
Python 中的Sympy详细使用
2021/08/07 Python