这是好久以前写的,当时正在学习Javascript。看见百度空间里总有一个小贴士的东西,挺好玩的,就把它的的图片都保存下来了,模仿它的样式做的一个东西,项目里有时就能用的上哦,呵呵。虽然代码写的很烂,但还是能用的。如果有人也有这样的需要,可以下来用哈。
主要功能就是:可以在页面的某一个元素下显示一个小贴士。
主要功能就是:可以在页面的某一个元素下显示一个小贴士。
var Tips = function(){
var ie = document.all;
function domLocation(node){
var left , top , right , bottom;
left = top = right = bottom = 0;
var n = node;
while (n) { left += n.offsetLeft, top += n.offsetTop; n = n.offsetParent; };
right = left + node.offsetWidth; bottom = top + node.offsetHeight;
return {"left":left,"right":right,"top":top,"bottom":bottom,"width":node.offsetWidth,"height":node.offsetHeight}
}
function g(id){return "string" == typeof id ? document.getElementById(id) : id}
function getOpacity(domOpacity){return ie ? parseInt(domOpacity.replace(/[^\d]/ig, "")) : parseFloat(domOpacity);}
return function(nodeId, options){
var dom = g(options.id);
function show(){
if(dom.style["display"] == "block") return;
var loc = domLocation(g(nodeId));
with(dom.style){
display = "block";
left = loc.left - loc.width/2+"px";
top = loc.top + loc.height+"px";
ie ? filter = "alpha(opacity=0)" : opacity = ".0";
}
var t = window.setInterval(function(){
var opacityNum = 10;
var opacity = ie ? getOpacity(dom.style["filter"]) : getOpacity(dom.style["opacity"]) * 100;
ie ? dom.style["filter"] = "alpha(opacity="+(opacity+opacityNum)+")"
: dom.style["opacity"] = (opacity + opacityNum) / 100;
if((ie && opacity > 100) || (!ie && opacity/100 > 0.9 )){
if(!ie) dom.style.opacity = "1"
window.clearInterval(t);
}
},50);
if(options.show) options.show.call(this);
return this;
}
function hide(id){
g(id).onclick = function(){
dom.style.display = "none";
if(options.hide) options.hide.call(this);
}
return this;
}
return {
"show":show,"hide":hide
}
}
}();
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度Tips</title>
<link type="text/css" rel="stylesheet" href="css/BTips.css" />
<script type="text/javascript" src="BTips.js"></script>
<script type="text/javascript">
var a,b;
window.onload = function(){
a = Tips("AA",{id:"tipsWrap",
show:function(){alert("show1")},
hide:function(){alert("hide1")}})
a.show().hide("close");
b = Tips("BB",{id:"BBWrap"})
b.show().hide("BBClose");
}
</script>
</head>
<body>
<!-- 超链接一 -->
<div style="margin:100px;width:140px;height:20px;"><a href="#" id="AA" onclick="a.show()">这是一个超链接.....</a></div>
<!-- 超链接二 -->
<div style="margin:100px;width:140px;height:20px;"><a href="#" id="BB" onclick="b.show()">这是一个超链接.....</a></div>
<div class="tipsWrap" id="tipsWrap">
<div class="top">
<div class="row"></div>
<div class="topLine"></div>
</div>
<div class="content">
<div class="inCon">
<a class="close" href="javascript:" id="close"></a>
<span>
这是一个百度的tips
</span>
</div>
</div>
<div class="bottom"></div>
</div>
<div class="tipsWrap" id="BBWrap">
<div class="top">
<div class="row"></div>
<div class="topLine"></div>
</div>
<div class="content">
<div class="inCon">
<a class="close" href="javascript:" id="BBClose"></a>
<span>
这是一个百度的tips
</span>
</div>
</div>
<div class="bottom"></div>
</div>
</body>
</html>