JavaScript缓冲运动实现方法(2则示例)


Posted in Javascript onJanuary 08, 2016

本文实例讲述了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运动效果与技巧汇总》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
面向对象Javascript核心支持代码分享
May 23 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
npm 语义版本控制详解
Sep 10 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 #Javascript
基于javascript实现右下角浮动广告效果
Jan 08 #Javascript
jQuery数据类型小结(14个)
Jan 08 #Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 #Javascript
基于jquery实现图片上传本地预览功能
Jan 08 #Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 #Javascript
jQuery实现本地预览上传图片功能
Jan 08 #Javascript
You might like
ThinkPHP php 框架学习笔记
2009/10/30 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
python列表的常用操作方法小结
2016/05/21 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
python实现电子词典
2020/03/03 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
python构造IP报文实例
2020/05/05 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
社会保险接收函
2014/01/12 职场文书
2014年元旦活动方案
2014/02/15 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
毕业生见习报告总结
2014/11/08 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
Python中itertools库的四个函数介绍
2022/04/06 Python