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的函数
Jan 31 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
js获取域名的方法
Jan 27 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
js 调用百度分享功能
Feb 27 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
用js实现放大镜效果
Oct 28 Javascript
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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
php 三维饼图的实现代码
2008/09/28 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
python3写爬取B站视频弹幕功能
2017/12/22 Python
详解Python自建logging模块
2018/01/29 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
考试保密承诺书
2014/08/30 职场文书
滴水洞导游词
2015/02/10 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python
SQL Server 中的事务介绍
2022/05/20 SQL Server