运动框架基础

时间：2016-06-05 06:34:27 阅读：222 评论：0 收藏：0 [点我收藏+]

标签：

运动基础

•让Div运动起来

•速度——物体运动的快慢

•运动中的Bug

–不会停止

–速度取某些值会无法停止

<!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>
<style>
#div1 {width:100px; height:100px; position:absolute; background:red; left:0; top:50px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function startMove()
{
    var oDiv=document.getElementById(‘div1‘);
    
    setInterval(function (){
        oDiv.style.left=oDiv.offsetLeft+10+‘px‘;
    }, 30);
}

</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
</body>
</html>

not stop

–到达位置后再点击还会运动

<!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>
<style>
#div1 {width:100px; height:100px; position:absolute; background:red; left:0; top:50px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var timer=null;

function startMove()
{
    var oDiv=document.getElementById(‘div1‘);
    //开启定时器
    timer=setInterval(function (){
        if(oDiv.offsetLeft==300)
        {
            //判断oDiv离浏览器的距离是300不
            //为真则关闭定时器
            clearInterval(timer);
        }
        //在定时器内每次left加10，
        oDiv.style.left=oDiv.offsetLeft+10+‘px‘;
    }, 30);
}

</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
</body>
</html>

movable div

–重复点击速度加快

<!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>
<style>
#div1 {width:100px; height:100px; position:absolute; background:red; left:0; top:50px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var timer=null;

function startMove()
{
    var oDiv=document.getElementById(‘div1‘);
    
    timer=setInterval(function (){
        var iSpeed=7;
        
        if(oDiv.offsetLeft>=300)
        {
            clearInterval(timer);
        }
        oDiv.style.left=oDiv.offsetLeft+iSpeed+‘px‘;
    }, 30);
}

</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
</body>
</html>

repeated onclick

匀速运动

<!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>
<style>
#div1 {width:100px; height:100px; position:absolute; background:red; left:0; top:50px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var timer=null;

function startMove()
{
    var oDiv=document.getElementById(‘div1‘);
    
    clearInterval(timer);
    timer=setInterval(function (){
        var iSpeed=5;
        
        if(oDiv.offsetLeft>=300)    //是否到达终点
        {
            clearInterval(timer);    //到达终点
        }
        else
        {
            oDiv.style.left=oDiv.offsetLeft+iSpeed+‘px‘;    //到达之前
        }
    }, 30);
}

</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
</body>
</html>

regular moving

•速度不变

运动框架

•在开始运动时，关闭已有定时器

•把运动和停止隔开(if/else)

l运动框架实例

•例子1：“分享到”侧边栏

–通过目标点，计算速度值

<!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>
<style>
#div1 {width:100px; height:200px; background:#CCC; position:absolute; left:-100px;}
#div1 span {width:20px; height:60px; line-height:20px; text-align:center; left:100px; top:70px; background:yellow; position:absolute;}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);
    
    oDiv.onmouseover=function ()
    {
        startMove(0);
    }
    
    oDiv.onmouseout=function ()
    {
        startMove(-100);
    }
}
var timer=null;

function startMove(iTarget)
{
    var oDiv=document.getElementById(‘div1‘);
    //关闭  开启定时器
    clearInterval(timer);
    timer=setInterval(function (){
        var iSpeed=0;
        //判断left 是否小于目标距离
        if(oDiv.offsetLeft<iTarget)
        {
            iSpeed=10;
        }
        else
        {
            iSpeed=-10;
        }
        
        if(oDiv.offsetLeft==iTarget)
        {
            clearInterval(timer);
        }
        else
        {
            oDiv.style.left=oDiv.offsetLeft+iSpeed+‘px‘;
        }
    }, 30);
}
</script>
</head>

<body>
<div id="div1">
    <span>分享到</span>
</div>
</body>
</html>

share to

•例子2：淡入淡出的图片

–用变量存储透明度

