首页 > 代码库 > 缓冲运动之框架开始一级简单框架实例
缓冲运动之框架开始一级简单框架实例
***********************缓冲运动【框架开始】-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.onload=function(){
var oDiv=document.getElementsByTagName("div");
var i=0;
oDiv[0].onclick=function()
{
startMove(this,"width",300);
};
oDiv[1].onclick=function()
{
startMove(this,"height",300);
};
oDiv[2].onclick=function()
{
startMove(this,"fontSize",300);
};
oDiv[3].onclick=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.onload=function(){
var oDiv=document.getElementsByTagName("div");
var i=0;
var alpha=30;
oDiv[0].onclick=function()
{
startMove(this,"width",300);
};
oDiv[1].onclick=function()
{
startMove(this,"height",300);
};
oDiv[2].onclick=function()
{
startMove(this,"fontSize",300);
};
oDiv[3].onclick=function ()
{
startMove(this, ‘borderWidth‘, 50);
}
oDiv[4].onmouseover=function ()
{
startMove(oDiv[4], ‘opacity‘, 100);
}
oDiv[4].onmouseout=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.onload=function ()
{
var oDiv=document.getElementById(‘div1‘);
oDiv.onmouseover=function ()
{
startMove(oDiv, ‘width‘, 300, function (){
startMove(oDiv, ‘height‘, 300, function (){
startMove(oDiv, ‘opacity‘, 100);
});
});
};
oDiv.onmouseout=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.onload=function ()
{
var oDiv=document.getElementById(‘div1‘);
oDiv.onclick=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.onload=function ()
{
var oDiv=document.getElementById(‘div1‘);
oDiv.onclick=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.onload=function ()
{
var oDiv=document.getElementById(‘div1‘);
oDiv.onclick=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.onload=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>
缓冲运动之框架开始一级简单框架实例