緩沖運動之框架開始一級簡單框架實例

***********************緩沖運動【框架開始】-1.html*********************************************

<!DOCTYPE html>

<html>
<head lang="en">
? ? <meta charset="UTF-8">
? ? <title></title>
? ? <style type="text/css">
? ? ? ? body{background-color:#666;}
? ? ? ? div{width:100px;height:50px;margin:20px 0;background:yellow;border:1px solid seagreen;}
? ? </style>
? ? <script type="text/javascript">
? ? ? ? window.οnlοad=function(){
? ? ? ? ? ? var oDiv=document.getElementsByTagName("div");
? ? ? ? ? ? var i=0;
? ? ? ? ? ?oDiv[0].οnclick=function()
? ? ? ? ? ?{
? ? ? ? ? ? ? ?startMove(this,"width",300);
? ? ? ? ? ?};
? ? ? ? ? ? oDiv[1].οnclick=function()
? ? ? ? ? ? {
? ? ? ? ? ? ? ? startMove(this,"height",300);
? ? ? ? ? ? };
? ? ? ? ? ? oDiv[2].οnclick=function()
? ? ? ? ? ? {
? ? ? ? ? ? ? ? startMove(this,"fontSize",300);
? ? ? ? ? ? };
? ? ? ? ? ? oDiv[3].οnclick=function ()
? ? ? ? ? ? {
? ? ? ? ? ? ? ? startMove(this, 'borderWidth', 50);
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? function getStyle(obj, attr)
? ? ? ? {
? ? ? ? ? ? if(obj.currentStyle)
? ? ? ? ? ? {
? ? ? ? ? ? ? ? return obj.currentStyle[attr];
? ? ? ? ? ? }
? ? ? ? ? ? else
? ? ? ? ? ? {
? ? ? ? ? ? ? ? return getComputedStyle(obj, false)[attr];
? ? ? ? ? ? }
? ? ? ? }


? ? ? ? function startMove(obj, attr, iTarget)
? ? ? ? {
? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? obj.timer=setInterval(function (){
? ? ? ? ? ? ? ? var iCur=parseInt(getStyle(obj, attr));
? ? ? ? ? ? ? ? var iSpeed=(iTarget-iCur)/8;
? ? ? ? ? ? ? ? iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);


? ? ? ? ? ? ? ? if(iCur==iTarget)
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? obj.style[attr]=iCur+iSpeed+'px';
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }, 30)
? ? ? ? }
? ? </script>
</head>
<body>
<div></div>
<div></div>
<div>AAAA+++</div>
<div></div>
<div></div>
<div></div>
</body>

</html>


***************************緩沖運動【框架開始】-2.html*****************************************


<!DOCTYPE html>
<html>
<head lang="en">
? ? <meta charset="UTF-8">
? ? <title></title>
? ? <style type="text/css">
? ? ? ? body{background-color:#666;}
? ? ? ? div{width:100px;height:50px;margin:20px 0;background:yellow;border:1px solid seagreen;filter:alpha(opacity:30);opacity:0.3;}
? ? </style>
? ? <script type="text/javascript">
? ? ? ? window.οnlοad=function(){
? ? ? ? ? ? var oDiv=document.getElementsByTagName("div");
? ? ? ? ? ? var i=0;
? ? ? ? ? ? var alpha=30;
? ? ? ? ? ?oDiv[0].οnclick=function()
? ? ? ? ? ?{
? ? ? ? ? ? ? ?startMove(this,"width",300);
? ? ? ? ? ?};
? ? ? ? ? ? oDiv[1].οnclick=function()
? ? ? ? ? ? {
? ? ? ? ? ? ? ? startMove(this,"height",300);
? ? ? ? ? ? };
? ? ? ? ? ? oDiv[2].οnclick=function()
? ? ? ? ? ? {
? ? ? ? ? ? ? ? startMove(this,"fontSize",300);
? ? ? ? ? ? };
? ? ? ? ? ? oDiv[3].οnclick=function ()
? ? ? ? ? ? {
? ? ? ? ? ? ? ? startMove(this, 'borderWidth', 50);
? ? ? ? ? ? }
? ? ? ? ? ? oDiv[4].οnmοuseοver=function ()
? ? ? ? ? ? {


? ? ? ? ? ? ? ? startMove(oDiv[4], 'opacity', 100);
? ? ? ? ? ? }
? ? ? ? ? ? oDiv[4].οnmοuseοut=function ()
? ? ? ? ? ? {
? ? ? ? ? ? ? ? startMove(oDiv[4], 'opacity', 30);
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? function getStyle(obj, attr)
? ? ? ? {
? ? ? ? ? ? if(obj.currentStyle)
? ? ? ? ? ? {
? ? ? ? ? ? ? ? return obj.currentStyle[attr];
? ? ? ? ? ? }
? ? ? ? ? ? else
? ? ? ? ? ? {
? ? ? ? ? ? ? ? return getComputedStyle(obj, false)[attr];
? ? ? ? ? ? }
? ? ? ? }


? ? ? ? function startMove(obj, attr, iTarget)
? ? ? ? {
? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? obj.timer=setInterval(function (){
? ? ? ? ? ? ? ? var iCur=0;
? ? ? ? ? ? ? ? if(attr=='opacity')
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? iCur=parseInt(getStyle(obj, attr));
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? var iSpeed=(iTarget-iCur)/8;
? ? ? ? ? ? ? ? iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);


? ? ? ? ? ? ? ? if(iCur==iTarget)
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? if(attr=="opacity")
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
? ? ? ? ? ? ? ? ? ? ? ? obj.style.opacity=(iCur+iSpeed)/100;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? obj.style[attr]=iCur+iSpeed+'px';
? ? ? ? ? ? ? ? ? ? }


? ? ? ? ? ? ? ? }
? ? ? ? ? ? }, 30)
? ? ? ? }
? ? </script>
</head>
<body>
<div></div>
<div></div>
<div>AAAA+++</div>
<div></div>
<div></div>
<div></div>
</body>
</html>

*******************框架開始之鏈式運動1****************************

<!DOCTYPE html>
<html>
<head lang="en">
? ? <meta charset="UTF-8">
? ? <title></title>
? ? <style type="text/css">
? ? ? ? div{width:100px;height:50px;margin:20px 0;position:absolute;top:0;background:yellow;border:1px solid seagreen;}
? ? </style>
? ? <script type="text/javascript">
? ? ? ? window.οnlοad=function ()
? ? ? ? {
? ? ? ? ? ? var oDiv=document.getElementById('div1');


? ? ? ? ? ? oDiv.οnmοuseοver=function ()
? ? ? ? ? ? {
? ? ? ? ? ? ? ? startMove(oDiv, 'width', 300, function (){
? ? ? ? ? ? ? ? ? ? startMove(oDiv, 'height', 300, function (){
? ? ? ? ? ? ? ? ? ? ? ? startMove(oDiv, 'opacity', 100);
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? });
? ? ? ? ? ? };


? ? ? ? ? ? oDiv.οnmοuseοut=function ()
? ? ? ? ? ? {
? ? ? ? ? ? ? ? startMove(oDiv, 'opacity', 30, function (){
? ? ? ? ? ? ? ? ? ? startMove(oDiv, 'height', 100, function (){
? ? ? ? ? ? ? ? ? ? ? ? startMove(oDiv, 'width', 100);
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }; ?//不錯，非常好，但是還有更好的辦法么，這樣每一個值都須要回調不是太麻煩了么
? ? ? ? ? ? //同一時候假設我想同一時候運行多個值的變化呢。不行了吧
? ? ? ? ? ? // startMove(oDiv, 'width', 100);startMove(oDiv, 'height', 100);這樣寫也是不行的 第二個會把第一個的定時器改關閉掉


? ? ? ? };
? ? ? ? function getStyle(obj, attr)
? ? ? ? {
? ? ? ? ? ? if(obj.currentStyle)
? ? ? ? ? ? {
? ? ? ? ? ? ? ? return obj.currentStyle[attr];
? ? ? ? ? ? }
? ? ? ? ? ? else
? ? ? ? ? ? {
? ? ? ? ? ? ? ? return getComputedStyle(obj, false)[attr];
? ? ? ? ? ? }
? ? ? ? }


? ? ? ? function startMove(obj, attr, iTarget,fn)
? ? ? ? {
? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? obj.timer=setInterval(function (){
? ? ? ? ? ? ? ? var iCur=0;
? ? ? ? ? ? ? ? if(attr=='opacity')
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? iCur=parseInt(getStyle(obj, attr));
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? var iSpeed=(iTarget-iCur)/8;
? ? ? ? ? ? ? ? iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);


? ? ? ? ? ? ? ? if(iCur==iTarget)
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? ? ? ? ? if(fn) ?//運動停止的時候，假設有傳遞第四個參數的時候 就執行
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? fn();
? ? ? ? ? ? ? ? ? ? }




? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? if(attr=="opacity")
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
? ? ? ? ? ? ? ? ? ? ? ? obj.style.opacity=(iCur+iSpeed)/100;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? obj.style[attr]=iCur+iSpeed+'px';
? ? ? ? ? ? ? ? ? ? }


? ? ? ? ? ? ? ? }
? ? ? ? ? ? }, 30)
? ? ? ? }
? ? </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>


*******************框架開始之鏈式運動2****************************

<!DOCTYPE html>
<html>
<head lang="en">
? ? <meta charset="UTF-8">
? ? <title></title>
? ? <style type="text/css">
? ? ? ? body{background:darkgray;}
? ? ? ? span{position: fixed;top:300px;width:100%;height:0;border-bottom:1px solid red;}
? ? ? ? div{width:100px;height:50px;margin:20px 0;position:absolute;top:0;background:yellow;border:1px solid seagreen;opacity:0.3;filter:alpha(opacity:30);}
? ? </style>
? ? <script type="text/javascript">
? ? ? ? window.οnlοad=function ()
? ? ? ? {
? ? ? ? ? ? var oDiv=document.getElementById('div1');


? ? ? ? ? ? oDiv.οnclick=function ()
? ? ? ? ? ? {
? ? ? ? ? ? ? ? startMove(oDiv,{width:102,height:300,opacity:100})//第一個究竟目標的時候 就會清楚定時器，其它的值也會停止
? ? ? ? ? ? };


? ? ? ? };
? ? ? ? function getStyle(obj, attr)
? ? ? ? {
? ? ? ? ? ? if(obj.currentStyle)
? ? ? ? ? ? {
? ? ? ? ? ? ? ? return obj.currentStyle[attr];
? ? ? ? ? ? }
? ? ? ? ? ? else
? ? ? ? ? ? {
? ? ? ? ? ? ? ? return getComputedStyle(obj, false)[attr];
? ? ? ? ? ? }
? ? ? ? }


? ? ? ? function startMove(obj,json,fn)
? ? ? ? {
? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? obj.timer=setInterval(function (){
? ? ? ? ? ? ? for(var attr in json)
? ? ? ? ? ? ? {




? ? ? ? ? ? ? ? var iCur=0;
? ? ? ? ? ? ? ? if(attr=='opacity')
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? iCur=parseInt(getStyle(obj, attr));
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? var iSpeed=(json[attr]-iCur)/8;
? ? ? ? ? ? ? ? iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);


? ? ? ? ? ? ? ? if(iCur==json[attr])
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? ? ? ? ? if(fn) ?//運動停止的時候，假設有傳遞第四個參數的時候 就執行
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? fn();
? ? ? ? ? ? ? ? ? ? }




? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? if(attr=="opacity")
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
? ? ? ? ? ? ? ? ? ? ? ? obj.style.opacity=(iCur+iSpeed)/100;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? obj.style[attr]=iCur+iSpeed+'px';
? ? ? ? ? ? ? ? ? ? }


? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? ? }, 30)
? ? ? ? }
? ? </script>
</head>
<body>
<div id="div1"></div>
<span></span>
</body>
</html>

*******************框架開始之鏈式運動3 ?json****************************

<!DOCTYPE html>
<html>
<head lang="en">
? ? <meta charset="UTF-8">
? ? <title></title>
? ? <style type="text/css">
? ? ? ? div{width:100px;height:50px;margin:20px 0;position:absolute;top:0;background:yellow;border:1px solid seagreen;}
? ? </style>
? ? <script type="text/javascript">
? ? ? ? window.οnlοad=function ()
? ? ? ? {
? ? ? ? ? ? var oDiv=document.getElementById('div1');


? ? ? ? ? ? oDiv.οnclick=function ()
? ? ? ? ? ? {
? ? ? ? ? ? ? ? startMove(oDiv,{width:"300",height:"300",top:"300",opacity:"100"})
? ? ? ? ? ? };


? ? ? ? };
? ? ? ? function getStyle(obj, attr)
? ? ? ? {
? ? ? ? ? ? if(obj.currentStyle)
? ? ? ? ? ? {
? ? ? ? ? ? ? ? return obj.currentStyle[attr];
? ? ? ? ? ? }
? ? ? ? ? ? else
? ? ? ? ? ? {
? ? ? ? ? ? ? ? return getComputedStyle(obj, false)[attr];
? ? ? ? ? ? }
? ? ? ? }


? ? ? ? function startMove(obj,json,fn)
? ? ? ? {
? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? obj.timer=setInterval(function (){
? ? ? ? ? ? ? for(var attr in json)
? ? ? ? ? ? ? {




? ? ? ? ? ? ? ? var iCur=0;
? ? ? ? ? ? ? ? if(attr=='opacity')
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? iCur=parseInt(getStyle(obj, attr));
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? var iSpeed=(json[attr]-iCur)/8;
? ? ? ? ? ? ? ? iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);


? ? ? ? ? ? ? ? if(iCur==json[attr])
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? ? ? ? ? if(fn) ?//運動停止的時候，假設有傳遞第四個參數的時候 就執行
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? fn();
? ? ? ? ? ? ? ? ? ? }




? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? if(attr=="opacity")
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
? ? ? ? ? ? ? ? ? ? ? ? obj.style.opacity=(iCur+iSpeed)/100;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? obj.style[attr]=iCur+iSpeed+'px';
? ? ? ? ? ? ? ? ? ? }


? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? ? }, 30)
? ? ? ? }
? ? </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>