<!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>
<style>
#img1 {filter:alpha(opacity:30); opacity:0.3;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
    var oImg=document.getElementById(‘img1‘);
    
    oImg.onmouseover=function ()
    {
        startMove(100);
    }
    
    oImg.onmouseout=function ()
    {
        startMove(30);
    }
}
var timer=null;

var alpha=30;

function startMove(iTarget)
{
    var oImg=document.getElementById(‘img1‘);
    
    clearInterval(timer);
    timer=setInterval(function (){
        var iSpeed=0;
        //判断现在值和目标值
        if(alpha<iTarget)
        {
            iSpeed=1;
        }
        else
        {
            iSpeed=-1;
        }
        
        if(alpha==iTarget)
        {
            clearInterval(timer);
        }
        else
        {
            alpha+=iSpeed;
            
            oImg.style.filter=‘alpha(opacity:‘+alpha+‘)‘;
            oImg.style.opacity=alpha/100;
            
            document.title=alpha;
        }
    }, 30);
}
</script>
</head>

<body>
<img id="img1" src="Desert.jpg" />
</body>
</html>

filter opacity

缓冲运动

•逐渐变慢，最后停止

<!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>
<style>
#div1 {width:100px; height:100px; position:absolute; background:red; left:0; top:50px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var timer=null;

function startMove(iTarget)
{
    var oDiv=document.getElementById(‘div1‘);
    
    clearInterval(timer);
    timer=setInterval(function (){
        var iSpeed=(iTarget-oDiv.offsetLeft)/8;
        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
        /*if(iSpeed>0)
        {
                       //向上取整
            iSpeed=Math.ceil(iSpeed);
        }
        else
        {    向下取整
            iSpeed=Math.floor(iSpeed);
        }*/
        
        if(oDiv.offsetLeft==iTarget)    //是否到达终点
        {
            clearInterval(timer);    //到达终点
        }
        else
        {
            oDiv.style.left=oDiv.offsetLeft+iSpeed+‘px‘;    //到达之前
        }
        
        document.title=oDiv.offsetLeft+‘,speed=‘+iSpeed;
    }, 30);
}

</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove(300)" />
<div id="div1"></div>
<span style="width:1px; height:300px; background:black; position:absolute; left:300px; top:0;"></span>
</body>
</html>

wind down

•距离越远速度越大

–速度由距离决定

–速度=(目标值-当前值)/缩放系数

•例子：缓冲菜单

<!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>
#div1 {width:100px; height:100px; background:red; position:absolute; right:0;}
</style>
<script>
window.onscroll=function()
{
    var oDiv=document.getElementById(‘div1‘);
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+‘px‘;
    }
</script>
</head>

<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>

menu bar one

–Bug：速度取整

–跟随页面滚动的缓冲侧边栏

»潜在问题：目标值不是整数时

<!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>
#div1 {width:100px; height:100px; background:red; position:absolute; right:0;}
</style>
<script>
window.onscroll=function()
{
    var oDiv=document.getElementById(‘div1‘);
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var t=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+‘px‘;
    startMove(parseInt(t));
    }
var timer=null;
function startMove(iTarget)
{
    var oDiv=document.getElementById(‘div1‘);
    clearInterval(timer)
    timer=setInterval(function(){
        //算速度 取整
        var iSpeed=(iTarget-oDiv.offsetTop)/8;
        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
        
        //判断当前速度是否等于目标速度
        if(oDiv.offsetTop==iTarget)
        {
            clearInterval(timer);
            }
        else
        {
            oDiv.style.top=oDiv.offsetTop+iSpeed+‘px‘;
            }
            //在txt打印出来
            txt1.value=oDiv.offsetTop+‘目标‘+iTarget;        
        },30);
    }
</script>
</head>

<body style="height:2000px;">
<input id="txt1" type="text" style="position:fixed; top:20px;" />
<div id="div1"></div>
</body>

menu bar two

运动终止条件

•匀速运动：距离足够近

•缓冲运动：两点重合

本节内容

l运动框架

l匀速运动

l缓冲运动

运动框架基础

标签：

原文地址：http://www.cnblogs.com/hack-ing/p/5560022.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行