div javascript 鼠标划过变动网易特效代码 随机一个UL li

大 | 中 | 小

主内容如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">

</style><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Copyright" content="懒人图库 http://lanren.makewing.com/" />
<meta name="description" content="学会偷懒，并懒出境界是提高工作效率最有效的方法！" />
<meta content="懒人图库" name="keywords" />
<title>懒人图库</title>
<link href="tab/css/jia.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
//<![CDATA[
// 163 AJAX Tab
// update 2006.10.18
// 增加鼠标延迟感应特性。
// update 2006.10.8
// A 标签 href 属性将保持原有HTML功能。增加urn属性为AJAX Load 路径。
// update 2006.10.11
// 修正IE5.0 undefined 未定义错误，增加脚本错误屏蔽
var Browser = new Object();
Browser.isMozilla = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument!='undefined');
Browser.isIE = window.ActiveXObject ? true : false;
Browser.isFirefox = (navigator.userAgent.toLowerCase().indexOf("firefox")!=-1);
Browser.isOpera = (navigator.userAgent.toLowerCase().indexOf("opera")!=-1);
if (Browser.isFirefox) { // entend Event Mod for FireFox
extendEventObject();
}
function extendEventObject() {
Event.prototype.__defineGetter__("srcElement", function () {
var node = this.target;
while (node.nodeType != 1) node = node.parentNode;
return node;
});

Event.prototype.__defineGetter__("fromElement", function () {
var node;
if (this.type == "mouseover")
node = this.relatedTarget;
else if (this.type == "mouseout")
node = this.target;
if (!node) return;
while (node.nodeType != 1) node = node.parentNode;
return node;
});

Event.prototype.__defineGetter__("toElement", function () {
var node;
if (this.type == "mouseout")
node = this.relatedTarget;
else if (this.type == "mouseover")
node = this.target;
if (!node) return;
while (node.nodeType != 1) node = node.parentNode;
return node;
});
}
function IsChild(cNode,pNode){
while(cNode!=null){
cNode=cNode.parentNode;
if(cNode==pNode) return true;
}
return false;
}


var ajccache=new Object();
var waitInterval;
var tempref;
var MouseDelayTime=150;//鼠标感应延迟300毫秒
function getTBprefixName(str,sta){
if(str.indexOf("active")!=-1 || str.indexOf("normal")!=-1) str=str.substr(6);
else if(str.indexOf("over")!=-1) str=str.substr(4);
else str="";
return sta+str;
}
function startajaxtabs(){
for(var i=0;i<arguments.length;i++)
{
var ulobj=document.getElementById(arguments[i]);
ulist=ulobj.getElementsByTagName("li");
for(var j=0;j<ulist.length;j++)
{
var thelist=ulist[j];
if(thelist.parentNode.parentNode!=ulobj) continue;//只有第一层li有效 fixed 2006.9.29
var ulistlink=thelist.getElementsByTagName("a")[0];
var ulistlinkurl=ulistlink.getAttribute("urn");
var ulistlinktarget=ulistlink.getAttribute("rel");
thelist.setActive=function(bactive){
if(bactive){
this.status="active";
this.className=getTBprefixName(this.className,"active");
}else{
this.status="normal";
this.className=getTBprefixName(this.className,"normal");
}
}
thelist.LoadTab=function(){
this.setActive(true);
this.parentNode.parentNode.activetab.setActive(false);
this.parentNode.parentNode.activetab=this;
var ulistlink=this.getElementsByTagName("a")[0];
loadAJAXTab(ulistlink.getAttribute("urn"),ulistlink.getAttribute("rel"));
}
thelist.onmouseover=function(aEvent){
var myEvent = window.event ? window.event : aEvent;
var fm=myEvent.fromElement;
if(IsChild(fm,this) || fm==this) return;//过滤子元素event
if(this.status=="active") return;
tempref=this;
clearTimeout(waitInterval);
waitInterval=window.setTimeout("tempref.LoadTab();",MouseDelayTime);
}

thelist.onmouseout=function(aEvent){
var myEvent = window.event ? window.event : aEvent;
var em=myEvent.toElement;
if(IsChild(em,this) || em==this) return; //过滤子元素event
if(this.status=="active") return;
clearTimeout(waitInterval);
}

if(ulistlinkurl.indexOf("#default")!=-1){
thelist.setActive(true);
ulobj.activetab=thelist;
ajccache[ulistlinkurl]=getElement(ulistlinktarget).innerHTML;
}else{
thelist.setActive(false);
}

}
if(ulobj.activetab==null) ulobj.activetab=ulist[0];
}
}

