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程序设计有所帮助。

Javascript 相关文章推荐
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
vue时间格式化实例代码
Jun 13 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 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
You might like
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
Python文件去除注释的方法
2015/05/25 Python
python简单实现刷新智联简历
2016/03/30 Python
在python中用url_for构造URL的方法
2019/07/25 Python
Python帮你识破双11的套路
2019/11/11 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
Python-split()函数实例用法讲解
2020/12/18 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
2014社区三八妇女节活动方案
2014/03/30 职场文书
工地安全质量标语
2014/06/07 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
护士辞职信怎么写
2015/02/27 职场文书
民主生活会意见
2015/06/05 职场文书
入党转正申请书范文
2019/05/20 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL