tip.js
复制代码 代码如下:
function tips(obj,tag){
var tip = document.createelement('div'),arg= arguments[2],left,top; //创建tipbox
var bodywid= document.documentelement.clientwidth; //这里也可以替换为容器的宽度$(id).outerwidth();
var abs = obj.getelementsbytagname(tag);
tip.classname=tip_bd;
obj.appendchild(tip);
for(var i=0,len=abs.length;ihover(abs[i],function(){
var content = arg||this.getattribute('tip'),text;
left = position(this).left,top=position(this).top;
content?tip.innerhtml=content:tip.innerhtml=暂无内容！;
if(left+parseint(getstyle(tip,'width'))>bodywid) //判断当前位置是否超过最大宽度
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){//鼠标滑过函数
addevent(el,'mouseover',fnover);
addevent(el,'mouseout',fnout);
}
function addevent(el,type,fn){ //绑定事件
if(el.attachevent) {
el['e'+type+fn] = fn; //ie下拷贝元素引用,使this指向el对象而不是window
el[type+fn] = function(){el['e'+type+fn](window.event);}
el.attachevent('on'+type, el[type+fn]);
}else
el.addeventlistener(type, fn, false);
}
function position(el){//dom节点的绝对位置
if(el&&el.nodetype == 1)
return {'left':el.getboundingclientrect().left+document.documentelement.scrollleft,'top':el.getboundingclientrect().top+document.documentelement.scrolltop};
}
function getstyle(obj,stylename){//获取当前样式属性
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');
一个简单的类似title的提示效果，但现实内容可以很丰富，以上js另存为tip.js，下面是使用的demo。
复制代码 代码如下:
提示信息框
提示信息框
阅读了脚本之家今天发布的it文章《30个提高web程序执行效率的好经验》，这30条准则对我们web开发是非常有用的，不则是知其然而不知其所脚本之家以然。下面是我对这些准则的理解和分析，有些有关js性能的准则，我也测试了它们脚本之家的差异，大家可以下载demo页面，如有理解不正确的地方，请大家指教。