angularJS-实现放大镜效果

来源：互联网发布：海洋cms一点不好用编辑：程序博客网时间：2024/06/09 16:26
<!DOCTYPE html><html ng-app="myPro"><head><meta charset="utf-8" /><title>angularJS-实现放大镜效果</title><script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript" src="js/jquery-1.11.0.js" ></script><style>*{margin: 0;padding: 0;}.content{width: 800px;height: 400px;position: relative;border:1px solid red;}.left{width: 400px;height: 400px;cursor: pointer;}.left img{width: 100%;height:100%;}.right{width: 300px;height: 300px;border: 1px solid;position: absolute;left: 440px;top: 20px;overflow: hidden;display: none;}.right img{width:1000px;height: 1000px; position: absolute;}.show{display: block !important;}</style></head><body ng-controller="myProController"><div class="content"><div class="left" magnifier-left ng-mousemove="getPosition($event.offsetX,$event.offsetY)" ng-mouseover="mouseover()" ng-mouseleave="mouseleave()"><img src="img/banner.jpg"/></div><div class="right" magnifier-right ng-class="{show:aa}"><img src="img/banner.jpg"/></div></div></body><script>var pro = angular.module("myPro",[]);pro.controller("myProController",["$scope",function($scope){$scope.mouseover = function(){$scope.aa = true;};$scope.mouseleave = function(){$scope.aa = false;};}]);pro.directive("magnifierRight",[function(){return{restrict:"EA",replace:true,link:function(scope,element,attr){//右侧容器内照片宽度、高度scope.rightWidth = $(element).find("img").width();scope.rightHeight = $(element).find("img").height();//右侧容器宽度、高度scope.rightBoxWidth = $(element).width();scope.rightBoxHeight = $(element).height();//移动比例var radX = (scope.rightWidth-scope.rightBoxWidth)/scope.leftWidth;var radY = (scope.rightHeight-scope.rightBoxHeight)/scope.leftHeight;setInterval(function(){scope.$apply(function(){element.find("img").css({"left":-scope.x*radX+"px","top":-scope.y*radY+"px"});})},30)}}}]);pro.directive("magnifierLeft",[function(){return{restrict:"EA",replace:true,link:function(scope,element,attr){scope.leftWidth = $(element).find("img").width();scope.leftHeight = $(element).find("img").height();scope.getPosition = function(x,y){scope.x = x;scope.y = y;}}}}]);</script></html>
阅读全文
0 0