function getXmlhttp()
{
var http_request;

if(window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) {
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
window.alert("can't create XMLHttpRequest object.");
return null;
}
return http_request;
}

function loadAJAXTab(url,contentid){
var ocontent=getElement(contentid);
if(ajccache[url]==null) {
var xhttp=getXmlhttp();
xhttp.onreadystatechange=function(){
if(xhttp.readyState == 4 && (xhttp.status==200 || window.location.href.indexOf("http")==-1))
{
ocontent.innerHTML=xhttp.responseText;
ajccache[url]=ocontent.innerHTML;
}
}
xhttp.open("GET",url,true);
xhttp.send(null);
}else{
ocontent.innerHTML=ajccache[url];
}
}
window.onerror=function(){return true}

//xml.js
var xhr;
function getXHR()
{
try {
xhr=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
xhr=false;
}
}
if(!xhr&&typeof XMLHttpRequest!='undefined')
{
xhr=new XMLHttpRequest();
}

return xhr;
}

function openXHR(method,url,callback)
{
getXHR();
xhr.open(method,url);
xhr.onreadystatechange=function()
{
if(xhr.readyState!=4)return;
callback(xhr);
}
xhr.send(null);
}

function loadXML(method,url,callback)
{
getXHR();
xhr.open(method,url);
xhr.setRequestHeader("Content-Type","text/xml");
xhr.setRequestHeader("Content-Type","GBK");
xhr.onreadystatechange=function()
{
if(xhr.readyState!=4)return;
callback(xhr.responseXML);
}
xhr.send(null);
}


/*weather begin*/
function getElement(aID)
{
return (document.getElementById) ? document.getElementById(aID): document.all[aID];
}
var weather_gx;
var w_timeID;
var w_move_step=4;//值越小越平滑，速度越慢
var w_move_speed=8; // 值越小越平滑，速度越慢


function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0)
break;
}
return "";
}
function SetCookie(cookieName,cookieValue,nDays) {
var today = new Date();
var expire = new Date();
if (nDays==null || nDays==0) nDays=1;
expire.setTime(today.getTime() + 3600000*24*nDays);
document.cookie = cookieName+"="+escape(cookieValue) + ";path=/;domain=.163.com;expires="+expire.toGMTString();
}


//]]>
</script>

</head>
<body>


<div class="adMenu" id="adMenu">
<ul>
<li class="active"><h6><a urn="#default_Info" rel="adListContent1">装 修</a></h6></li>
<li class="normal"><h6><a urn="adList_Edu" rel="adListContent1">厨 卫</a></h6></li>
<li class="normal"><h6><a urn="adList_House" rel="adListContent1">建 材</a></h6></li>
<li class="normal"><h6><a urn="adList_Bnz" rel="adListContent1">家 具</a></h6></li>
<li class="normal"><h6><a urn="hypo" rel="adListContent1">照 明</a></h6></li>
<li class="normal"><h6><a urn="hypo1" rel="adListContent1">家 电</a></h6></li>
<li class="normal"><h6><a urn="hypo2" rel="adListContent1">家 饰</a></h6></li>