******************框架開始之鏈式運動 json ?停止條件**************************

<!DOCTYPE html>
<html>
<head lang="en">
? ? <meta charset="UTF-8">
? ? <title></title>
? ? <style type="text/css">
? ? ? ? body{background:darkgray;}
? ? ? ? span{position: fixed;top:300px;width:100%;height:0;border-bottom:1px solid red;}
? ? ? ? div{width:100px;height:50px;margin:0;position:absolute;top:0;background:yellow;border:1px solid seagreen;opacity:0.3;filter:alpha(opacity:30);}
? ? </style>
? ? <script type="text/javascript">
? ? ? ? window.οnlοad=function ()
? ? ? ? {
? ? ? ? ? ? var oDiv=document.getElementById('div1');


? ? ? ? ? ? oDiv.οnclick=function ()
? ? ? ? ? ? {
? ? ? ? ? ? ? ? startMove(oDiv,{width:102,height:300,opacity:100})//第一個究竟目標的時候 就會清楚定時器，其它的值也會停止
? ? ? ? ? ? };


? ? ? ? };
? ? ? ? function getStyle(obj, attr)
? ? ? ? {
? ? ? ? ? ? if(obj.currentStyle)
? ? ? ? ? ? {
? ? ? ? ? ? ? ? return obj.currentStyle[attr];
? ? ? ? ? ? }
? ? ? ? ? ? else
? ? ? ? ? ? {
? ? ? ? ? ? ? ? return getComputedStyle(obj, false)[attr];
? ? ? ? ? ? }
? ? ? ? }


