javascript每日一练(十)——运动二:缓冲运动
一、缓冲运动
实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed;
需要注意:当计算出来的速度有小数时需要取整;
(500 - oDiv.offsetLeft) / 7 = iSpeed; iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
例子1:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>缓冲运动</title> <style> #div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:0;} span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;} </style> <script> window.onload = function() { var oBtn = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn.onclick = function() { startMove(oDiv, 300); }; }; var timer = null; function startMove(obj, iTarget) { clearInterval(timer); timer = setInterval(function(){ var iSpeed = (iTarget - obj.offsetLeft)/8; iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(iTarget==obj.offsetLeft){ clearInterval(timer); }else{ obj.style.left = obj.offsetLeft + iSpeed + 'px'; } }, 30); } </script> </head> <body> <input id="btn1" type="button" value="移动" /> <div id="div1"></div> <span></span> </body> </html>
例子2:侧边栏滑动
<!doctype html> <html> <head> <meta charset="utf-8"> <title>侧边栏滑动</title> <style> #div1{ width:100px; height:100px; background:red; position:absolute; right:0; top:0;} </style> <script> window.onload = window.onscroll = function() { var oDiv = document.getElementById('div1'); var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop; var clientHeight = document.documentElement.clientHeight; var iH = (clientHeight - oDiv.offsetHeight)/2 + iScrollTop; //oDiv.style.top = iH + 'px'; startMove(oDiv, parseInt(iH)); }; var timer = null; function startMove(obj, iTarget) { clearInterval(timer); timer = setInterval(function(){ var iSpeed = (iTarget - obj.offsetTop) / 8; iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(obj.offsetTop == iTarget){ clearInterval(timer); }else{ obj.style.top = obj.offsetTop + iSpeed + 'px'; } }, 30); } </script> </head> <body style="height:2000px;"> <div id="div1"></div> </body> </html>
javascript每日一练(十)——运动二:缓冲运动的更多相关文章
- javascript每日一练(十四)——弹性运动
一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- javascript每日一练—运动
1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- JS运动基础(二) 摩擦运动、缓冲运动
摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...
- javascript每日一练(一)——javascript基础
一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...
- JavaScript 运动(缓冲运动,多物体运动 ,多物体多值运动+回调机制)
匀速运动 (当需要物体做匀速运动直接调用statMove函数) function startMove(dom,targetPosetion){ //dom : 运动对象,targetPositio ...
- javascript每日一练(十二)——运动框架
运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...
- javascript每日一练(十三)——运动实例
一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- javascript每日一练(十一)——多物体运动
一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <h ...
- javascript每日一练(九)——运动一:匀速运动
一.js的运动 匀速运动 清除定时器 开启定时器 运动是否完成:a.运动完成,清除定时器:b.运动未完成继续 匀速运动停止条件:距离足够近 Math.abs(当然距离-目标距离) < 最小运动 ...
随机推荐
- javadoc入门
斌斌 (给我写信) 原创博文(http://blog.csdn.net/binbinxyz),转载请注明出处! java凝视 java里面有两种类型的凝视.一种是以"/*"起头,以 ...
- 令人作呕的OpenSSL
在OpenSSL心脏出血之后,我相信非常多人都出了血,而且流了泪...网上瞬间出现了大量吐嘈OpenSSL的文章或段子,仿佛内心的窝火一瞬间被释放了出来,跟着这场疯闹,我也吐一下嘈,以雪这些年被Ope ...
- 淘特房产CMS系统 7.5
资源描写叙述: 淘特房产CMS系统採用淘特AspCms开发,全部前台信息生成静态HTM,提供了楼盘.二手房.房产中介.房产经济人.业主社区等管理模块,集成了淘特CMS与动网论坛,Discuz,Oblo ...
- 面试之ajax原理(转载)
总结1 总结2 AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术, 是几种原有技术的结合体. ...
- js 获取星期
var week; if (new Date().getDay() == 0) week = "星期日"; if (new Date() ...
- 第一篇:GCD多线程的概念
1.什么叫GCD? 简单来说就是:Grand Central Dispatch的简称,中文翻译就是:”牛逼的中枢调度器“ 这是纯C语言,还提供了非常多强大的函数 2.GCD的相对优势: (1)GCD是 ...
- C# Best Practices - Building Good Classes
Building a Class The last four refer as members Signature Accessiblity modifier (Default:internal) c ...
- django开发简易博客(三)
一.静态文件的使用 首先,新建static目录,目录下分别建立css.js.img三个子目录 修改settings.py文件 STATICFILES_DIRS = ( 'F:/web/static', ...
- CSS3框架!
http://usablica.github.io/front-end-frameworks/compare.html?v=2.0
- android自动化(appium)
目录 一.Appium环境搭建 1.下载nodejs,并安装 2.下载appium,并安装 3.安装python.安装pip.安装appium 4.安装java的jdk 5.安装andriod的sdk ...