浮动帮助提示信息小方法

最新推荐文章于 2024-09-14 12:37:34 发布

奇兵解码

最新推荐文章于 2024-09-14 12:37:34 发布

阅读量191

点赞数

分类专栏： js技术文章标签： html js ViewUI

本文链接：https://blog.csdn.net/u012329643/article/details/84492843

版权

js技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

依赖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 class="hep" />	
			</p>
			<p>
		    <input class="hep2" />	
			</p>
			<div class="hep3">测试测试</div>
			<button class="hep4">按钮</button>
		</div>

<script type="text/javascript">
//
	help_show=function(text,width,bgColor,className) { 
      $("." + 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>