myHoverTip.js 1.2 KB

123456789101112131415161718192021222324252627282930
  1. /*
  2. *简单的提示信息控件,这个控件是我写的最简单的一个控件,只供参考,有问题可以联系我,这个控件基于jquery框架的必须引入JQUERY框架
  3. 把我的代码复制到一个js文件里,然后引用就可以了
  4. 当鼠标移动上去显示一个层,在这个对象的旁边,并且可以给这个层添加值
  5. */
  6. //参数介绍:divId是你要浮动显示层的ID,value你要给这个提示层里面放的值
  7. $.fn.myHoverTip = function(divId, value) {
  8. var div = $("#" + divId); //要浮动在这个元素旁边的层
  9. div.css("position", "absolute");//让这个层可以绝对定位
  10. var self = $(this); //当前对象
  11. self.hover(function() {
  12. div.css("display", "block");
  13. var p = self.position(); //获取这个元素的left和top
  14. var x = p.left + self.width();//获取这个浮动层的left
  15. var docWidth = $(document).width();//获取网页的宽
  16. if (x > docWidth - div.width() - 20) {
  17. x = p.left - div.width();
  18. }
  19. div.css("left", x);
  20. div.css("top", p.top);
  21. div.html(value);
  22. },
  23. function() {
  24. div.css("display", "none");
  25. }
  26. );
  27. return this;
  28. }