下面是之前在蓝色上看到的一个tooltip效果,不错,对它做了一些修改(比如之前只是对链接有tooltip效果,现在对图片也可以有这个效果)加了注释,是深入javascript深入UI学习的一个不错的例子.
当然,你可以在tooltip的基础上加入AJAX效果.(如果是文章发布系统,比较好的是文章会有个简介,AJAX把这部分内容放到tooltip中去.
说明:
原作者:不详(如果有人知道,email我,会及时修改)
修改者:草履虫
联系:caolvchong@gmail.com
转贴请说明上面一段
预览地址:http://mmchong.3322.org:81/tooltip/tooltip.html 本机上,有时可能访问不了
使用说明:
在需要的页面引用这段js,或者你把它写入js文件调用,并在window.onload中加入enable_tooltip();即可
//===============================tooltip效果函数================================
/*--->enableTooltips()
* 功能:调用tooltip效果
* 参数:无
* 返回:无
*/
function enable_tooltip(){
var links,i,h;
//是否支持DOM
if(!document.getElementById || !document.getElementsByTagName){
return;
}
//添加样式
add_css();
h=document.createElement("span");
h.setAttribute("id","btc");
h.style.position="absolute";
document.getElementsByTagName("body")[0].appendChild(h);
//遍历链接,添加tooltip事件
for(i=0;iPrepare(el)
* 功能:实现tooltip的显示,删除,透明度等功能
* 参数:
* el:受作用节点
* 返回:无
*/
function Prepare(el){
//变量说明:
//tooltip:tooltip效果的整体,装载在id为btc的span标签中
//s:显示链接的title,tooltip的上半部分效果
//t:title的值
//b:显示链接的href,tooltip下半部分效果
//l:链接内容,就是href的值
var tooltip,t,b,s,l;
t=el.getAttribute("title");
if(t==null || t.length==0){
return;
}
//去掉该节点的title属性
if(el.getAttribute("title")){
el.removeAttribute("title");
}
if(el.getAttribute("alt")){
el.removeAttribute("alt");
}
//创建节点tooltip,标签为span,设置class属性值为tooltip
tooltip=CreateEl("span","tooltip");
//创建节点s,标签为span,设置class属性值为top.s节点是用来显示a链接的title内容
s=CreateEl("span","top");
s.appendChild(document.createTextNode(t));
tooltip.appendChild(s);
//创建节点b,标签为span,设置class属性值为bottom.b节点是用来显示a的链接的href内容
b=CreateEl("b","bottom");
l=el.getAttribute("href") || el.getAttribute("src");
if(l.length>30) l=l.substr(0,27)+"...";
b.appendChild(document.createTextNode(l));
tooltip.appendChild(b);
//设置透明度
setOpacity(tooltip);
el.tooltip=tooltip;
//节点的鼠标移到上面事件:显示tooltip
el.onmouseover=showTooltip;
//节点的鼠标移出事件:移除tooltip
el.onmouseout=hideTooltip;
//节点的鼠标在上面移动事件:只要调整位置
el.onmousemove=Locate;
}
/*--->add_css()
* 功能:动态添加样式
* 参数:无
* 返回值:无
*/
function add_css(){
var l=CreateEl("link");
l.setAttribute("type","text/css");
l.setAttribute("rel","stylesheet");
l.setAttribute("href","css/tooltip.css");
l.setAttribute("media","screen");
document.getElementsByTagName("head")[0].appendChild(l);
}
/*--->CreateEl(t,c)
* 功能:创建一个标签节点,并设置它的css属性
* 参数:
* t:要创建的标签名
* c:要创建的css的class名
* 返回:创建的节点
*/
function CreateEl(t,c){
var x=document.createElement(t);
x.className=c;
x.style.display="block";
return(x);
}
/*--->setOpacity(el)
* 功能:设置tooltip的透明度
* 参数:tooltip当前节点
* 返回值:无
*/
function setOpacity(el){
el.style.filter="alpha(opacity:75)";
el.style.KHTMLOpacity="0.75";
el.style.MozOpacity="0.75";
el.style.opacity="0.75";
}
/*--->showTooltip(e)
* 功能:显示tooltip,并设置位置
* 参数:
* e:事件,这里接受a的onmouseover
* 返回:无
* 说明:由于是把tooltip节点做为孩子加入btc节点,所以后面删除只要移除tooltip节点即可.
* 而tooltip是第一个孩子,所以removeChild掉firstChild即可
*/
function showTooltip(e){
document.getElementById("btc").appendChild(this.tooltip);
Locate(e);
}
/*--->hideTooltip(e)
* 功能:移除tooltip显示
* 参数:
* e:事件,这里接受a的onmouseout事件
* 返回:无
*/
function hideTooltip(e){
//获取tooltip节点
var d=document.getElementById("btc");
if(d.childNodes.length>0) d.removeChild(d.firstChild);
}
/*--->Locate(e)
* 功能:设置tooltip的位置
* 参数:
* e:事件,,这里接受a的onmousemove
* 返回:无
*/
function Locate(e){
var posx=0,posy=0;
if(e==null) e=window.event;
if(e.pageX || e.pageY){
posx=e.pageX; posy=e.pageY;
}else if(e.clientX || e.clientY){
if(document.documentElement.scrollTop){
posx=e.clientX+document.documentElement.scrollLeft;
posy=e.clientY+document.documentElement.scrollTop;
}else{
posx=e.clientX+document.body.scrollLeft;
posy=e.clientY+document.body.scrollTop;
}
}
document.getElementById("btc").style.top=(posy+10)+"px";
document.getElementById("btc").style.left=(posx-20)+"px";
}
代码请以范例下载包中为准
Powered By