? ? ? ? function startMove(obj,json,fn)
? ? ? ? {
? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? obj.timer=setInterval(function (){
? ? ? ? ? ? ? ? varbStop=true;//所用的東西都到達
? ? ? ? ? ? ? for(var attr in json)
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? var iCur=0;
? ? ? ? ? ? ? ? if(attr=='opacity')
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? iCur=parseInt(getStyle(obj, attr));
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? var iSpeed=(json[attr]-iCur)/8;
? ? ? ? ? ? ? ? iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
? ? ? ? ? ? ? ? ? if(iCur!=json[attr]) {
? ? ? ? ? ? ? ? ? ? ? bStop = false;
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? if(attr=="opacity")
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
? ? ? ? ? ? ? ? ? ? ? ? obj.style.opacity=(iCur+iSpeed)/100;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? obj.style[attr]=iCur+iSpeed+'px';
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? if(bStop)
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? ? ? ? ? ? if(fn) ?//運動停止的時候。假設有傳遞第四個參數的時候 就執行
? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? fn();
? ? ? ? ? ? ? ? ? ? ? }




? ? ? ? ? ? ? ? ? }




? ? ? ? ? ? ? }
? ? ? ? ? ? }, 30)
? ? ? ? }
? ? </script>
</head>
<body>
<div id="div1"></div>
<span></span>
</body>
</html>



