`
ziyuewang
  • 浏览: 40494 次
  • 性别: Icon_minigender_2
  • 来自: 济南
社区版块
存档分类
最新评论

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

JavaScriptOperaXHTMLHTML 
阅读更多

截图 :

 

代码 :

 

<!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>
 
分享到：
| JQuery遮罩层
评论
3 楼 soft_xiaohui 2011-04-28  
谢谢分享，学习了。
2 楼 ziyuewang 2011-04-19  
谢谢您的建议，我会把它从写的！(*^__^*) 嘻嘻……
1 楼 xisuchi 2011-04-19  
拉到最右边，屏幕会出现滚动条.
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics