Angular js在某处点击或鼠标悬浮之后，该处显示相应的悬浮框

1. angularjs 点击某处，在该处相应位置出现div悬浮框

在如下div注册ng-click事件：

  
更多记录

显示如下div悬浮框，注意style中的position要是absolute，设其id为“mySframe”，是否显示通过ng-show="myFrameShow"来控制，注意，如果想让悬浮框的背景图片随着悬浮框内容的宽度和高度变化而自适应变化，则应该将background-size的两个属性值都设成100%（宽度） 100%（高度）：

 

               悬浮框内容
 

angular js部分，myFrame()函数用于控制变量myFrameShow和悬浮框显示的位置，注意：悬浮框的position应该设置为auto，另外top和left设置为百分比可以让悬浮框根据屏幕放大缩小而移动。

$scope.myFrameShow=false;//初始化为不显示
 $scope.myFrame=function () {
            //悬浮框
            // $scope.myFrameShow=! $scope.myFrameShow;     
            $("#mySframe").css("position","auto").css("top","32%").css("left","-39%")
        };

2.angularjs 怎么获取鼠标焦点 鼠标移入显示浮动的div提示框 angularjs 怎么获取鼠标焦点 鼠标移入显示浮动的div提示框
这个参考此篇文章，给出例子如下所示：
鼠标悬浮该图片则显示悬浮框，鼠标移开则不显示悬浮框：

";

如下是id为mapNew的悬浮框

 悬浮框内容

angular js部分：

  $scope.nocameraInfo=function(){
            $scope.frameShow=false;
 };
 $scope.cameraInfo=function (event,data) {
  //悬浮框
  $scope.frameShow=true；
   console.log("鼠标焦点x坐标:"+window.event.x);
   console.log("鼠标焦点y坐标:"+window.event.y);
   $("#spSframe").css("position","fixed").css("top",(window.event.y +50) + "px").css("left",(window.event.x -90) + "px")
}

3. 实践中发现，window.event.x和window.event.y在Chrome浏览器能正常显示在相应的位置，但是IE浏览器貌似失效，经查询，原因应该是window.event： x,y 鼠标相对于当前浏览器的位置 ，各个浏览器有差别，所以解决方法是：先获取鼠标点击点的位置，然后再设置悬浮框的top和left，html部分同2，JS部分如下：

//获取鼠标坐标
            
            function mousePosition(ev){
                ev = ev || window.event;
                if(ev.pageX || ev.pageY){
                    return {x:ev.pageX, y:ev.pageY};
                      }
                return {
                    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                    y:ev.clientY + document.body.scrollTop - document.body.clientTop
                };
            }
            //获取鼠标点击点的位置
            var mousePos=mousePosition(window.event);
            console.log("top:"+mousePos.y);
            console.log("left:"+mousePos.x);
            $("#spSframe").css("position","fixed").css("top",(mousePos.y + 30) + "px").css("left",(mousePos.x -90) + "px");

其中：

• window.event： x,y 鼠标相对于当前浏览器的位置 ；
• clientX,clientY 鼠标当前相对于网页的位置 ；
• offsetX,offsetY 鼠标当前相对于网页中的某一区域的位置
• screenX,screenY 相对于用户显示器的位置

而：

• event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
• event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。
• event.offsetX、event.offsetY 鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。
• event.screenX、event.screenY 鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

还有：

• document.body.scrollLeft, 获取页面文档向右滚动过的像素数。
• document.body.clientLeft,获取body元素对象的左边框的宽度。