**********************************伸縮菜單 ?簡單框架實例**************************************************

<!DOCTYPE html>
<html>
<head lang="en">
? ? <meta charset="UTF-8">
? ? <title></title>
? ? <style type="text/css">
? ? ? ? ul,ol{list-style: none;margin:0;padding:0;}
? ? ? ? ul li{position:relative;width:90px;height:25px;line-height: 25px;text-align: center;float:left;border:1px solid #666666;margin:1px;background:yellowgreen;}
? ? ? ? ol{background:#CCC; overflow:hidden; position:absolute; top:25px; width:100%; height:0; filter:alpha(opacity:0); opacity:0;}
? ? ? ? ol li{border:none;margin:0;background:yellowgreen;border-bottom:1px solid darkslategrey;}
? ? </style>
? ? <script type="text/javascript">
? ? ? ? window.οnlοad=function ()
? ? ? ? {


? ? ? ? ? ? var aLi=document.getElementsByTagName("li");
? ? ? ? ? ? var i=0;
? ? ? ? ? ? for(i=0;i<aLi.length;i++) {
? ? ? ? ? ? aLi[i].onmouseover = function () {
? ? ? ? ? ? ? ? var oDiv = this.getElementsByTagName('ol')[0];


? ? ? ? ? ? ? ? oDiv.style.height = 'auto';
? ? ? ? ? ? ? ? var iHeight = oDiv.offsetHeight;
? ? ? ? ? ? ? ? oDiv.style.height = 0;
? ? ? ? ? ? ? ? startMove(oDiv, {opacity: 100, height: iHeight});
? ? ? ? ? ? };
? ? ? ? ? ? ? ? aLi[i].onmouseout = function () {
? ? ? ? ? ? ? ? ? ? var oDiv = this.getElementsByTagName('ol')[0];


? ? ? ? ? ? ? ? ? ? oDiv.style.height = 'auto';
? ? ? ? ? ? ? ? ? ? var iHeight = oDiv.offsetHeight;
? ? ? ? ? ? ? ? ? ? oDiv.style.height = 0;
? ? ? ? ? ? ? ? ? ? startMove(oDiv, {opacity:0, height:0});
? ? ? ? ? ? ? ? };


? ? ? ? }


? ? ? ? };
? ? ? ? function getStyle(obj, attr)
? ? ? ? {
? ? ? ? ? ? if(obj.currentStyle)
? ? ? ? ? ? {
? ? ? ? ? ? ? ? return obj.currentStyle[attr];
? ? ? ? ? ? }
? ? ? ? ? ? else
? ? ? ? ? ? {
? ? ? ? ? ? ? ? return getComputedStyle(obj, false)[attr];
? ? ? ? ? ? }
? ? ? ? }


? ? ? ? function startMove(obj,json,fn)
? ? ? ? {
? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? obj.timer=setInterval(function (){
? ? ? ? ? ? ? for(var attr in json)
? ? ? ? ? ? ? {




? ? ? ? ? ? ? ? var iCur=0;
? ? ? ? ? ? ? ? if(attr=='opacity')
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? iCur=parseInt(getStyle(obj, attr));
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? var iSpeed=(json[attr]-iCur)/8;
? ? ? ? ? ? ? ? iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);


? ? ? ? ? ? ? ? if(iCur==json[attr])
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? ? ? ? ? if(fn) ?//運動停止的時候，假設有傳遞第四個參數的時候 就執行
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? fn();
? ? ? ? ? ? ? ? ? ? }




? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? if(attr=="opacity")
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
? ? ? ? ? ? ? ? ? ? ? ? obj.style.opacity=(iCur+iSpeed)/100;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? obj.style[attr]=iCur+iSpeed+'px';
? ? ? ? ? ? ? ? ? ? }


? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? ? }, 30)
? ? ? ? }
? ? </script>
</head>
<body>
<ul>
? ? <li>
? ? ? ? 首頁
? ? ? ? <ol>
? ? ? ? ? ? <li>AAAAAA</li>
? ? ? ? ? ? <li>BBBBBB</li>
? ? ? ? ? ? <li>CCCCCC</li>
? ? ? ? ? ? <li>DDDDDDD</li>
? ? ? ? ? ? <li>EEEEEEE</li>
? ? ? ? ? ? <li>FFFFFFF</li>
? ? ? ? </ol>
? ? </li>
? ? <li>
? ? ? ? css
? ? ? ? <ol>
? ? ? ? ? ? <li>AAAAAA</li>
? ? ? ? ? ? <li>BBBBBB</li>
? ? ? ? ? ? <li>CCCCCC</li>
? ? ? ? ? ? <li>DDDDDDD</li>
? ? ? ? ? ? <li>EEEEEEE</li>
? ? ? ? ? ? <li>FFFFFFF</li>
? ? ? ? </ol>
? ? </li>
? ? <li>
? ? ? ? html
? ? ? ? <ol>
? ? ? ? ? ? <li>AAAAAA</li>
? ? ? ? ? ? <li>BBBBBB</li>
? ? ? ? ? ? <li>CCCCCC</li>
? ? ? ? ? ? <li>DDDDDDD</li>
? ? ? ? ? ? <li>EEEEEEE</li>
? ? ? ? ? ? <li>FFFFFFF</li>
? ? ? ? </ol>
? ? </li>
? ? <li>
? ? ? ? javascript
? ? ? ? <ol>
? ? ? ? ? ? <li>AAAAAA</li>
? ? ? ? ? ? <li>BBBBBB</li>
? ? ? ? ? ? <li>CCCCCC</li>
? ? ? ? ? ? <li>DDDDDDD</li>
? ? ? ? ? ? <li>EEEEEEE</li>
? ? ? ? ? ? <li>FFFFFFF</li>
? ? ? ? </ol>
? ? </li>
? ? <li>
? ? ? ? jQuery
? ? ? ? <ol>
? ? ? ? ? ? <li>AAAAAA</li>
? ? ? ? ? ? <li>BBBBBB</li>
? ? ? ? ? ? <li>CCCCCC</li>
? ? ? ? ? ? <li>DDDDDDD</li>
? ? ? ? ? ? <li>EEEEEEE</li>
? ? ? ? ? ? <li>FFFFFFF</li>
? ? ? ? </ol>
? ? </li>
</ul>
</body>
</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/281822.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/281822.shtml
英文地址，請注明出處：http://en.pswp.cn/news/281822.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

將字符串分割為指定長度的子字符串

將字符串分割為指定長度的子字符串

將一個字符串從左至右&#xff0c;分割成指定長度的子字符串&#xff08;注&#xff1a;最后一個子字符串的長度不一定等于指定的長度&#xff09; 1 #include <stdio.h>2 #include <string.h>3 4 #define STR_LENGTH 5 //分割之后每個字符串的長度&#xff08;最…
閱讀更多...
使用 C# 開發的輕量級開源數據庫 LiteDB

使用 C# 開發的輕量級開源數據庫 LiteDB

你好&#xff0c;這里是 Dotnet 工具箱&#xff0c;定期分享 Dotnet 有趣&#xff0c;實用的工具或組件&#xff0c;希望對您有用&#xff01;簡介 LiteDB 是一個小型、快速、輕量級的 .NET NoSQL 嵌入式數據庫&#xff0c;也就是我們常說的 K/V 數據庫&#xff0c;完全用 C# …
閱讀更多...
微信小程序仿微信SlideView組件slide-view

微信小程序仿微信SlideView組件slide-view

微信小程序仿微信SlideView組件。 使用 1、安裝 slide-view 從小程序基礎庫版本 2.2.1 或以上、及開發者工具 1.02.1808300 或以上開始&#xff0c;小程序支持使用 npm 安裝第三方包。 npm install --save miniprogram-slide-view2、在需要使用 slide-view 的頁面 page.json 中…
閱讀更多...
hibernate 環境搭建測試

