Tip.js
Copy Code code as follows:
function Tips (obj,tag) {
var tip = document.createelement (' div '), arg= arguments[2],left,top; Create Tipbox
var bodywid= document.documentElement.clientWidth; This can also be replaced with the width of the container $ (ID). Outerwidth ();
var abs = Obj.getelementsbytagname (tag);
Tip.classname= "TIP_BD";
Obj.appendchild (TIP);
for (Var i=0,len=abs.length;i<len;i++) {
Hover (Abs[i],function () {
var content = Arg| | This.getattribute (' Tip '), text;
left = position (this). Left,top=position (this). Top;
Content?tip.innerhtml=content:tip.innerhtml= "No content!" ";
if (Left+parseint (GetStyle (Tip, ' width ')) >bodywid//Determine whether the current position exceeds the maximum width
Text= ' right: ' + (bodywid-left) + ' px;left:auto; ';
Else
Text= ' Left: ' + (left+this.offsetwidth) + ' px; ';
Text + + ' top: ' + (top+this.offsetheight) + ' px; ';
Tip.style.csstext=text;
Text= ';
tip.style.display= ' block ';
},function () {
Tip.style.display= ' None ';
});
}
}
function hover (el,fnover, fnout) {//mouse over functions
Addevent (el, ' MouseOver ', fnover);
Addevent (el, ' Mouseout ', fnout);
}
function Addevent (EL,TYPE,FN) {//binding event
if (el.attachevent) {
el[' e ' +type+fn] = fn; IE copy element reference so that this points to the El object instead of window
EL[TYPE+FN] = function () {el[' E ' +type+fn] (window.event);}
El.attachevent (' On ' +type, EL[TYPE+FN]);
}else
El.addeventlistener (Type, FN, false);
}
The absolute position of the function position (EL) {//dom node
if (El&&el.nodetype = 1)
return {"Left": El.getboundingclientrect (). Left+document.documentelement.scrollleft, ' top ': El.getboundingclientrect (). Top+document.documentelement.scrolltop};
}
function GetStyle (obj,stylename) {//Get current style properties
if (Obj.currentstyle)//ie
return Obj.currentstyle[stylename];
else{//FF
var $arr =obj.ownerdocument.defaultview.getcomputedstyle (obj, null);
return $arr [StyleName];
}
}
Tips (document.getElementById (' tips '), ' a ');
A simple similar to the title of the hint effect, but the actual content can be very rich, the above JS Save as Tip.js, the following is the use of the demo.
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta http-equiv= "x-ua-compatible" content= "Ie=emulateie7"/>
<meta name= "Copyright" content= ""/>
<meta name= "keywords" content= ""/>
<meta name= "description" content= ""/>
<title> Hint info box </title>
<link rel= "stylesheet" type= "Text/css" href= "Style/css/tip.css"/>
<style>
#wrap {line-height:22px;padding:20px;}
#tips. tip_bd{border:1px solid green;width:100px;position:absolute;background: #fff; z-index:9999;text-align:center ;d Isplay:none;}
#tips {border:1px solid #ccc;p adding:0 10px;}
</style>
<body>
<br/><br/><br/><br/>
<div id= "Tips" >
Read the <a href= "#" tip= "cloud-Habitat Community" > Cloud Communities </a> today's it article "30 good practices for improving the efficiency of Web Programs", which are very useful for our web development, but don't know what it is < A href= "#" tip= "cloud-dwelling Community 2" > Cloud Habitat Community </a> The following is my understanding of these guidelines and analysis, some of the criteria for JS performance, I also tested their <a href= "#" > Cloud Habitat </a> Differences, we can download demo page, if there is not the correct understanding of the place, please advise.
</div>
</body>
<script type= "Text/javascript" src= "Tips.js" ></script>
