基于angularjs实现图片放大镜效果（angular点击图片放大）

25-02-16 19

在本文中，我们将为您详细介绍基于angularjs实现图片放大镜效果的相关知识，并且为您解答关于angular点击图片放大的疑问，此外，我们还会提供一些关于Angularjs实现图片预览上传、angu

在本文中，我们将为您详细介绍基于angularjs实现图片放大镜效果的相关知识，并且为您解答关于angular点击图片放大的疑问，此外，我们还会提供一些关于Angularjs实现图片预览上传、angularjs点击图片放大实现上传图片预览、HTML、CSS和jQuery：实现图片放大镜效果的技巧、JavaScript 如何实现图片放大镜效果？的有用信息。

本文目录一览：

基于angularjs实现图片放大镜效果（angular点击图片放大）
Angularjs实现图片预览上传
angularjs点击图片放大实现上传图片预览
HTML、CSS和jQuery：实现图片放大镜效果的技巧
JavaScript 如何实现图片放大镜效果？

基于angularjs实现图片放大镜效果（angular点击图片放大）

前言

一开始打算用原生的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>
    <divng-init="isActive=0">
      <div>{{x}}+{{y}}</div>
      <div magnifier-top></div>
      <div>
        <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">
    <divng-mousemove="getPosition($event.offsetX,$event.offsetY)" ng-mouseover="isshow=true" ng-mouseleave="isshow=false">
      <img src="img/blue_2.jpg" alt="0" ng-/>
      <img src="img/yellow_2.jpg" alt="1" ng-/>
    </div>
  </script>

  <script type="text/ng-template" id="magnifier-right.html" >
    <div>
      <img src="{{img1.src}}" alt="1" ng-id="img1"/>
      <img src="{{img2.src}}" alt="1" ng-/>
    </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>

总结

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

您可能感兴趣的文章:

js放大镜放大图片效果
用js实现放大镜的效果的简单实例
JavaScript图片放大镜效果代码[代码比较简单]
奇妙的Javascript图片放大镜
JavaScript 图片放大镜（可拖放、缩放效果）
原生js写的放大镜效果
电子商务网站上的常用的js放大镜效果
JavaScript 图片切割效果(放大镜)
js图片放大镜效果实现方法详解
JavaScript实现放大镜效果

Angularjs实现图片预览上传

这次给大家带来Angularjs实现图片预览上传，Angularjs实现图片预览上传的注意事项有哪些，下面就是实战案例，一起来看一下。

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<input>
app.factory("fileReader",function($q, $log) {
      varonLoad =function(reader, deferred, scope) {
        returnfunction() {
          scope.$apply(function() {
            deferred.resolve(reader.result);
          });
        };
      };
      varonError =function(reader, deferred, scope) {
        returnfunction() {
          scope.$apply(function() {
            deferred.reject(reader.result);
          });
        };
      };
      varonProgress =function(reader, scope) {
        returnfunction(event) {
          scope.$broadcast("fileProgress",
              {
                total: event.total,
                loaded: event.loaded
              });
        };
      };
      vargetReader =function(deferred, scope) {
        varreader =newFileReader();
        reader.onload = onLoad(reader, deferred, scope);
        reader.onerror = onError(reader, deferred, scope);
        reader.onprogress = onProgress(reader, scope);
        returnreader;
      };
      varreadAsDataURL =function(file, scope) {
        vardeferred = $q.defer();
        varreader = getReader(deferred, scope);
        reader.readAsDataURL(file);
        returndeferred.promise;
      };
      return{
        readAsDataUrl: readAsDataURL
      };
  });

登录后复制

选择图片后执行的方法

$scope.onFileSelect =function(files) {
      varfileIn=files[0];
      varimg =newImage();
      varfileType = fileIn.name.substring(fileIn.name.lastIndexOf(".") + 1, fileIn.name.length);
      if(fileIn.size&gt;5242880){//单位是B，此处不允许超过5M
        alert("图片不能超过5M")
        return;
      }
      if(fileType==''JPG''|| fileType==''PNG''|| fileType==''JPEG ''|| fileType==''jpg''|| fileType==''png''|| fileType==''jpeg''){
      }else{
        alert("图片格式只支持:JPG,PNG,JPEG")
        return;
      }
      fileReader.readAsDataUrl(fileIn, $scope)
          .then(function(result) {
            $scope.imageSrc = result;
            console.log(img.width);
      });
    }

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

以上就是Angularjs实现图片预览上传的详细内容，更多请关注php中文网其它相关文章！

angularjs点击图片放大实现上传图片预览

本文实例为大家分享了angularjs点击图片放大预览的具体代码，供大家参考，具体内容如下

承接上一篇文章

rush:js;"> /*图片点击放大再点击还原*/ angular.module('routerModule').directive('enlargePic',function(){//图片 return{ restrict: "AE",link: function(scope,elem){ elem.bind('click',function($event){ var img = $event.srcElement || $event.target; angular.element(document.querySelector(".mask"))[0].style.display = "block"; angular.element(document.querySelector(".bigPic"))[0].src = img.src; }) } } }) .directive('closePic',function(){ return{ restrict: "AE",function($event){ angular.element(document.querySelector(".mask"))[0].style.display = "none"; }) } } });

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小编。

HTML、CSS和jQuery：实现图片放大镜效果的技巧

html、css和jquery：实现图片放大镜效果的技巧

HTML、CSS和jQuery：实现图片放大镜效果的技巧，附带代码示例

导语：在网页设计中，图片展示是非常重要的一部分。为了提升用户体验，我们常常希望能够给图片添加一些特殊效果，比如图片放大镜效果。本文将介绍如何使用HTML、CSS和jQuery来实现图片放大镜效果，并提供具体的代码示例。

一、HTML结构

在开始编写代码之前，首先需要为图片放大镜效果设计一个合适的HTML结构。下面是一个基本的HTML结构示例，你可以根据自己的实际需求进行修改和扩展：

立即学习“前端免费学习笔记（深入）”；

<div>
  @@##@@
  <div></div>
</div>

登录后复制

在这个示例中，我们使用一个

容器包含了图片元素以及放大镜效果所需的元素。其中图片名称

元素用于显示原始图片，

用于显示放大的区域。

二、CSS样式

接下来，我们需要为HTML结构添加一些CSS样式，使其能够正确显示和定位。下面是一个基本的CSS样式示例，你可以根据自己的需求进行修改和扩展：

.container {
  position: relative;
  width: 400px;
  height: 400px;
}

.image {
  width: 100%;
  height: auto;
}

.zoom {
  border: 1px solid #ccc;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-repeat: no-repeat;
  background-size: 800px 800px;
  display: none;
}

登录后复制

在这个示例中，.container类设置了容器的宽度和高度，并使用了position: relative来确定内部元素的相对定位。.image类则设置了图片的宽度为100%，高度自适应。.zoom类设置了放大区域的样式，包括边框、绝对定位、宽度、高度以及背景图像等。

三、jQuery脚本

最后，我们需要编写一些jQuery脚本来实现图片放大镜效果。下面是一个基本的jQuery脚本示例，你可以根据自己的需求进行修改和扩展：

$(document).ready(function(){
  $(".container").mouseenter(function(){
    $(".zoom").show();
  });

  $(".container").mouseleave(function(){
    $(".zoom").hide();
  });

  $(".container").mousemove(function(event){
    var containerPos = $(this).offset();
    var mouseX = event.pageX - containerPos.left;
    var mouseY = event.pageY - containerPos.top;

    $(".zoom").css({
      top: mouseY - 100,
      left: mouseX - 100,
      backgroundPosition: -mouseX * 2 + "px " + -mouseY * 2 + "px"
    });
  });
});

登录后复制

在这个示例中，我们使用了jQuery的mouseenter、mouseleave和mousemove事件来控制放大镜效果的显示和定位。其中mouseenter事件用于在鼠标进入容器时显示放大镜效果，mouseleave事件用于在鼠标离开容器时隐藏放大镜效果，mousemove事件用于根据鼠标位置来调整放大区域的位置和背景图像位置。

结语：

通过合理的HTML结构、CSS样式和jQuery脚本的配合，我们可以很容易地实现图片放大镜效果。希望本文的代码示例对你有所帮助，并能够激发你的创意，进行更多其他特效的实现。加油！

以上就是HTML、CSS和jQuery：实现图片放大镜效果的技巧的详细内容，更多请关注php中文网其它相关文章！