JavaScript-Tooltip揭示（很早以前写的）-JavaSript-爱易网页

JavaScript-Tooltip揭示（很早以前写的）

日期：2014-05-16　浏览次数：20384 次

JavaScript---Tooltip提示（很早以前写的）

截图 :

代码 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
 <HEAD>
  <TITLE>提示窗</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
.aaa {
	          background-color :#999 ;
	          text-align : left ;
	          margin : 0 auto ;
	          padding : 0px ;
	          font-size : 13px ;
	          font-family : arial ;
	          color : white ;
	          width : 760px ;
	          height : 32px ;
	          line-height : 32px ;
	          border : none ;
	          font-weight : bold ;
	         cursor : pointer ;
	        
	       }



	#toolTip {
		    border : 1px solid #4e514e ;
		    width : 420px ;
		    height : 32px ;
		    line-height : 32px ;
		    display : none ;
		    position : absolute ;
		    font-size : 12px ;
		    font-family : arial ;
		    background-color : #FFFF77 ;
		    color : black ;
		    padding : 0px ;
		    margin : 0px ;
			text-align : center ;
		} 
  </style>



  <script>
var $ = function(sId){
	return ('string' == typeof sId) ? document.getElementById(sId) : sId ; 
}
function isIE(){
	 return (document.all && window.ActiveXObject && !window.opera) ? true : false ;
}

var createToolTip = function(){
	$("aaa").onmouseover = function(ev){
	var ev = ev || window.event ;
	if(isIE()){
		$("toolTip").style.filter = 'alpha(opacity=75)' ;
	}else{
		$("toolTip").style.opacity = 0.75 ;
	 }
	$("toolTip").style.top = ev.clientY + 'px' ;
	$("toolTip").style.left = ev.clientX + 'px' ;
	$("toolTip").style.display = 'block' ;
  }
	$("aaa").onmousemove = function(ev){
	var ev = ev || window.event ;
	$("toolTip").style.top = ev.clientY + 10 + 'px' ;
	$("toolTip").style.left = ev.clientX + 5 + 'px' ;
 }
	$("aaa").onmouseout = function(){
	$("toolTip").style.display = 'none' ;
	}
}
	window.onload = createToolTip ;
  </script>
 </HEAD>

 <BODY>
<div id="aaa" class="aaa">这是测试数据</div>
<div id='toolTip'>toolTip提示条</div>
 </BODY>
</HTML>

1 楼 xisuchi 2011-04-19

拉到最右边，屏幕会出现滚动条.

2 楼 ziyuewang 2011-04-19

谢谢您的建议，我会把它从写的！(*^__^*) 嘻嘻……

3 楼 soft_xiaohui 2011-04-28

谢谢分享，学习了。

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JavaScript-Tooltip揭示（很早以前写的）

相关资料更多>

推荐阅读更多>