第一步: 定義提示的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="{"required":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 };
}
實現效果如下圖,
是跟隨鼠標位置進行顯示,如有幫助贊一下唄或者評論一波唄,謝謝了老鐵