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 相关文章推荐
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
浅谈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
js模拟滚动条(横向竖向)
2013/02/22 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
详解在Python中处理异常的教程
2015/05/24 Python
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
Python探索之pLSA实现代码
2017/10/25 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
Django时区详解
2019/07/24 Python
Python中函数的返回值示例浅析
2019/08/28 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
CAD制图设计师自荐信
2014/01/29 职场文书
旅游网创业计划书
2014/01/31 职场文书
带病坚持工作事迹
2014/05/03 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
企业员工集体活动方案
2014/08/17 职场文书
捐助感谢信
2015/01/22 职场文书
追悼词范文大全
2015/06/23 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python
Go 语言结构实例分析
2021/07/04 Golang
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript