运动基础

一、匀速运动

运动框架
在开始运动时，关闭已有定时器
把运动和停止隔开(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. 【图片下载-代码】java下载网络图片资源例子

    /** * @Description 下载网络图片资源 * @param imageUrl 图片地址 * @return String 下载后的地址 * @author SUNBIN * @date ...

  2. C++ 自定义错误类

    #include <iostream> #include <exception> using namespace std; struct MyException : publi ...

  3. Codeforces Round #321 (Div. 2) D. Kefa and Dishes（状压dp）

    http://codeforces.com/contest/580/problem/D 题意: 有个人去餐厅吃饭,现在有n个菜,但是他只需要m个菜,每个菜只吃一份,每份菜都有一个欢乐值.除此之外,还有 ...

  4. BZOJ 4011 【HNOI2015】 落忆枫音

    题目链接:落忆枫音 以下内容参考PoPoQQQ大爷的博客 首先我们先来考虑一下如果没有新加入的那条边,答案怎么算. 由于这是一个\(DAG\),所以我们给每个点随便选择一条入边,最后一定会构成一个树形 ...

  5. install ros-indigo-map-msgs

    CMake Warning at /opt/ros/indigo/share/catkin/cmake/catkinConfig.cmake: (find_package): Could not fi ...

  6. python 返回列表中的偶数

    def is_even_num(l): enum = [] for n in l: == : enum.append(n) return enum print(is_even_num([, , , , ...

  7. 【Python】实现将testlink上的用例指定格式保存至Excel，用于修改上传

    背景 前一篇博客记录的可以上传用例到testlink指定用例集的脚本,内部分享给了之后,同事希望能将testlink上原有的用例下载下来,用于下次修改上传,所有有了本文脚本. 具体实现 获取用例信息 ...

  8. (GoRails) Credential

    之前的博客:https://www.cnblogs.com/chentianwei/p/9167489.html Guide:  https://guides.rubyonrails.org/secu ...

  9. Android 之WebView实现下拉刷新和其他相关刷新功能

    最近项目中需要用到WebView下拉刷新的功能,经过查找资料终于完成了此功能,现在拿出来和大家分享一下.希望对大家有所帮助. 效果如下图:   代码: activity.xml <?xml ve ...

  10. 利用Pandoc将markdown文件转化为pdf

    利用Pandoc将markdown文件转化为pdf 准备工作 安装pandoc 安装MiKTeX 将markdown文件转换为pdf 准备工作 安装pandoc Windows下安装pandoc很容易 ...