自己写的js鼠标提示框

最新推荐文章于 2020-12-03 14:40:40 发布

Death_Spank

最新推荐文章于 2020-12-03 14:40:40 发布

阅读量2.2k

点赞数

分类专栏： JavaScript 文章标签： microsoft function stylesheet border class internet

本文链接：https://blog.csdn.net/death_spank/article/details/6406806

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

由于浏览器的对title属性的鼠标提示效果太难看，自己写了简单的鼠标提示框，其实也就是一些简单的js，废话少说直接上代码。

JS：

Bubble.js

$(document).ready(function(){ //hover你懂的 $(".BubbleTitle").hover(function(){ $("#Bubble").show(); },function(){ $("#Bubble").html(""); $("#Bubble").hide(); }).mousemove(function(e){ //设置文本 $("#Bubble").html($(this).html()); //for dammit Microsoft Internet Explorer /*当时写到这里有个很有趣的现象，在IE中，当我在css里加上 word-wrap:break-word这个样式时，当页面有滚动条的时候而且没有对div设置宽度，它会以当前浏览器窗口大小换行，直接无视掉横向滚动条。google chrome中加了 word-break:break-all;也是一样，火狐中表现良好（个人一直觉得火狐比其他浏览器更智能） */ $("#Bubble").css({"word-wrap":"normal"}); /*获取鼠标坐标，用来设置提示窗口的left和top样式*/ var mousex = e.pageX +15; var mousey = e.pageY +15; var a=$(window).width(); var b=$(window).height(); //滚动条的位置 var scrollLeftval=$(window).scrollLeft(); var scrollTopval=$(window).scrollTop(); //设置width为auto是为了计算提示框的宽度 $("#Bubble").css("width","auto"); var spanwidth=$("#Bubble").width(); //提示框最大宽度为200px，小于就auto if(spanwidth >200){ $("#Bubble").css("width","200px"); spanwidth=200; //for dammit Microsoft Internet Explorer //刚才提到了IE换行的问题，大家可以把下面的css换到if语句外面 //然后将窗口弄出横向滚动条，测试一下ie中的以窗口换行的效果 $("#Bubble").css({"word-wrap":"break-word"}); } var spanheight=$("#Bubble").height(); //提示框距离窗口右间距，当右间距小于10的时候将提示框放到鼠标的左边。默认的是鼠标左右边15像素 var marginRight=$(window).width()-(mousex+spanwidth+10-scrollLeftval); if(marginRight <10){ mousex=e.pageX-spanwidth-15; } //下间距，同上 var marginBottom=$(window).height()-(mousey+spanheight+10-scrollTopval); if(marginBottom <10){ mousey=e.pageY-spanheight-15; } $("#Bubble").css({"top":mousey+"px","left":mousex+"px"}); }); });

CSS：

Bubble.css

#Bubble{ background-color:black; display:none; color:white; position:absolute; border:1px solid black; z-index:9; padding:5px; font-size: 9pt; font-family:"ＭＳゴシック","ＭＳＰゴシック","MS UI Gothic"; }

HTML：

<html> <head> <title>無題のページ</title> <mce:script type='text/javascript' src="jquery-1.4.4.js" mce_src="jquery-1.4.4.js"></mce:script> <mce:script type='text/javascript' src="Bubble.js" mce_src="Bubble.js"></mce:script> <link rel="stylesheet" type="text/css" href="Bubble.css" mce_href="Bubble.css"></link> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .tab1{ border-collapse: collapse; } .tab1 td{ border:1px solid black; }</style> </head> <body> <div> <table class="tab1"> <tr> <td > <span class="BubbleTitle">1111111111</span> </td> <td class="BubbleTitle"> 2222222222 </td> </tr> <tr> <td class="BubbleTitle"> 6666666hjkdfgsdgdsfg </td> <td class="BubbleTitle"> WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW </td> </tr> </table> <div id="Bubble">123123</div> </div> </body> </html>

测试结果要导入jquery

这里用的是<script type='text/javascript' src="jquery-1.4.4.js"></script>

今天发现有个让div换行的方法:white-space:nowrap;white-space:normal;