JSP界面设置提示浮动框

最新推荐文章于 2022-11-28 16:44:05 发布

weixin_34150224

最新推荐文章于 2022-11-28 16:44:05 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lujiulong/p/6438719.html

1、公共js

<script type="text/javascript">
var tip={ 
    $:function(ele){ 
        if(typeof(ele)=="object") 
            return ele; 
        else if(typeof(ele)=="string"||typeof(ele)=="number") 
            return document.getElementById(ele.toString()); 
        return null; 
    }, 
    mousePos:function(e){ 
        var x,y; 
        var e = e||window.event; 
        return{ x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft, 
                y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop}; 
        }, 
    start:function(obj){ 
        var self = this; 
        var t = self.$("mjs:tip"); 
        obj.onmousemove=function(e){ 
            var mouse = self.mousePos(e);   
            t.style.left = mouse.x + 10 + 'px'; 
            t.style.top = mouse.y - 30 + 'px'; 
            t.innerHTML = obj.getAttribute("tips");
            if(t.innerHTML.trim() !=''){
                t.style.display = '';
            }
        }; 
        obj.onmouseout=function(){ 
            t.style.display = 'none'; 
        }; 
    } 
}
</script>

2、公共css

.tip{
  width:auto;
  max-width:200px;
  border:2px solid #ddd;
  padding:4px;
  background:#f1f1f1;
  color:#666;
}

3、在公共页面引入

<div id="mjs:tip" class="tip" style="position:absolute;left:0;top:0;display:none;"></div>

4、在需要提示的页面任意标签加入onmouseover="tip.start(this)" tips="提示信息"

如：

<input onmouseover="tip.start(this)" tips="提示信息" type="button" class="inputbtn btn-prime radius" id="payCompen" value="确认"/>

<img src="../images/wenhao.png" onmouseover="tip.start(this)" tips="提示信息" />

5、效果

转载于:https://www.cnblogs.com/lujiulong/p/6438719.html