读书人

浮动相助提示信息小方法

发布时间: 2013-11-06 16:26:37 作者: rapoo

浮动帮助提示信息小方法
依赖jQuery
直接可以调用
help_show(提示文本,宽度,背景色,类名);

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>help_show</title><meta name="author" content="随欲非凡" /><!-- Date: 2013-10-26 --><script src="jquery-1.9.1.js"></script> <style type="text/css">.hep3{background: #888}</style></head><body><div><p><input /></p><p>    <input /></p><div + className).hover(function(e) {          var x = e.clientX;          var y = e.clientY;          var div = "<div class='helpToolDiv'>" + text + "</div>";          $(this).after(div);          $(".helpToolDiv").css({             "width" : width,             "position" : "absolute",             "zIndex" : "99",             "word-wrap" : "break-Word",             "backgroundColor" : bgColor,             "paddingLeft" : "15px",             "paddingRight" : "15px",             "top" : y + 10 + "px",             "left" : x + 10 + "px",             "borderRadius" : "4px",             "boxShadow" : "4px 4px 4px #888"          });          $(".helpToolDiv").show();       }, function() {          $(".helpToolDiv").remove();       });    $('.helpTool').focus(function() {       $(".helpToolDiv").remove();    }); };//测试help_show("my_help","100px","gray","hep");help_show("aaaaaaaaaaaaaaaaaaaa","100px","blue","hep2");help_show("div测试中提示信息的显示","100px","red","hep3");help_show("按钮测试中提示信息的显示","100px","#888","hep4");</script></body></html>

读书人网 >Web前端

热点推荐