hibernate 環境搭建測試

對于hibernate的介紹&#xff0c;網絡上一搜一堆&#xff0c;恐怕我寫的也沒前輩總結的好。這個博主總結的十分好,方便大家欣賞 http://blog.csdn.net/liujiahan629629/article/details/21442607 真正要掌握&#xff0c;還得需要自己動手&#xff0c;才能豐衣足食。所需jar包j…
閱讀更多...
jQuary的相關動畫效果

jQuary的相關動畫效果

第一種&#xff1a;該方法隱藏所有 <p> 元素&#xff1a; <html> <head> <script type"text/javascript" src"jquery.js"></script> <script type"text/javascript"> $(document).ready(function(){ $(&quo…
閱讀更多...
C# WPF 中使用 MahApps.Metro.IconPacks 提供的圖標

C# WPF 中使用 MahApps.Metro.IconPacks 提供的圖標

概述我們在桌面應用程序開發時經常會用到很多圖標&#xff0c;時常我是在阿里矢量圖庫下載&#xff1a;https://www.iconfont.cn/&#xff0c;然后存放多項目中去引用&#xff0c;不過這樣操作起來有點繁瑣&#xff0c;這節我們介紹一個更加便捷的方式.用法概述Wpf 圖標管理工具…
閱讀更多...
rails generator