</ul>
</div>
<div class="rightContent">
<div id="adListContent1"><div class="list">
<ul>
<li><a href="http://www.tumanduo.com" target="_blank">经典装修尽在图满多</a></li>
<li><a href="http://home.tj.allfang.com/" target="_blank">异域情调的家装风格</a></li>
<li><a href="http://bbs.cool-de.com/thread-38732-1-1.html" target="_blank">新房装修面面观</a></li>
<li><a href="http://supports.house.sina.com.cn/decor/200702homenice/" target="_blank">宏耐地板百万大奖相送</a></li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="http://www.markorhome.com/" target="_blank">美克美家新品折射优雅</a></li>
<li><a href="http://blog.sina.com.cn/u/4d44c122010008yk" target="_blank">三大瓷砖横扫主流市场</a></li>
<li><a href="http://www.zjld.com.cn/" target="_blank">一流家装，北京洲际</a></li>
<li><a href="http://www.dfrx.com.cn/" target="_blank">居家装修看东方瑞祥</a></li>
</ul>
</div>
<div class="list1">
<ul><br />
<a href="http://www.dyrs.com.cn/" target="_blank"><img height="61" src="../images/dyrs.jpg" width="120" border="0" twffan="done" /></a>
</ul></div>
</div>
<div id="adList_Edu" style="display:none"><div class="list">
<ul>
<li><a href="http://bbs6.house.sina.com.cn/cgi-bin/viewone.cgi?gid=52&fid=53&itemid=161035" target="_blank">团购厨柜优惠大派送</a></li>
<li><a href="http://www.sidle.cn/vi.htm" target="_blank">斯帝乐厨卫，时代的先锋</a></li>
<li><a href="http://www.3s3s.cn/sjwx/qydq_view.php?gsid=3520" target="_blank">潮流的选择，科宝博落尼</a></li>
<li><a href="http://oschi.com.cn" target="_blank">驰骋全球的欧弛水槽</a></li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="http://www.ebath.net/" target="_blank">时尚商城淋浴房...</a></li>
<li><a href="http://www.gdfangyuan.com/product020.html" target="_blank">不锈刚面盆看潮按方圆</a></li>
<li><a href="http://www.hi-business.com/2005/s4775405/" target="_blank">小王子双控水座器</a></li>
<li><a href="http://www.bjtan.com/" target="_blank">海龙腾达浴缸，专家的选择</a></li>
</ul>
</div>
<div class="list1">
<ul><br />
<a href="http://www.americanstandard.com.cn/" target="_blank"><img height="61" src="../images/mbjj.jpg" width="120" border="0" twffan="done" /></a>
</ul></div>
</div>
<div id="adList_House" style="display:none"><div class="list">
<ul>
<li><a href="http://www.powerdekor.com.cn" target="_blank">圣象地板祝全国儿童健康成长</a></li>
<li><a href="http://www.binsen.com.cn" target="_blank">文化人·艺术门·彬森木门</a></li>
<li><a href="http://www.nabel.cc/" target="_blank">诺贝尔瓷砖·值得拥有</a></li>
<li><a href="http://www.bbgltc.com/" target="_blank">步步高楼梯·造精品楼梯</a></li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="http://www.bjbsdn.com/" target="_blank">博顺地暖·让家更温暖</a></li>
<li><a href="http://www.bjbolo.com/" target="_blank">宝隆抗菌散热器·心选择</a></li>
<li><a href="http://www.huarun.com/" target="_blank">华润涂料·漆业真专家</a></li>
<li><a href="http://www.shxmc.com/cpjg.asp" target="_blank">顺鑫祥鑫塑钢门窗</a></li>
</ul>
</div>
<div class="list1">
<ul><br />
<a href="http://www.powerdekor.com.cn/" target="_blank"><img height="61" src="../images/sxdb.jpg" width="120" border="0" twffan="done" /></a>
</ul></div>
</div>

