• 运动框架基础

    运动基础
    •让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 {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 {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 {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 {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 {100px; height:200px; background:#CCC; position:absolute; left:-100px;}
#div1 span {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 {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="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 {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 {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缓冲运动
  • 相关阅读:
    C# Enum,Int,String的互相转换
    彻底弄懂css中单位px和em,rem的区别
    HTML特殊字符大全2
    网页特殊符号HTML代码大全
    HTML特殊字符大全
    收集一些特殊的符号
    jQuery 获取屏幕高度、宽度
    HTMLParser 使用详解
    C# 操作Word知识汇总
    C#编程总结（一）序列化
  • 原文地址：https://www.cnblogs.com/hack-ing/p/5560022.html
Copyright © 2020-2023  润新知