rails generator

generate 查找順序 rails/generators/initializer/initializer_generator.rb generators/initializer/initializer_generator.rbrails/generators/initializer_generator.rbgenerators/initializer_generator.rblib/templates/rails/helper/helper.rbcustomize your scaffold t…
閱讀更多...
java多線程同時運行_Java實現的兩個線程同時運行案例

java多線程同時運行_Java實現的兩個線程同時運行案例

本文實例講述了Java實現的兩個線程同時運行。分享給大家供大家參考&#xff0c;具體如下&#xff1a;/*** 兩個案例同時運行案例* 1:這個兩個線程并不是有規律的運行而是有沒有規律的交替運行*/package com.test3;public class Demo10_3 {/*** param args*/public static void …
閱讀更多...
通過幾個例子看sed的模式空間與保持空間

通過幾個例子看sed的模式空間與保持空間

SED之所以能以行為單位的編輯或修改文本&#xff0c;其原因在于它使用了兩個空間&#xff1a;一個是活動的“模式空間&#xff08;pattern space&#xff09;”&#xff0c;另一個是起輔助作用的“暫存緩沖區&#xff08;holdingspace&#xff09;這2個空間的使用。 sed編輯器逐…
閱讀更多...
dotnet 用 SourceGenerator 源代碼生成技術實現中文編程語言

dotnet 用 SourceGenerator 源代碼生成技術實現中文編程語言

相信有很多伙伴都很喜歡自己造編程語言&#xff0c;在有現代的很多工具鏈的幫助下&#xff0c;實現一門編程語言&#xff0c;似乎已不是一件十分困難的事情。我利用 SourceGenerator 源代碼生成技術實現了一個簡易的中文編程語言&#xff0c;核心原理是將中文編程語言翻譯為 C#…
閱讀更多...
斷電后supervisor啟動時報錯

斷電后supervisor啟動時報錯

當設備意外斷電后&#xff0c;supervisor在系統啟動時報錯&#xff0c;導致程序假死&#xff0c;此問題可以用systemd來替換supervisor。轉載于:https://www.cnblogs.com/gaoyiping/p/6950470.html
閱讀更多...
Vue單頁面在ios10系統上出現白屏的bug

Vue單頁面在ios10系統上出現白屏的bug

