运动基础

一、匀速运动

运动框架
在开始运动时，关闭已有定时器
把运动和停止隔开(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. Proxy（代理）

    意图: 为其他对象提供一种代理以控制对这个对象的访问. 适用性: 在需要用比较通用和复杂的对象指针代替简单的指针的时候,使用Proxy模式.下面是一 些可以使用Proxy 模式常见情况: 1) 远程代 ...

  2. Html之网页分屏浏览

    Hi!  Every Body!Welcome to my blog! My name is Caiduping,I hope we learn to make progress together! ...

  3. node的开发者环境设置丢失

    1.我看到的最简单的一种:evn 默认的值是  development var app = express(); if (app.get('env') === 'development') { req ...

  4. WPF 动画 和 色彩 的随笔

    1:善于用“Margin”做动画效果 2:色彩处理通常用:Brush,而Brush(如:SolidColorBrush)的实例化,通常需要载入“ System.Windows.Media.Color” ...

  5. 使用Bootstrap的suggest下拉插件

    前端代码 /*html代码*/ <input type="text" class="form-control search_ul" id="ca ...

  6. hdu4565矩阵快速幂

    这题太坑了...刚开始以为可以用|a+sqrt(b)  1|水过...结果tle,还一直想明明我logn的做法怎么可能tle.. |    0           1| 实在无奈看的题解 (a+sqr ...

  7. PowerDesigner16工具学习笔记-建立BPM

    根据不同用途,BPM分为分析性(Analysis).执行型(Executable)和协作型(Collaborative) BPM的类型 业务流程语言 描述  分析型  Analysis  提供流程层次 ...

  8. 前端 crypto-js aes 加解密

    下载:npm install crypto-js --save 需要定义两个方法 ,分别是用于加密和解密,这里我将它放在了 utils 文件夹下,命名为 secret.js ,其具体代码如下: con ...

  9. iOS导航栏的正确隐藏方式

    在项目中经常碰到首页顶部是无限轮播,需要靠最上面显示.有的设置导航栏为透明等一系列的方法,这个可以借助第三方.或者干脆简单粗暴的直接隐藏掉导航栏.可是push到下一个页面的时候是需要导航栏的,如何做了 ...

  10. 6.4-6.5 使用form表单验证，完善登录页面

    之前是使用自定义的类来实现登录逻辑,现在使用django内置的form表单验证,用继承django的view来实现登录页面. users > views.py 的内容是: from django ...