缓冲运动之框架開始一级简单框架实例
***********************緩沖運動【框架開始】-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>
*******************框架開始之鏈?zhǔn)竭\動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);
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }; ?//不錯，非常好，但是還有更好的辦法么，這樣每一個值都須要回調(diào)不是太麻煩了么
? ? ? ? ? ? //同一時候假設(shè)我想同一時候運行多個值的變化呢。不行了吧
? ? ? ? ? ? // startMove(oDiv, 'width', 100);startMove(oDiv, 'height', 100);這樣寫也是不行的 第二個會把第一個的定時器改關(guān)閉掉
? ? ? ? };
? ? ? ? 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) ?//運動停止的時候，假設(shè)有傳遞第四個參數(shù)的時候 就執(zhí)行
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? 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>
*******************框架開始之鏈?zhǔn)竭\動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})//第一個究竟目標(biāo)的時候 就會清楚定時器，其它的值也會停止
? ? ? ? ? ? };
? ? ? ? };
? ? ? ? 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) ?//運動停止的時候，假設(shè)有傳遞第四個參數(shù)的時候 就執(zhí)行
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? 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>
*******************框架開始之鏈?zhǔn)竭\動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) ?//運動停止的時候，假設(shè)有傳遞第四個參數(shù)的時候 就執(zhí)行
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? 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>
******************框架開始之鏈?zhǔn)竭\動 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})//第一個究竟目標(biāo)的時候 就會清楚定時器，其它的值也會停止
? ? ? ? ? ? };
? ? ? ? };
? ? ? ? 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;//所用的東西都到達(dá)
? ? ? ? ? ? ? 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) ?//運動停止的時候。假設(shè)有傳遞第四個參數(shù)的時候 就執(zhí)行
? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? 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) ?//運動停止的時候，假設(shè)有傳遞第四個參數(shù)的時候 就執(zhí)行
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? 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>
總結(jié)
以上是生活随笔為你收集整理的缓冲运动之框架開始一级简单框架实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 默认库“LIBCMTD”与其他库的使用冲
- 下一篇： 变换河道水面线计算