运动框架基础

运动基础

•让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缓冲运动

时间： 2024-08-07 14:23:13

运动框架基础的相关文章

JavaScript 基础入门11 - 运动框架的封装

目录 JavaScript 运动原理 运动基础 简单运动的封装 淡入淡出 不同属性的设置 多属性值同时运动 运动回调,链式运动 缓冲运动 加入缓冲的运动框架 JavaScript 运动原理 运动基础 在JavaScript中,如何让一个页面元素动起来? 首先,我们需要了解的是,在JavaScript中如何让一个页面元素动起来. 我们先来实现一个简单的功能,当我们点击按钮之后,让一个元素动起来.并且到达500的边界之后立刻停止下来. <!DOCTYPE html> <html> &l

简易运动框架

简易的运动框架可以用来控制长宽高.位置.透明度,结合定时器可以实现简单的动画. 其中最主要也是最基础的就是获得元素的属性,我们先来看一下给元素添加样式的三种方法:行内样式.嵌入式样式.外链样式表 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 &l

js运动框架逐渐递进版

运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动. 任意值变化. 链式运动. 同时运动 (第一部分):匀速运动 运动基础 思考:如何让div动起来?如下: 设置元素为绝对定位,只有绝对定位后,left,top等值才生效. 定时器的使用(动态改变值),这里使用setInterval()每隔指定的时间执行代码. 计时器setInterval(函数,交

原生JS封装运动框架

昨天我们说了一下原生JS中常用的兼容性写法,今天我们来说一下运动框架. 正常情况下我们要写一个运动的效果会用到tween.js这么一个插件,这个东西不是一般人写出来的,因为里面涉及的运动效果都是经过一堆数学的函数运算出来的,我们平常人是写不出来的,所有我们就自己封装一个运动框架,有什么问题改起来也方便,下面我们就开始封装. 首先,我们先写一个div,设置一些简单的样式,我们就拿这个div举例子,如下代码: #div{ width: 100px; height: 100px; background

框架基础：关于ajax设计方案（三）---集成ajax上传技术

之前发布了ajax的通用解决方案,核心的ajax发布请求,以及集成了轮询.这次去外国网站逛逛,然后发现了ajax level2的上传文件,所以就有了把ajax的上传文件集成进去的想法,ajax方案的level2的改进就不介绍了,不清楚的可到前几篇博客去看看.我们直接切入主题. 概念介绍: 1. js的FormData:js中在新的版本中已经支持了FormData对象,可以初始化一个空的form,或者初始化已经存在的form,浏览器测试代码. 2. 浏览器的支持:浏览器已支持input=file的

框架基础：ajax设计方案（三）---集成ajax上传技术

之前发布了ajax的通用解决方案,核心的ajax发布请求,以及集成了轮询.这次去外国网站逛逛,然后发现了ajax level2的上传文件,所以就有了把ajax的上传文件集成进去的想法,ajax方案的level2的改进就不介绍了,不清楚的可到前几篇博客去看看.我们直接切入主题. 概念介绍: 1. js的FormData:js中在新的版本中已经支持了FormData对象,可以初始化一个空的form,或者初始化已经存在的form,浏览器测试代码. 2. 浏览器的支持:浏览器已支持input=file的

框架基础：ajax设计方案（一）---集成核心请求

框架基础:ajax设计方案(一)---集成核心请求 框架基础:ajax设计方案(一)---集成核心请求 报告,我要说话!xp被历史淘汰了,IE6 say goodbye了,太TM开心了,从此不要兼容IE6了,哈哈哈哈哈哈 报告,我要说话!IE这sb为啥不早点被杀掉呢,找工作听说要兼容IE,立马软了,唉唉唉唉唉唉 报告,我要说话!Jquery太丰富了,老子只用了几个功能,妈的,太不划算了,啊啊啊啊啊啊 ...... 好了,言归正传.对于想到整理ajax设计方案,原因如下: 从资源合理利用的角度以及

封装运动框架单个属性

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>封装运动框架的单个属性</title> <style> div{ width: 100px; height: 100px; font-weight:bold;">pink; position: absolute; left: 10px

带无缝滚动的轮播图（含JS运动框架）

今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框架的代码如下: 1 //获取样式 2 function getStyle(obj,attr){ 3 if(obj.currentStyle){ 4 return obj.currentStyle[attr]; 5 }else{ 6 return getComputedStyle(obj,false)