angularjs 實現移入鼠標懸浮提示

第一步: 定義提示的div,在這裏面自行改顯示的樣式

<div id="floatDiv" style="display: none; position: absolute; background-color: #7d8489; width: 150px;"></div>

第二步:在一個要使用此功能的input框裏定義方法名、定義id值、並寫出對應的js函數,如:ng-mouseover=“spSframe()”

 <input ht-input="item.PRO_NAME_" desc="項目名稱" class="form-control" readonly="" id="input" ng-mouseover="spSframe()" type="text" ng-model="item.PRO_NAME_" permission="permission.fields.gc_repay_bill.PRO_NAME_" ht-validate="{&quot;required&quot;:false}"/>

js如下:

$scope.spSframe =function(){
    var inputId = ['input','input1','input2','input3','input4','input5'];//需要浮動顯示內容的input id
            var floatDiv = document.getElementById('floatDiv');
            for(var k = 0; k < inputId.length; k++ ){
                var input = document.getElementById(inputId[k]);
                //顯示浮動窗
                input.onmouseover = function (ev){ 
                    var windowEvent = window.event; //避免windowEvent丟失
                    setTimeout(function(){
                        floatDiv.innerText = ev.toElement.value || '(空)';
                        floatDiv.style.display = 'block';
                        var mousePosition = getMousePos(windowEvent); //獲取鼠標位置
                        floatDiv.style.left = mousePosition.x + 'px';
                        floatDiv.style.top =  mousePosition.y + 'px';
                    },200);
                };
              //隱藏浮動窗
                input.onmouseout = function (ev) {   
                    floatDiv.style.display = 'none';
                };
               
            }
  };
   
  //獲取鼠標相當於文檔位置
    function getMousePos(event) {
       var e = event || window.event;
       var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
       var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
       var x = e.pageX || e.clientX + scrollX;
       var y = e.pageY || e.clientY + scrollY;
       //alert('x: ' + x + '\ny: ' + y);
       return { 'x': x, 'y': y };
    }

實現效果如下圖,
在這裏插入圖片描述
是跟隨鼠標位置進行顯示,如有幫助贊一下唄或者評論一波唄,謝謝了老鐵

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章