运动基础

一、匀速运动

运动框架
在开始运动时，关闭已有定时器
把运动和停止隔开(if/else)
<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#div1 {width:200px; height:200px; background:red; position:absolute; top:50px; left:0px;}

</style>

<script>

var timer = null;

function startMove()

{

    var oDiv=document.getElementById('div1');

    clearInterval(timer);

    timer = setInterval(function (){

        var speed = 1;

        if(oDiv.offsetLeft>=300){

            clearInterval(timer);

        }else{

            oDiv.style.left=oDiv.offsetLeft+speed+'px';

        }

    }, 30);

}

</script>

</head>

<body>

<input id="btn1" type="button" value="开始运动" onclick="startMove()" />

<div id="div1">

</div>

</body>

</html>
 
运动框架实例
例子1：“分享到”侧边栏
　　通过目标点，计算速度值
<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;}

#div1 span {position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;}

</style>

<script>

window.onload=function ()

{

    var oDiv=document.getElementById('div1');

    oDiv.onmouseover=function ()

    {

        startMove(0);

    };

    oDiv.onmouseout=function ()

    {

        startMove(-150);

    };

};

var timer=null;

function startMove(iTarget)

{

    var oDiv=document.getElementById('div1');

    clearInterval(timer);

    timer=setInterval(function (){

        var speed=0;

        if(oDiv.offsetLeft>iTarget)

        {

            speed=-10;

        }

        else

        {

            speed=10;

        }

        if(oDiv.offsetLeft==iTarget)

        {

            clearInterval(timer);

        }

        else

        {

            oDiv.style.left=oDiv.offsetLeft+speed+'px';

        }

    }, 30);

}

</script>

</head>

<body>

<div id="div1">

    <span>分享到</span>

</div>

</body>

</html>
例子2：淡入淡出的图片
　　用变量存储透明度
<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#div1 {width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3;}

</style>

<script>

window.onload=function ()

{

    var oDiv=document.getElementById('div1');

    oDiv.onmouseover=function ()

    {

        startMove(100);

    };

    oDiv.onmouseout=function ()

    {

        startMove(30);

    };

};

var alpha=30;

var timer=null;

function startMove(iTarget)

{

    var oDiv=document.getElementById('div1');

    clearInterval(timer);

    timer=setInterval(function (){

        var speed=0;

        if(alpha<iTarget)

        {

            speed=10;

        }

        else

        {

            speed=-10;

        }

        if(alpha==iTarget)

        {

            clearInterval(timer);

        }

        else

        {

            alpha+=speed;

            oDiv.style.filter='alpha(opacity:'+alpha+')';

            oDiv.style.opacity=alpha/100;

        }

    }, 30);

}

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>

二、缓冲运动

逐渐变慢，最后停止
距离越远速度越大
速度由距离决定
速度=(目标值-当前值)/缩放系数
<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#div1 {width:100px; height:100px; background:red; position:absolute; left:0px; top:50px;}

#div2 {width: 1px; height: 300px; background: black; position: absolute;left:300px;}

</style>

<script>

function startMove()

{

    var oDiv=document.getElementById('div1');

    setInterval(function (){

        var speed=(300-oDiv.offsetLeft)/10;

        speed = speed>0 ? Math.ceil(speed): Math.floor(speed);

        oDiv.style.left=oDiv.offsetLeft+speed+'px';

        document.title = speed;

    }, 30);

}

</script>

</head>

<body>

<input type="button" value="开始运动" onclick="startMove()" />

<div id="div1">

</div>

<div id="div2"></div>

</body>

</html>
例子：缓冲菜单
Bug：速度取整
speed=speed>0?Math.ceil(speed):Math.floor(speed);
跟随页面滚动的缓冲侧边栏
潜在问题：目标值不是整数时
解决方法是让它传进来的就是个整数就完了。

例子：对联悬浮框：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}

</style>

<script>

window.onscroll=function ()

{

    var oDiv=document.getElementById('div1');

    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

    //oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px';

    startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));

};

var timer=null;

function startMove(iTarget)

{

    var oDiv=document.getElementById('div1');

    clearInterval(timer);

    timer=setInterval(function (){

        var speed=(iTarget-oDiv.offsetTop)/4;

        speed=speed>0?Math.ceil(speed):Math.floor(speed);

        if(oDiv.offsetTop==iTarget)

        {

            clearInterval(timer);

        }

        else

        {

            document.title=iTarget;

            document.getElementById('txt1').value=oDiv.offsetTop;

            oDiv.style.top=oDiv.offsetTop+speed+'px';

        }

    }, 30);

}

</script>

</head>

<body style="height:2000px;">

<input type="text" id="txt1" style="position:fixed; right:0; top:0;" />

<div id="div1"></div>

</body>

</html>
 

三、匀速运动的停止条件

运动终止条件
匀速运动：距离足够近
缓冲运动：两点重合
<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}

#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}

#div3 {width:1px; height:300px; position:absolute; left:100px; top:0; background:black;}

