几个很有特点的网页代码效果 - 启步网（7ibu.com）网络、IT(挨踢)职业游民学习娱乐之家.

启步网 > 网站建设 > 网页制作

几个很有特点的网页代码效果

作者： sunhy 阅读：来源：启步网时间：2007-2-1 23:21:19

字体：小中大

今天又去蓝色的论坛逛了逛，嘿嘿，还颇有收获……

以下是几个很有意思的比较有个性的网页代码效果，都很有特点，发来与大家一起共享。 ^_^

一，由 cityvoice 发表的：

一个很简洁得滚动效果

代码非常简洁。
注：由于FF允许空白节点，所以吧UL,LI节点写到一行了，不然要用代码清除掉空白节点。

如果用图片做子节点，就可以看到很熟悉得滚动效果了:)

二，由 skycuilin 发表的：

Bmail联系人地址飞来飞去的效果

代码在IE6,Firefox1.7,Opera9下运行了一下应该没什么错误，如果有什么问题的话希望大家可以提出来。

其中fly函数块借鉴了Bmail的代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>博客邮箱飞来飞去效果演示</title>
<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}

//=================兼容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;
		});	
	}

//
	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">&nbsp;</div>
  </div>
</div>
</body>
</html>

责任编辑：一路狂奔

帐号：
密码：

Google提供的相关资源