运动基础

一、匀速运动

运动框架
在开始运动时，关闭已有定时器
把运动和停止隔开(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. ubinize的用法

    1.ubinize支持哪些选项 Usage: ubinize [options] <ini-file> Generate UBI images. An UBI image may cont ...

  2. linux内核源码在线浏览

    1.https://elixir.bootlin.com  (只能搜索函数和宏定义,功能单一) 2.https://lxr.missinglinkelectronics.com (比第一个功能多一些, ...

  3. LA 4253 箭术（二分枚举）

    https://vjudge.net/problem/UVALive-4253 题意: 有n个平行于x轴的线段,每条线段代表一个靶子.判断是否可以站在x轴上[0,W]区间内的某个位置射箭. 思路:二分 ...

  4. Solidity 官方文档中文版 2_Ethereum 智能合约介绍

    一个简单的智能合约 先从一个非常基础的例子开始,不用担心你现在还一点都不了解,我们将逐步了解到更多的细节. Storage contract SimpleStorage { uint storedDa ...

  5. FW: How to use Hibernate Lazy Fetch and Eager Fetch Type – Spring Boot + MySQL

    原帖 https://grokonez.com/hibernate/use-hibernate-lazy-fetch-eager-fetch-type-spring-boot-mysql In the ...

  6. BZOJ 3238 【AHOI2013】 差异

    题目链接:差异 写题时发现这道题当初已经用后缀数组写过了……但是既然学了后缀自动机那就再写一遍吧…… 观察一下题目所给的式子:\[\sum_{1\leqslant i < j \leqslant ...

  7. Ubuntu server 禁止显示器休眠

    Linux不让显示器休眠的方法 # setterm -blank # setterm -blank n (n为等待时间)

  8. krb5-libs这个RPM包删掉了导致ssh无法连接

    不小心把krb5-libs-1.4.3-5.1.i386.rpm这个包给删掉了~~(用了--nodeps参数,万恶之源阿~~) 背景: 安装kerberos-server时,后来发现不需要了就把安装软 ...

  9. Arachni web扫描工具

    扫描工具-Arachni from:https://blog.csdn.net/zixuanfy/article/details/52818527 ./arachni_console         ...

  10. css实现心形图案

    用1个标签实现心形图案,show you the code; <!DOCTYPE html> <html lang="en"> <head> & ...