封装缓动 (变速) 动画 --- 增加任意一个属性
1. 本来的变速动画函数, 是获取特定的属性(之前案例是向右移动, 所以获取的是 left 属性)
2. 现在改变为, 获取任意一个属性, 使其移动到指定的 target, 相当于在原 animate(element,target)函数上, 增加了一个属性, 变为 animate(element, attr, target)函数
3. 改动一: 在获取当前元素的位置, var current, 用 getStyle 来获取, 因为得到的是字符串类型, 包一个 parseInt 改为数字类型;
4. 改动二: 移动步数时候, 元素的当前位置等于 current+"px",element.style.left 更新为 element.style[attr], 特定的元素用任意元素取代
获得的效果: 就是可以使任意元素的, 任意一个样式属性, 移动到指定的目标位置
attr 位置, 可以改为 left, 可以改为 heigth, 可以改为 top, 可以改为 bgc.... 等等
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- title
- </title>
- <style>
- * { margin: 0; padding: 0; } div { margin-top: 20px; width: 200px; height:
- 100px; background-color: green; position: absolute; left: 0; top: 0; }
- </style>
- </head>
- <body>
- <input type="button" value="移动到 400px" id="btn1" />
- <input type="button" value="移动到 800px" id="btn2" />
- <div id="dv">
- <script src="common.js">
- </script>
- <script>
- // 点击按钮移动 div
- my$("btn1").onclick = function() {
- // 获取 div 此时 left 的当前位置, 达到目标 400
- // animate(my$("dv"),"left",400);
- // 获取 div 此时的宽度, 达到目标 200
- animate(my$("dv"), "width", 200);
- };
- // 获取任意的一个属性的当前的属性值: 改用之前封装的 getStyle 函数
- function getStyle(element, attr) {
- // 判断浏览器是否支持这个方法
- return Windows.getComputedStyle ? Windows.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
- }
- // 匀速动画
- //element--- 元素
- //attr--- 属性名字
- //target--- 目标位置
- function animate(element, attr, target) {
- // 清理定时器
- clearInterval(element.timeId);
- element.timeId = setInterval(function() {
- // 获取元素的当前位置
- var current = parseInt(getStyle(element, attr)); // 数字类型 //===============================
- // 移动的步数
- var step = (target - current) / 10;
- step = step > 0 ? Math.ceil(step) : Math.floor(step);
- current += step;
- element.style[attr] = current + "px"; //============================================
- if (current == target) {
- // 清理定时器
- clearInterval(element.timeId);
- }
- // 测试代码:
- console.log("目标位置:" + target + ", 当前位置:" + current + ", 每次移动步数:" + step);
- },
- 20);
- }
- </script>
- </div>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3340679.html