溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
*{ margin:0px; padding:0px; font-size:12px;}
ul li{ list-style:none;}
a{ text-decoration:none;}
#nav{ width:980px; margin:0 auto;}
#nav li{
height:36px; line-height:36px; background:#666666; text-align:center;
width:120px; position:relative; float:left; margin-right:10px;
}
#nav li a{ color:#FFFFFF; display:block; font-weight:bold;}
#nav ul{ height:0px; overflow:hidden; position:absolute; left:0px;}
#nav ul li{ background:#003366; height:28px; line-height:28px;}
#nav ul li a{ color:#FFFFFF; display:block; font-weight:normal;}
.clear{ zoom:1;}
.clear:after{ content:""; display:block; clear:both;}
</style>
<script language="javascript">
window.onload=function()
{
var oNav=document.getElementById("nav");//獲取導航元素節點
var oLi=oNav.children;//獲取Nav下面的所有的li元素 返回的是一個集合
for(var i=0;i<oLi.length;i++)
{
//當鼠標移過去的時候 發生移動事件
oLi[i].onmouseover=function()
{
var oUl=this.getElementsByTagName("ul")[0];//獲取當前li下面的第一個<ul>節點
var oList=oUl.children;//獲取<ul>下面的子元素 <li>
var offsetHeight=oList[0].offsetHeight; //計算0下標 也就是第一個元素的高度 28px
var iTargetHeight=(oList.length * offsetHeight) //相當于li的個數 * 每個 li的高度 height 5*28=????
//開始調用完美運動框架....
startMove(oUl,{"height":iTargetHeight});
}
//當鼠標移開的時候 就關閉
oLi[i].onmouseout=function()
{
var oUl=this.getElementsByTagName("ul")[0];//獲取當前li下面的第一個<ul>節點
startMove(oUl,{"height":0});
}
}
}
</script>
</head>
<body>
<br/><br/><br/><br/><br/>
<ul id="nav" class="clear">
<li>
<a href="#">產品展示</a>
<ul>
<li><a href="#">LED天花燈</a></li>
<li><a href="#">LED天花燈</a></li>
<li><a href="#">LED天花燈</a></li>
<li><a href="#">LED天花燈</a></li>
<li><a href="#">LED天花燈</a></li>
<li><a href="#">LED天花燈</a></li>
</ul>
</li>
<li>
<a href="#">新聞中心</a>
<ul>
<li><a href="#">LED天花燈</a></li>
<li><a href="#">LED天花燈</a></li>
<li><a href="#">LED天花燈</a></li>
<li><a href="#">LED天花燈</a></li>
<li><a href="#">LED天花燈</a></li>
</ul>
</li>
<li>
<a href="#">聯系我們</a>
<ul>
<li><a href="#">LED天花燈</a></li>
<li><a href="#">LED天花燈</a></li>
<li><a href="#">LED天花燈</a></li>
<li><a href="#">LED天花燈</a></li>
</ul>
</li>
</ul>
<div class="clear">
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
asdfasdf<br/>
</div>
</body>
</html>
<script language="javascript">
function startMove(obj, json, fn) {
clearInterval(obj.iTimer);
var iCur = 0;
var iSpeed = 0;
obj.iTimer = setInterval(function() {
var iBtn = true;
for ( var attr in json ) {
var iTarget = json[attr];
if (attr == 'opacity') {
iCur = Math.round(css( obj, 'opacity' ) * 100);
} else {
iCur = parseInt(css(obj, attr));
}
iSpeed = ( iTarget - iCur ) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur != iTarget) {
iBtn = false;
if (attr == 'opacity') {
obj.style.opacity = (iCur + iSpeed) / 100;
obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
}
if (iBtn) {
clearInterval(obj.iTimer);
fn && fn.call(obj);
}
}, 20);
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
</script>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
