运动基础

一、匀速运动

运动框架
在开始运动时，关闭已有定时器
把运动和停止隔开(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. 近期(17年三月至四月) TODOlist

    前言 今天突然发现好久没有更新博客了,最近确实记录的内容不多,也沉迷Gayhub无法自拔,和那只北极熊愉快的玩耍.不知道为什么记性变差了许多,所以简单的列一个近期的TODOlist给自己一个提醒. T ...

  2. python 获取列表大于指定长度的元素

    def long_words(n, str): word_len = [] txt = str.split(" ") for x in txt: if len(x) > n: ...

  3. session与cookie详解

    session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我们的会员卡才会获取优 ...

  4. JavaScript返回上一页和返回上一级页面并刷新

    JavaScript返回上一页和刷新当前页 window.history.go(-1); //返回上一页 window.history.back(); //返回上一页 //如果要强行刷新的话就是:wi ...

  5. Android之网络图片加载的5种基本方式

    学了这么久,最近有空把自己用到过的网络加载图片的方式总结了出来,与大家共享,希望对你们有帮助. 此博客包含Android 5种基本的加载网络图片方式,包括普通加载HttpURLConnection.H ...

  6. Hive之基本操作

    1,CREATE table. CREATE [EXTERNAL] TABLE [IF NOT EXISTS] table_name [(col_name data_type [COMMENT col ...

  7. fatal error LNK1112: 模块计算机类型“X86”与目标计算机类型“x64”冲突——我的解决方案

    本文转载于:http://blog.csdn.net/tfy1028/article/details/8660823 win7 下,安装的VS2010,然后搭配opencv2.4.3运行,报错为:fa ...

  8. StringUtils工具类的isBlank()方法使用说明

  9. oracle修改字符编码

    ALTER DATABASE character set INTERNAL_USE ZHS16GBK;  ALTER DATABASE CHARACTER SET ZHS16GBK;  oracle修 ...

  10. pixi之动画

    一.循环动画 let sprite; Loader.add("images/imgs.json").load(setup); function setup() { //利用oran ...