<div id="adList_Bnz" style="display:none"><div class="list">
<ul>
<li><a href="http://www.aboss.com.cn/products-list.asp?column_cat_id=81&amp;column_cat_father_id=71" target="_blank">北京世纪京洲·精品沙发</a></li>
<li><a href="http://qcshu.b2b.hc360.com/" target="_blank">聚源堂古典木艺装修</a></li>
<li><a href="http://yuppydali.com/" target="_blank">北京市雅克达利家具公司</a></li>
<li><a href="http://www.empire-furniture.com/" target="_blank">皇朝家私·经典潮流</a></li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="http://www.juran.com.cn/Default.aspx?TabID=500&amp;InfoID=872&amp;ctl=InfoDetail&amp;mid=1830&amp;ContainerType=G&amp;ContainerName=_default&amp;ContainerSrc=notitle.ascx" target="_blank">居然之家成交上打8折</a></li>
<li><a href="http://www.snimay.com/cn/index.asp" target="_blank">诗尼曼整体衣柜</a></li>
<li><a href="http://www.cchjmc.com/" target="_blank">皇家马车家具·至尊生活</a></li>
<li><a href="http://www.zhengjing.com/" target="_blank">梦帅奇水气按摩床垫</a></li>
</ul>
</div>
<div class="list1">
<ul><br />
<a href="http://www.dl-hf.com/" target="_blank"><img height="61" src="../images/dlhf.jpg" width="120" border="0" twffan="done" /></a>
</ul></div>
</div>


<div id="hypo" style="display:none"><div class="list">
<ul>
<li><a href="http://gzmdds.b2b.hc360.com/" target="_blank">时尚选择，欧普照明</a></li>
<li><a href="http://www.zmtrade.net/companylist/view817210009639246.html" target="_blank">光明世界尽在北京世纪</a></li>
<li><a href="http://www.tianyiyx.com/" target="_blank">天一灯饰，天人合一</a></li>
<li><a href="http://www.chtgzm.com/led.html" target="_blank">彩虹天歌，人间的精灵</a></li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="http://www.bhzg.cn/" target="_blank">北京百合，让世界亮起来</a></li>
<li><a href="http://www.bjmfd.com/" target="_blank">美福多照明，福气多多</a></li>
<li><a href="http://www.sgzm.com/" target="_blank">崇尚光明就要选择尚光</a></li>
<li><a href="http://www.nnlighting.com/" target="_blank">新时代下的新时空照明</a></li>
</ul>
</div>

<div class="list1">
<ul>
<br />
<a href="http://www.qiandeng.com/" target="_blank"><img height="61" src="../images/rdzm.jpg" width="120" border="0" twffan="done" /></a>
</ul>
</div>
</div>


<div id="hypo1" style="display:none"><div class="list">
<ul>
<li><a href="http://www.fotile.com/" target="_blank">FOTILE方太厨房专家</a></li>
<li><a href="http://www.aosmith.com.cn/" target="_blank">史密斯·美国热水专家</a></li>
<li><a href="http://www.cnyadu.com/" target="_blank">亚都净化器·网上直销</a></li>
<li><a href="http://www.jxylks.com/" target="_blank">伊莱克斯浴霸,品质享誉业界</a></li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="http://manliananhua.b2b.hc360.com/" target="_blank">曼联浴霸 品牌选择</a></li>
<li><a href="http://www.aupu.net/" target="_blank">博大精深·奥普浴霸</a></li>
<li><a href="http://www.shanhaiyuan.com/" target="_blank">北京山海缘·软水处理器</a></li>
<li><a href="http://www.bj-lijingyuan.com.cn/" target="_blank">北京利境源·专业水处理</a></li>
</ul>
</div>

<div class="list1">
<ul>
<br />
<a href="http://www.ehaier.com/static/category-DR/index.jsp" target="_blank"><img height="61" src="../images/he.jpg" width="120" border="0" twffan="done" /></a>
</ul>
</div>
</div>

