JS实现很酷的EMAIL地址添加功能实例
本文实例讲述了JS实现很酷的EMAIL地址添加功能的方法。分享给大家供大家参考。具体实现方法如下：
<html>
<head>
<title>JS实现很酷的EMAIL地址添加功能</title>
<styletype="text/css">
ul{list-style:none;margin:0;padding:0;}
li{margin:0;padding:0;}
#content{width:100%;}
#sendmail{float:left;width:60%;}
#friendlist{float:left;width:30%;}
#bxAddrFly{position:absolute;height:18px;width:46px;background:#EEE;border:1px#cccsolid;display:none;}
#tbAddrTree{width:126px;float:left;padding:5px;border:1px#7F9DB9solid;}
#tbAddrTreeli{width:100%;float:left;}
#tbAddrTreea{backgroud:#fff;width:100%;color:#494949;text-decoration:none;float:left;}
#tbAddrTreea:hover{background:#e5edf6;}
</style>
<scripttype="text/javascript">
varev={};
varflyDiv="bxAddrFly";
varinceptDiv="SendAddress";
varaddEvent="addAddress()";
functionoo(obj){return(document.getElementById)?document.getElementById(obj):document.all[obj];}
functionisNone(str){returnstr==null||str==""?true:false}
varBrowser=newObject();
Browser.isFirefox=(navigator.userAgent.toLowerCase().indexOf("firefox")!=-1);
if(Browser.isFirefox){extendEventObject();}
functionextendEventObject(){
window.constructor.prototype.__defineGetter__("event",function(){
varo=arguments.callee.caller;
vare;
while(o!=null){
e=o.arguments[0];
if(e&&(e.constructor==Event||e.constructor==MouseEvent))returne;
o=o.caller;
}
returnnull;
});
Event.prototype.__defineGetter__("srcElement",function(){ varnode=this.target; while(node.nodeType!=1)node=node.parentNode; returnnode; }); } window.onload=function(){ varaddrTree=oo('tbAddrTree'); addrTree.onmouseover=function(){addrTree_event(event)}; addrTree.onmouseout=function(){addrTree_event(event)}; addrTree.onclick=function(){addrTree_event(event)}; } functionaddrTree_event(e){ varmemberID,tr varee=e.srcElement; if(ee.tagName=="A"&&e.type=="mouseover"){ee.style.textDecoration="underline"} if(ee.tagName=="A"&&e.type=="mouseout"){ee.style.textDecoration=""} if(e.type=="click"&&e.srcElement.tagName=="A"){ varli=ee.parentNode.parentNode; ev.AddInfo="\""+li.getAttribute("memberName")+"\"<\""+li.getAttribute("email")+"\">" oo(flyDiv).innerHTML=li.getAttribute("memberName"); addrTree_add(e.clientX,e.clientY) } } functionaddrTree_add(ex,ey){ if(oo(flyDiv).style.display=='none'||oo(flyDiv).style.display==''){oo(flyDiv).style.display='block';} varinceptE=oo(inceptDiv); varinceptEX=inceptE.offsetTop; varinceptEY=inceptE.offsetLeft; while(inceptE=inceptE.offsetParent){ inceptEX+=inceptE.offsetTop; inceptEY+=inceptE.offsetLeft; } ev.flyArr=newArray(ex,ey,inceptEX,inceptEY,10); fly(flyDiv,addEvent); }
functionfly(flyObj,flyRun){ varobj,a=ev.flyArr,x,y if(flyObj!=null){ if(ev.flyObj!=null){ window.clearTimeout(ev.flyTm); ev.flyObj.style.top=-900; } a[5]=0; ev.flyObj=oo(flyObj); ev.flyRun=flyRun; }
obj=ev.flyObj; if(a[4]==null){a[4]=1} a[5]+=a[4]/Math.sqrt(Math.pow(a[2]-a[0],2)+Math.pow(a[3]-a[1],2)); if(a[5]>1){ obj.style.top=-900; eval(ev.flyRun); ev.flyObj=null; return; }
window.clearTimeout(ev.flyTm); x=(a[2]-a[0])*a[5]+a[0]; y=(a[3]-a[1])*a[5]+a[1]; obj.style.left=x; obj.style.top=y; document.body.style.overflowX="hidden"; ev.flyTm=window.setTimeout("fly()",10) }
functionaddAddress() { varkey=ev.AddInfo; if(oo(inceptDiv).value.indexOf(key)==-1) { oo(inceptDiv).value+=key+","; } } </script> </head> <body> <divid="content"> <divid="sendmail"> <inputname="textfield"type="text"id="SendAddress"size="70"> </div> <divid="friendlist"> <divid="tbAddrTree"> <ul> <limembername="张三"email="zhangsan@163.com"><nobr><a>张三</a></nobr></li> <limembername="李四"email="lisi@1126.com"><nobr><a>李四</a></nobr></li> <limembername="王五"email="wangwu@189.com"><nobr><a>王五</a></nobr></li> </ul> </div> <divid="bxAddrFly"></div> </div> </div> <br/> </body> </html>