浏览 4055 次
|
锁定老帖子 主题：类百度的小贴士
该帖已经被评为精华帖
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-06-26
最后修改：2010-06-26
这是好久以前写的，当时正在学习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(){
//AA是超链的ID，tipsWrap是显示在这个超链接下的tip
a = Tips("AA",{id:"tipsWrap",
show:function(){alert("show1")},
hide:function(){alert("hide1")}})
a.show().hide("close");//close是一个元素的id,点击它可以关掉这个tip
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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-06-28
写的挺好的，
如果添加一个option数组传参并且添加一些事件触发会更好（获得或失去焦点等） |
| 返回顶楼 | |
|
发表时间：2010-07-02
yining159 写道 写的挺好的，
如果添加一个option数组传参并且添加一些事件触发会更好（获得或失去焦点等） 呵呵，谢谢你的建议哈。 |
| 返回顶楼 | |
