DHTML页面飞动与随机出现名人名言效果

本文主要是介绍DHTML页面飞动与随机出现名人名言效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

< html xmlns ="http://www.w3.org/1999/xhtml" >

< head >

< title > 博客邮箱飞来飞去效果演示 </ title >

< script type ="text/javascript" >

/**

* @author cuilin www.cuilin.name

* @mail:cuilin0@gmail.com

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")+""<""+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 >

< 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:15px; width:50px;background:#e5edf6; border:1px #7F9DB9 solid;display:none;}

#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;}

</ style >

</ 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 ="test0" email ="test0@163.com" >< nobr >< a > test0 </ a ></ nobr ></ li >

< li membername ="test1" email ="test1@163.com" >< nobr >< a > test1 </ a ></ nobr ></ li >

< li membername ="test2" email ="test2@163.com" >< nobr >< a > test2 </ a ></ nobr ></ li >

< li membername ="test3" email ="test3@163.com" >< nobr >< a > test3 </ a ></ nobr ></ li >

< li membername ="test4" email ="test4@163.com" >< nobr >< a > test4 </ a ></ nobr ></ li >

< li membername ="test5" email ="test5@163.com" >< nobr >< a > test5 </ a ></ nobr ></ li >

< li membername ="test6" email ="test6@163.com" >< nobr >< a > test6 </ a ></ nobr ></ li >

< li membername ="test7" email ="test7@163.com" >< nobr >< a > test7 </ a ></ nobr ></ li >

</ ul >

</ div >

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

</ div >

</ body >

</ html >

另附代码：名人名言,每次刷新都不同。

< div id ="footer" >

< div id ="innerFooter" >

< SCRIPT LANGUAGE ="JavaScript" src ="http://www.fnqn.com/Adage/Adage.js" ></ SCRIPT >

< div id ="processtime" >

</ div >

转自【蓝色经典论坛http://bbs.blueidea.com/thread-2716964-1-1.html】 <script type="text/javascript" src="http://www.google.com/reader/ui/publisher.js"></script> <script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&callback=GRC_p(%7Bc%3A%22green%22%2Ct%3A%22%5Cu8FD9%5Cu4E9B%5Cu6587%5Cu7AE0%5Cu4E5F%5Cu503C%5Cu5F97%5Cu4E00%5Cu770B%22%2Cs%3A%22false%22%7D)%3Bnew%20GRC"></script>

这篇关于DHTML页面飞动与随机出现名人名言效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！