- lang="en">
- charset="UTF-8">
- * { margin: 0; padding: 0; } #box { width: 100px; height: 100px; background-color:
- red; position: absolute; }
- id="btn">
往右走
- id="box">
- src="js/MyTool.js">
- Windows.addEventListener('load',
- function(ev) {
- // 1. 变量
- var target = 800,
- timer = null,
- speed = 0,
- box = myTool.$('box');
- // 2. 监听点击
- myTool.$('btn').addEventListener('click',
- function() {
- // 2.1 先清后设
- clearInterval(timer);
- // 2.2 设置定时器
- // begin = begin + (end - begin) * 0.2
- // 步长
- timer = setInterval(function() {
- // 2.3 求出步长
- speed = (target - box.offsetLeft) * 0.2;
- console.log('之前:' + speed);
- speed = Math.ceil(speed);
- console.log('之后:' + speed);
- // 2.4 动起来
- box.style.left = box.offsetLeft + speed + 'px';
- box.innerText = box.offsetLeft;
- // 2.5 清除定时器
- if (box.offsetLeft === target) {
- clearInterval(timer);
- }
- },
- 20);
- });
- });
- Windows.addEventListener('load', function (ev) {
- var box = myTool.$('box');
- // 向右走
- myTool.$('btn').addEventListener('click', function () {
- buffer(box, 800);
- });
- // 向左走
- myTool.$('btn1').addEventListener('click', function () {
- buffer(box, 200);
- });
- });
- /**
- * 缓动东环函数
- * @param {Object}eleObj
- * @param {Number}target
- */
- function buffer(eleObj, target) {
- // 1.1 先清后设
- clearInterval(eleObj.timer);
- // 1.2 定义变量
- var speed = 0;
- // 1.2 设置定时器
- eleObj.timer = setInterval(function () {
- // 2.3 求出步长
- speed = (target - eleObj.offsetLeft) * 0.2;
- speed = (target> eleObj.offsetLeft) ? Math.ceil(speed) : Math.floor(speed);
- // 2.4 动起来
- eleObj.style.left = eleObj.offsetLeft + speed + 'px';
- eleObj.innerText = eleObj.offsetLeft;
- // 2.5 清除定时器
- if(eleObj.offsetLeft === target){
- clearInterval(eleObj.timer);
- }
- }, 20);
- }
封装缓存动画
来源: http://www.bubuko.com/infodetail-3128813.html