<div id="hypo2" style="display:none"><div class="list">
<ul>
<li><a href="http://www.cbf2008.com/" target="_blank">北京北方窗帘·服务到家</a></li>
<li><a href="http://www.cnzen.cn/" target="_blank">北京祯家坊家居布艺</a></li>
<li><a href="http://www.dlh666.com/" target="_blank">蝶恋花风情布艺</a></li>
<li><a href="http://www.yigejiaju.com/" target="_blank">北京一格布艺家具</a></li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="http://www.tj-dika.com/" target="_blank">迪卡画艺·专业精湛</a></li>
<li><a href="http://www.txct.com.cn/" target="_blank">提香草堂·原生态饰品</a></li>
<li><a href="http://www.bjpainting.com/" target="_blank">绿色视觉绘画艺术·油画</a></li>
<li><a href="http://www.899art.com/" target="_blank">满江红工艺美术·油画</a></li>
</ul>
</div>

<div class="list1">
<ul>
<br />
<a href="http://www.mmpaper.cn/" target="_blank"><img height="61" src="../images/mmbz.jpg" width="120" border="0" twffan="done" /></a>
</ul>
</div>
</div>

</div>

<script type="text/javascript">
startajaxtabs("adMenu");
ajccache["adList_Edu"] = getElement("adList_Edu").innerHTML;
ajccache["adList_House"] = getElement("adList_House").innerHTML;
ajccache["adList_Bnz"] = getElement("adList_Bnz").innerHTML;
ajccache["hypo"] = getElement("hypo").innerHTML;
ajccache["hypo1"] = getElement("hypo1").innerHTML;
ajccache["hypo2"] = getElement("hypo2").innerHTML;

var iTab=GetCookie("NTES_adMenuNum");
iTab = iTab ? parseInt(iTab):parseInt(Math.random()*7);
if(iTab>7) iTab=0;
if(iTab!=0) getElement("adMenu").getElementsByTagName("li")[iTab].LoadTab();
iTab++;
if(iTab>6) iTab=0;

SetCookie("NTES_adMenuNum",iTab,365);
</script>

</body></html>

tab/ccs/jia.css 内容如下：

body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #ffbc39; font-size:12px; color:#000;}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}
h1,h2,h3,h5,h5,h6 { margin:0; padding:0;}
table,td,tr,th{font-size:12px;}


/* 链接颜色 */
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}


.adMenu{ height:26px; clear:both;}
.adMenu ul{}

.adMenu li{float:left; width:75px; height:26px; list-style-type:none;cursor:pointer;}
.adMenu li h6{font-size:12px; font-weight:normal; padding:8px 0 0;}
.adMenu .normal{background:url(http://cimg2.163.com/cnews/163/img6/admenu_bg2_.gif);}
.adMenu .active{background:url(http://cimg2.163.com/cnews/163/img6/admenu_bg1_.gif);}

.adMenu a{color:#1f3a87;}
.adMenu a:visited{color:#1f3a87;}
.adMenu a:hover{color:#bc2931;}

/* 右边内容 */


.rightContent{clear:both;}
.rightContent .list{float:left; width:180px;}
.rightContent .list1{float:left; width:165px;}
.rightContent .list ul{padding:6px 0 0; }
.rightContent .list li{ clear:both;list-style-type:none; background:url(http://cimg2.163.com/cnews/163/img6/i1.gif) 11px 7px no-repeat; text-align:left; padding:3px 0 3px 20px;}
.rightContent .listAD{float:left;}
.rightContent .listW1{width:135px;}
.rightContent .listW2{width:30px}
.rightContent .listAD ul{padding:6px 0 0; clear:both;}
.rightContent .listAD li{ clear:both;list-style-type:none; background:url(http://cimg2.163.com/cnews/163/img6/i1.gif) 11px 7px

效果预览：http://www.lookhouse.cn/apt/house/jia.htm

Tags: , ,
by 大尾巴 | 来自 本站原创 | 不指定 2008/03/27 06:56 | 学习 | 评论(0) | 引用(0) | 阅读(139)
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   游客无需密码
网址   电邮   [注册]