Bmail联系人飞来飞去效果

好久没来了。本来想利用此贴写一些关于表现,行为和结构分离的东西,但是一直没什么时间,而且这段代码写的很匆忙,所以只好另找时间了。代码在IE6,Firefox1.7,Opera9下运行了一下应该没什么错误,如果有什么问题的话希望大家可以提出来。
其中fly函数块借鉴了Bmail的代码

博客邮箱飞来飞去效果演示

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}

//=================兼容Firefox/Event=================
//因为要将表现与行为分离所在此处浪费了很多代码
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")+"\""
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=''}
//此处获取控件的坐标
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+",";
}
}

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:15px; width:50px;background:#e5edf6; border:1px #7F9DB9 solid;}
#tbAddrTree{ width:190px; float:left; padding:4px;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}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • Bmail联系人飞来飞去效果

    好久没来了.本来想利用此贴写一些关于表现,行为和结构分离的东西,但是一直没什么时间,而且这段代码写的很匆忙,所以只好另找时间了.代码在IE6,Firefox1.7,Opera9下运行了一下应该没什么错误,如果有什么问题的话希望大家可以提出来. 其中fly函数块借鉴了Bmail的代码 博客邮箱飞来飞去效果演示 var ev={}; var flyDiv="bxAddrFly";//发送的层 var inceptDiv="SendAddress";//负责接收层效果的控

  • 使用snowfall.jquery.js实现爱心满屏飞的效果

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 :after画两个重叠在一起的长方形,如图所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style medi

  • javascript+css实现单击颜色褪去效果

    Untitled Document p{ font-size: 12px; font-family: Arial; } input{ cursor: pointer; } function flash(ts){ var p_obj=document.getElementsByTagName("p")[0]; if(ts "黄褪"效果 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 设计引导--一个鸭子游戏引发的设计理念(多态,继承,抽象,接口,策略者模式)

    这篇博文是从实际生活中,提炼出来的设计理念,它现在是骨架,现在我加以代码实例,完成程序的血肉,以求让大家活生生的体会设计中的精髓. 自从我们学习面向对象编程以来,它方便了我们的思维思考模式,一个事物具备什么,就以对应的属性及方法加之. (▽) 没有什么难的,但是你学到的是最基础的语法和连自己都不是很了解的语言,用一段C语言程序,你可以很轻松的把它改成C#,JAVA等,这有什么难的?大多数程序员们扭曲了C#语言,把C的语法都移植到C#上(在我不了解C#的时候,我自己都这么做过),错了不可怕,可怕的

  • 使用compose函数优化代码提高可读性及扩展性

    目录 前言 场景说明 需求更新 需求再更新 需求再再更新 compose 函数 composePromise 逐渐美丽起来 阶段总结 前言 本瓜知道前不久写的<JS 如何函数式编程>系列各位可能并不感冒,因为一切理论的东西如果脱离实战的话,那就将毫无意义. 于是乎,本瓜着手于实际工作开发,尝试应用函数式编程的一些思想. 最终惊人的发现:这个实现过程并不难,但是效果却不小! 实现思路:借助 compose 函数对连续的异步过程进行组装,不同的组合方式实现不同的业务流程. 这样不仅提高了代码的可读

  • 全面了解CSS

    自从 Dreamweaver MX 2004 发布以来,我曾经无数次向 Dreamweaver 的新老用户演示它的新特征和新功能.每次进行产品演示,我很快就会极力称赞 Dreamweaver MX 2004 设计和呈现 CSS(或层叠样式表)的新功能.本篇详细\全面了解CSS. 然而最近某位新用户问了一个问题,说实话,这个问题一下子让我张口结舌.这位用户只是问:"我为什么要使用 CSS?"当时我意识到,尽管我们这些每天与 HTML 和 CSS 打交道的人非常了解 CSS 的优点,但仍有

  • 360doc网站不登录就无法复制内容的解决方法

    有时候我们在搜索东西的时候,有时候实在找不到内容,只有360doc有的内容就没办法了,只能凑合看了,看中了内容无法复制,提示要粘贴怎么解决呢,这里就为大家整理一下,需要的朋友可以参考一下 能有时候,你在360doc上发现了一篇好的文章,也可能你已经去尝试过复制360doc的文章内容,但这时候,它会给你弹出一个提示窗口,让你注册他们的账户,然后才可以保存文章(先淡定的鄙视一下 :-D ),这种做法很让人讨厌,而且还有满篇的广告飞来飞去,让人根本就没有办法好好的去看内容. 下面的方法从简单到复杂(麻

  • Android系统联系人全特效实现(上)分组导航和挤压动画(附源码)

    记得在我刚接触Android的时候对系统联系人中的特效很感兴趣,它会根据手机中联系人姓氏的首字母进行分组,并在界面的最顶端始终显示一个当前的分组.如下图所示:  最让我感兴趣的是,当后一个分组和前一个分组相碰时,会产生一个上顶的挤压动画.那个时候我思考了各种方法想去实现这种特效,可是限于功夫不到家,都未能成功.如今两年多过去了,自己也成长了很多,再回头去想想这个功能,突然发现已经有了思路,于是立刻记录下来与大家分享. 首先讲一下需要提前了解的知识点,这里我们最需要用到的就是SectionInde

  • Android手机联系人快速索引(手机通讯录)

    最近需要实现一个手机通讯录的快速索引功能.根据姓名首字母快速索引功能.下面是一个手机联系人快速索引的效果,总体来说代码不算难,拼音转换的地方略有复杂.下面上源码:源码中有注释. 下面是效果图: MainActivity: import java.util.ArrayList; import java.util.Collections; import java.util.List; import android.app.Activity; import android.os.Bundle; imp

  • js+css实现打字效果

    本文实例为大家分享了JavaScript实现打字效果的具体代码,供大家参考,具体内容如下 1.效果 2.源码 <html> <head> <style type="text/css"> #myDiv{ display: inline-block; width:500px; height:300px; background-color:rgba(0,0,0,0.3); color:hsla(0,100%,70%,1); word-wrap:break-

随机推荐