（1）手风琴效果

　　分析：

　　　　

（2）基础缓冲运动

　　

　　接下来取整

　　原因：

px为计算机识别的最小单位，1px无法再往下拆分。所以css如果取值200.5px，解析时计算机会自动将其改为200px
注意：这里的数值并没有四舍五入计算，200.9px最后依然是200px

　　速度不能是小数，需要取整，所以接下来进行取整

　　因为从左到右运动和从右到左运动不一样，所以需要判断

　　

（3）右侧悬浮框缓冲运动

　　

　　

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

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

<style>

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

</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+scrollTop+'px';

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

};

var timer=null;

function startMove(iTarget)

{

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

    clearInterval(timer);

    timer=setInterval(function (){

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

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

        if(oDiv.offsetTop==iTarget)

        {

            clearInterval(timer);

        }

        else

        {

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

        }

    }, );

}

</script>

</head>

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

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

</body>

</html>

（4）运动应用

（5）多物体运动

核心：1、每个元素添加自定义属性timer‘2、多物体不能共用属性和数值’

多物体淡入淡出

（6）

.

JS运动---运动基础（缓冲运动）的更多相关文章

  1. 点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)

    效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...

  2. 点滴积累【JS】---JS小功能（JS实现多物体缓冲运动)

    效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: <head ru ...

  3. javascript每日一练（十）——运动二：缓冲运动

    一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...

  4. javaScript运动框架之缓冲运动

    缓冲运动 逐渐变慢,最后停止 距离越远速度越大   速度由距离决定 速度=(目标值-当前值)/缩放系数 存在Bug 速度取整 跟随页面滚动的缓冲侧边栏 潜在问题:目标值不是整数时 缓冲运动的停止条件 ...

  5. js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  6. JS缓冲运动案例

    点击"向右"按钮,红色的#red区块开始向右缓冲运动,抵达到黑色竖线位置自动停止,再次点击"向右"#red区块也不会再运动.点击"向左"按钮 ...

  7. JS运动基础(二) 摩擦运动、缓冲运动

    摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...

  8. js实现缓冲运动，和匀速运动有点不相同

    缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...

  9. js缓冲运动

    缓冲运动 现象:逐渐变慢,最后停止 原理:距离越远,速度越大 速度的计算方式: 1,速度由距离决定 2,速度＝(目标值-当前值)/缩放系数 说明:速度为正负数时,也决定了物体移动的方向 示例:div缓 ...

随机推荐

  1. vivo web service：亿万级规模web服务引擎架构

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/ovOS0l9U5svlUMfZoYFU9Q vivo web service是开发团队围绕奇点 ...

  2. css实现内容不相同的左右两个div等高

    问题提出 现在有两个div左右排列,但是两个div的内容不相同,如何设置两个div的css做到在两个div等高排列呢? 下面是网上找的3种实现方法,觉得很有代表性,所以索性收藏起来. 方法一 通过父元 ...

  3. （八十）c#Winform自定义控件-分割线标签-HZHControls

    官网 http://www.hzhcontrols.com 前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kww ...

  4. WPF数据可视化-趋势图

    环境: 系统: Window 7以上: 工具:VS2013及以上. 研发语言及工程: C# WPF 应用程序 效果: ​ ​ 简介: 不需要调用第三方Dll, 仅仅在WPF中使用贝塞尔曲线,不到500 ...

  5. BlockStack常见词语

    Browser: 用户用来浏览并使用基于 blockstack 网络开发的 app. CLI: Cli 工具用来管理个人的 blockstack id. blockstack.js (and othe ...

  6. Android五大布局详解——TableLayout（表格布局）

    TableLayout 前面所学的LinearLayout和RelativeLayout两大布局已经完全适用于各种开发条件下,其他的布局仅供参考学习,毕竟知识就是力量,以后的开发过程中万一遇到也能游刃 ...

  7. 关于SQL2005备份和还原的语法操作

    原数据库:restore database 练习版 from disk='D:\db-recovery\@@@.BAK' WITH REPLACE/WITH NORECOVERY备份数据库:backu ...

  8. leetcode题解：两数之和

    给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样的元 ...

  9. Appium(四)：真实机第一个appium程序、模拟器第一个appium程序、查看元素

    1. 真实机第一个appium程序 学完了前面的知识,也将环境搭建好了,接下来我们就正式开始appium的学习了. 在做app自动化的时候,我们肯定是针对某个产品.某个软件进行测试,那么我们一定是先让 ...

  10. Objective-C中 #include 和 #import 的区别

    由于 Objective-C 兼容 C 语言,所以导入文件时, 可以使用 #include,也可以使用 #import (Objective-C 新增的) 如: #include <stdio. ...