</style>

<script>

var timer=null;

function startMove(iTarget)

{

    var oDiv=document.getElementById('div1');

    clearInterval(timer);

    timer=setInterval(function (){

        var speed=0;

        if(oDiv.offsetLeft<iTarget)

        {

            speed=7;

        }

        else

        {

            speed=-7;

        }

        if(Math.abs(iTarget-oDiv.offsetLeft)<=7)

        {

            clearInterval(timer);

            oDiv.style.left=iTarget+'px';

        }

        else

        {

            oDiv.style.left=oDiv.offsetLeft+speed+'px';

        }

    }, 30);

}

</script>

</head>

<body>

<input type="button" value="到100" onclick="startMove(100)" />

<input type="button" value="到300" onclick="startMove(300)" />

<div id="div1"></div>

<div id="div2"></div>

<div id="div3"></div>

</body>

</html>

------------

学习blus老师js(6)--js运动基础的更多相关文章

  1. 学习blus老师js(3)--定时器的使用

    1.无缝滚动——基础 物体运动基础 让Div移动起来 offsetLeft的作用 用定时器让物体连续移动   offsetLeft: 获取物体的左边距:最大的优点在于可以综合考虑所有影响这个物体位置的 ...

  2. 学习blus老师js(1)--基础

    1.网页换肤: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <t ...

  3. 学习blus老师js(5)--DOM操作应用高级

    一.表格应用 - 1 获取 tBodies.tHead.tFoot.rows.cells 一个表格可以有很多tbody,所以tBodies是数组: 一个表格只能有一个thead和tfoot,所以tHe ...

  4. 学习blus老师js(2)--深入JavaScript

    1.函数传参 可变参(不定参):arguments 参数的个数可变,参数数组   例1.求和 求所有参数的和 <!DOCTYPE HTML> <html> <head&g ...

  5. 学习blus老师js(4)--DOM

    一.DOM节点 1.获取子节点: childNodes  nodeType         节点类型 children            只包括元素,不包括文本:  子节点只算第一层.只算孩子一级 ...

  6. 第八节 JS运动基础

    运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...

  7. js运动基础2（运动的封装）

    简单运动的封装 先从最简单的封装开始,慢慢的使其更丰富,更实用. 还是上一篇博文的代码,在此不作细说. 需求:点击按钮,让元素匀速运动. <!DOCTYPE html> <html ...

  8. JS运动---运动基础（匀速运动）

    [一]运动基础 (2)基础运动案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. jquery与js的区别与基础操作

    一．什么是 jQuery jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...

随机推荐

  1. AOP Schema配置

    AOP(Aspect-Oriented Programming,面向切面编程),可以说是OOP(Object-Oriented Programing,面向对象编程)的补充和完善.OOP引入封装.继承和 ...

  2. windows下hadoop安装配置（转载）

    Windows平台安装配置Hadoop 步骤: 1. JDK安装(不会的戳这) 2. 下载hadoop2.5.2.tar.gz,或者自行去百度下载. 3. 下载hadooponwindows-mast ...

  3. mysql Alter 的问题

    转自:https://blog.csdn.net/c_enhui/article/details/50903351 -- 设置或删除列的默认值.该操作会直接修改.frm文件而不涉及表数据. 此操作很快 ...

  4. Apache-commons-io包的使用及常用方法

    首先,我们要下载FileUtils相关的Apache-commons-io jar包以及api文档.FileUtils类库的下载页面在: http://commons.apache.org/prope ...

  5. 一定要用Windows自带的记事本编辑 applicationHost.config

    访问IIS时,发生了一个 HipIISEngineStub.dll不能读取的问题.(Windows Event可以确认). 很容易在网上找到了对策, http://chrisfleischhacker ...

  6. wpf 中关于Image中样式Style的一点总结

    第一种写法: (1):定义样式 <Style x:Key="imgStyle" TargetType="Image">  : <!-- Tar ...

  7. C#正则_取出标签内的内容（非贪婪）

    using System.Text.RegularExpressions; /// <summary>        /// 执行正则提取出值        /// </summar ...

  8. 前端构建工具 Grunt 入门

    之前也介绍过前端构建工具 Ant 和 Yeoman,其中 Yeoman 工具就包含了 Grunt 所以就不多说.那么与 Ant 相比 Grunt 有这么几个优点: Javascript 语法,相比 A ...

  9. BZOJ2958 序列染色

    果然清华集训的题目...显然的DP题但是不会做... 我们令f[i][j][w]表示状态方程 w表示到了字符串的第w个 i = 0, 1, 2分别表示k个B和k个W都没填上.k个B填上了k个W没填上. ...

  10. C primer plus 5 读书笔记3

    1.ASCII 码前31位控制字符(非打印字符)的表示方法:(1)使用ASCII码表示比如蜂鸣字符用7(十进制)表示:(2),使用特殊的符号序列,即转义序列.如 ‘\a’表示蜂鸣字符.(3),使用十六 ...