编程 Javascript

JS实现很酷的EMAIL地址添加功能实例

Posted in Javascript onFebruary 28, 2015

本文实例讲述了JS实现很酷的EMAIL地址添加功能的方法。分享给大家供大家参考。具体实现方法如下：

<html>

<head>

<title>JS实现很酷的EMAIL地址添加功能</title>

<style type="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 #ccc solid;display:none;}

#tbAddrTree{ width:126px; float:left; padding:5px;border:1px #7F9DB9 solid;}

#tbAddrTree li{ width:100%; float:left;}

#tbAddrTree a{backgroud: #fff;width: 100%;color:#494949;text-decoration: none;float:left;}

#tbAddrTree a:hover{background: #e5edf6;}

</style>

<script type="text/javascript">

var ev={};

var flyDiv="bxAddrFly";

var inceptDiv="SendAddress";

var addEvent="addAddress()";

function oo(obj){return (document.getElementById) ? document.getElementById(obj): document.all[obj];}

function isNone(str){return str==null||str==""?true:false}

var Browser = new Object();

Browser.isFirefox = (navigator.userAgent.toLowerCase().indexOf("firefox")!=-1);

if (Browser.isFirefox) { extendEventObject();}

function extendEventObject() {

window.constructor.prototype.__defineGetter__("event", function(){

var o = arguments.callee.caller;

var e;

while(o != null){

e = o.arguments[0];

if(e && (e.constructor == Event || e.constructor == MouseEvent)) return e;

o = o.caller;

}

return null;

});
Event.prototype.__defineGetter__("srcElement", function () {

var node = this.target;

while (node.nodeType != 1) node = node.parentNode;

return node;

});

}

window.onload = function(){

var addrTree = oo('tbAddrTree');

addrTree.onmouseover = function(){addrTree_event(event)};

addrTree.onmouseout = function(){addrTree_event(event)};

addrTree.onclick = function(){addrTree_event(event)};

}

function addrTree_event(e){

var memberID,tr

var ee = 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"){

var li=ee.parentNode.parentNode;

ev.AddInfo="\""+li.getAttribute("memberName")+"\"<\""+li.getAttribute("email")+"\">"

oo(flyDiv).innerHTML=li.getAttribute("memberName");

addrTree_add(e.clientX,e.clientY)

}

}

function addrTree_add(ex,ey){

if(oo(flyDiv).style.display=='none'||oo(flyDiv).style.display==''){oo(flyDiv).style.display='block';}

var inceptE = oo(inceptDiv);

var inceptEX = inceptE.offsetTop;   

var inceptEY = inceptE.offsetLeft;   

while(inceptE = inceptE.offsetParent){

inceptEX += inceptE.offsetTop;   

inceptEY += inceptE.offsetLeft;   

}

ev.flyArr=new Array(ex,ey,inceptEX,inceptEY,10);

fly(flyDiv,addEvent);

}
function fly(flyObj,flyRun){

var obj,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)

}
function addAddress()

{

var key=ev.AddInfo;

if (oo(inceptDiv).value.indexOf(key)==-1)

{

oo(inceptDiv).value+=key+",";

}

}

</script>

</head>

<body>

<div id="content">

  <div id="sendmail">

    <input name="textfield" type="text" id="SendAddress" size="70">

  </div>

  <div id="friendlist">

    <div id="tbAddrTree">

      <ul>

        <li membername="张三" email="zhangsan@163.com"><nobr><a>张三</a></nobr></li>

        <li membername="李四" email="lisi@1126.com"><nobr><a>李四</a></nobr></li>

        <li membername="王五" email="wangwu@189.com"><nobr><a>王五</a></nobr></li>

      </ul>

    </div>

    <div id="bxAddrFly"> </div>

  </div>

</div>

<br />

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js ondocumentready onmouseover onclick onmouseout 样式

Jul 22 Javascript

Javascript操作cookie的函数代码

Oct 03 Javascript

jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）

Feb 25 Javascript

jQuery点击弹出层弹出模态框点击模态框消失代码分享

Jan 21 Javascript

Vue上传组件vue Simple Uploader的用法示例

Aug 25 Javascript

JS库之Particles.js中文开发手册及参数详解

Sep 13 Javascript

JS实现分页浏览横向图片(类轮播)实例代码

Nov 06 Javascript

Angularjs实现页面模板清除的方法

Jul 20 Javascript

webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程

Jun 10 Javascript

Async/Await替代Promise的6个理由

Jun 15 Javascript

vue draggable resizable gorkys与v-chart使用与总结

Sep 05 Javascript

vue 组件开发原理与实现方法详解

Nov 29 Javascript

浅谈JavaScript数据类型及转换

Feb 28 #Javascript

javaScript基础语法介绍

Feb 28 #Javascript

jQuery实现的输入框选择时间插件用法实例

Feb 28 #Javascript

jQuery对象和DOM对象之间相互转换的方法介绍

Feb 28 #Javascript

JavaScript生成随机数的4种自定义函数分享

Feb 28 #Javascript

浅析JavaScript事件和方法

Feb 28 #Javascript

常用的JavaScript WEB操作方法分享

Feb 28 #Javascript