一個bug 你用Vue做了一個單頁面應用&#xff0c;它在一切設備上都工作正常&#xff0c;但是突然有一天&#xff0c;你的測試和你說&#xff0c;這個網站在iOS 10上跑不起來&#xff0c;怎么辦&#xff1f;于是你打開你電腦上的Chrome瀏覽器&#xff0c;工作正常&#xff1b;打開…
閱讀更多...
HTTP/2 規格制定完成

HTTP/2 規格制定完成

IETF HTTP工作者的負責人Mark Nottingham在其博客上宣布HTTP/2規格制定完成&#xff0c;接下來將是分配RFC編號和正式發表。HTTP是Web的核心技術之一&#xff0c;相比HTTP/1&#xff0c;HTTP/2的改進之處包括更快的頁面加載&#xff1b;更長久的連接&#xff1b;服務器推送&…
閱讀更多...
【習題 6-7 UVA - 804】Petri Net Simulation

【習題 6-7 UVA - 804】Petri Net Simulation

【鏈接】 我是鏈接,點我呀:) 【題意】 在這里輸入題意 【題解】 模擬就好 【代碼】 /* 1.Shoud it use long long ? 2.Have you ever test several sample(at least therr) yourself? 3.Can you promise that the solution is right? At least,the main ideal 4.use the p…
閱讀更多...
easyui combobox java_Easyui的combobox實現動態數據級聯效果

easyui combobox java_Easyui的combobox實現動態數據級聯效果

實現從數據庫中動態獲取對應的list集合&#xff0c;并在easyui的combobox中顯示出來。實現的效果如下&#xff1a;1、數據庫的表設計如圖所示2、數據庫中填寫相關的數據&#xff0c;如圖所示。如圖所示【法律法規】是所屬欄目&#xff0c;因此他的字段parentid是0。【中國公民出…
閱讀更多...
為什么應該默認將 Class 設為密封類？

為什么應該默認將 Class 設為密封類？

前言最近在 dotnet/sdk 上看到一個 Issue&#xff0c;它提出了一個有趣的要求&#xff1a;默認情況下將類設置為密封類(Sealed)&#xff1f;什么是密封類&#xff1f;默認情況下&#xff0c;類是開放的&#xff0c;這意味著它是可以被繼承的。例如&#xff1a;class BaseClass …
閱讀更多...
Spring工具類的使用

Spring工具類的使用

2019獨角獸企業重金招聘Python工程師標準>>> Spring-core中提供了大量的工具類&#xff0c;常用的有StringUtils、ObjectUtils、NumberUtils、Base64Utils等&#xff0c;Spring工具類在spring-core.jar中的org.springframework.util包下。 org.springframework.util…
閱讀更多...
python作業高級FTP（第八周）

python作業高級FTP（第八周）

作業需求&#xff1a; 1. 用戶加密認證 2. 多用戶同時登陸 3. 每個用戶有自己的家目錄且只能訪問自己的家目錄 4. 對用戶進行磁盤配額、不同用戶配額可不同 5. 用戶可以登陸server后&#xff0c;可切換目錄 6. 查看當前目錄下文件 7. 上傳下載文件&#xff0c;保證文件一致性 8…
閱讀更多...
java用log.i打印數組_java-使用JSCH將ssh日志打印到列表(android)

java用log.i打印數組_java-使用JSCH將ssh日志打印到列表(android)

我一直試圖通過將包含我目錄名稱的log.i字符串值添加到數組中,然后使用數組適配器通過listView打印它們,來在listView中的目錄中打印項目.但是,當我嘗試運行該應用程序時,它將打印包含目錄名稱的日志,但不會在listView上打印任何內容.有什么幫助嗎&#xff1f;這是我的代碼&…
閱讀更多...
Edge 瀏覽器被爆存在 XSS 繞過漏洞

Edge 瀏覽器被爆存在 XSS 繞過漏洞

來自知名安全測試套件Burp Suite廠商PortSwigger的安全專家Gareth Heyes近日在微軟Edge瀏覽器的內置XSS過濾器存在繞過漏洞&#xff0c;這就意味著盡管微軟在Edge瀏覽器中進行了大量的安全策略部署&#xff0c;但用戶瀏覽網頁的時候依然有可能讓攻擊者通過這種方式在Edge瀏覽器…
閱讀更多...
最新文章

Copyright @ 2022~2023