JavaScript变速动画函数封装添加任意多个属性

来源：懂视网责编：小采时间：2020-11-27 21:59:24

JavaScript变速动画函数封装添加任意多个属性

JavaScript变速动画函数封装添加任意多个属性:下面通过实例代码给大家介绍JavaScript变速动画函数封装添加任意多个属性，具体代码如下所示： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></tit

推荐度：

点击下载本文 文档为doc格式

导读JavaScript变速动画函数封装添加任意多个属性:下面通过实例代码给大家介绍JavaScript变速动画函数封装添加任意多个属性，具体代码如下所示： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></tit

下面通过实例代码给大家介绍JavaScript变速动画函数封装添加任意多个属性，具体代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 * {
 margin: 0;
 padding: 0;
 }
 div {
 width: 200px;
 height: 100px;
 background-color: pink;
 position: absolute;
 }
 </style>
</head>
<body>
<input type="button" id="bt" value="显示效果"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
 //点击按钮，使元素的宽度到达一个值，高度到达一个值
 //获取任意元素的任意属性值
 function getStyle(element, attr) {
 //判断浏览器是否支持这个方法
 return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
 }
 //使任意元素，改变多个值的大小
 function animate(element, json) {
 //清理定时器
 clearInterval(element.timeId);
 //创建定时器
 element.timeId = setInterval(function () {
 //默认全部到达目标
 var flag = true;
 //循环遍历要改变的属性和值
 for (var attr in json) {
 //过去该属性的当前的值
 var current = parseInt(getStyle(element, attr));
 //当前属性对应的目标值
 var target = json[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) {
 flag = false;
 }
 }
 if (flag) {
 //清理定时器
 clearInterval(element.timeId);
 }
 //测试代码
 console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
 }, 20)
 }
 my$("bt").onclick = function () {
 animate(my$("dv"), {"width": 300, "left": 100, "top": 50});
 };
</script>
</body>
</html>

common.js:

/**
 * Created by Administrator on 2018/8/18.
 */
/**
 * Created by Administrator on 2016/7/27.
 */
/**
 * Created by Administrator on 2016/7/21.
 *
 * 次文件来自 很牛x的程序员 .
 *
 * 作者:无名
 */
/*
 * 该函数是返回的是指定格式的日期,是字符串类型
 * 参数:date ----日期
 * 返回值: 字符串类型的日期
 * */
function getDatetoString(date) {
 var strDate;//存储日期的字符串
 //获取年
 var year = date.getFullYear();
 //获取月
 var month = date.getMonth() + 1;
 //获取日
 var day = date.getDate();
 //获取小时
 var hour = date.getHours();
 //获取分钟
 var minute = date.getMinutes();
 //获取秒
 var second = date.getSeconds();
 hour = hour < 10 ? "0" + hour : hour;
 minute = minute < 10 ? "0" + minute : minute;
 second = second < 10 ? "0" + second : second;
 //拼接
 strDate = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;//隐藏问题,关于变量声明的位置
 return strDate;
}
//根据id获取元素对象
function my$(id) {
 return document.getElementById(id);
}
/*
 *
 * innerText属性IE中支持
 * textContent火狐中支持
 * dvObj.innerText="您好";设置innerText的值
 * console.log(dvObj.innerText);获取innerText的值
 * 因为上述原因,inerText有时候需要设置值，有时候需要获取值
 * 所以,需要写一个兼容的代码能在火狐中使用,也可以在IE中使用
 *
 *
 * */
/*
 *设置innerText属性的值
 * element-----为某个元素设置属性值
 * content-----设置的值
 * */
function setInnerText(element, content) {
 if (typeof element.textContent === "undefined") {
 //IE浏览器
 element.innerText = content;
 } else {
 element.textContent = content;
 }
}
/*
 * 获取innerText属性的值
 * element 要获取的元素
 * 返回的是该元素的innerText值
 * */
function getInnerText(element) {
 if (typeof element.textContent === "undefined") {
 //IE浏览器
 return element.innerText;
 } else {
 return element.textContent;
 }
}
//获取当前元素前一个元素
function getPreviousElement(element) {
 if (element.previousElementSibling) {
 return element.previousElementSibling;
 } else {
 var ele = element.previousSibling;
 while (ele && ele.nodeType !== 1) {
 ele = ele.previousSibling;
 }
 return ele;
 }
}
//获取当前元素的后一个元素
function getNextElement(element) {
 if (element.nextElementSibling) {
 return element.nextElementSibling;
 } else {
 var ele = element.nextSibling;
 while (ele && ele.nodeType !== 1) {
 ele = ele.nextSibling;
 }
 return ele;
 }
}
//获取父元素中的第一个元素
function getFirstElementByParent(parent) {
 if (parent.firstElementChild) {
 return parent.firstElementChild;
 } else {
 var ele = parent.firstChild;
 while (ele && ele.nodeType !== 1) {
 ele = ele.nextSibling;
 }
 return ele;
 }
}
//获取父元素中的最后一个元素
function getLastElementByParent(parent) {
 if (parent.lastElementChild) {
 return parent.lastElementChild;
 } else {
 var ele = parent.lastChild;
 while (ele && ele.nodeType !== 1) {
 ele = ele.previousSibling;
 }
 return ele;
 }
}
//获取兄弟元素
function getsiblings(ele) {
 if (!ele)return;//判断当前的ele这个元素是否存在
 var elements = [];//定义数组的目的就是存储当前这个元素的所有的兄弟元素
 var el = ele.previousSibling;//当前元素的前一个节点
 while (el) {
 if (el.nodeType === 1) {//元素
 elements.push(el);//加到数组中
 }
 el = el.previousSibling;
 }
 el = ele.nextSibling;
 while (el) {
 if (el.nodeType === 1) {
 elements.push(el);
 }
 el = el.nextSibling;
 }
 return elements;
}
// //能力检测多个浏览器为同一个对象注册多个事件
var EventTools = {
 //为对象添加注册事件
 addEventListener: function (element, eventName, listener) {
 if (element.addEventListener) {
 element.addEventListener(eventName, listener, false);
 } else if (element.attachEvent) {
 element.attachEvent("on" + eventName, listener)
 } else {
 element["on" + eventName] = listener;
 }
 },
 //为对象移除事件
 removeEventListener: function (element, eventName, listener) {
 if (element.removeEventListener) {
 element.removeEventListener(eventName, listener, false);
 } else if (element.detachEvent) {
 element.detachEvent("on" + eventName, listener);
 } else {
 element["on" + eventName] = null;
 }
 },
 //获取参数e
 getEvent: function (e) {
 return e || window.event;
 },
 getPageX: function (e) {
 if (e.pageX) {
 return e.pageX;
 } else {
 //有的浏览器把高度设计在了文档的第一个元素中了
 //有的浏览器把高度设计在了body中了
 //document.documentElement.scrollTop;//文档的第一个元素
 //document.body.scrollTop;
 var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
 return e.clientX + scrollLeft;
 }
 },
 getPageY: function (e) {
 if (e.pageY) {
 return e.pageY;
 } else {
 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 return e.clientY + scrollTop;
 }
 }
};

补充：js 变速动画函数

//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
 function getStyle(element, attr) {
 return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
 }

//变速动画函数封装增加任意多个属性和回调函数及层级还有透明度
 //element元素 json对象 存储属性与值 fn为回调函数
 function animate(element, json, fn) {
 //清理定时器
 clearInterval(element.timeid);
 //设置定时器
 element.timeid = setInterval(function () {
 //假设全部到达目标
 var f = true;
 //循环去获取传入的数据
 for (var i in json) {
 //判断传入的值 是不是opacity
 if (i == 'opacity') {
 //获取当前opacity的值 并且放大100倍
 var current = getStyle(element, i) * 100;
 //把目标值也放大100倍
 var target = json[i] * 100;
 //移动的步数
 var step = (target - current) / 10;
 //判断是不是为0
 step = step > 0 ? Math.ceil(step) : Math.floor(step);
 //移动后的位置
 current += step;
 //移动元素属性
 element.style[i] = current / 100;
 //判断属性是不是zIndex
 } else if (i == 'zIndex') {
 //直接设置zIndex
 element.style[i] = json[i];
 } else {
 //普通属性获取（转化成数字）
 var current = parseInt(getStyle(element, i));
 //目标属性值
 var target = json[i]
 //移动的步骤（渐变）
 var step = (target - current) / 10;
 //判断移动的值取整
 step = step > 0 ? Math.ceil(step) : Math.floor(step);
 //移动后的位置
 current += step;
 //移动元素
 element.style[i] = current + 'px';
 }
 //只要有一个没达到目标就设置F为false
 if (current != target) {
 f = false;
 }
 //目标到达 清理定时器 判断有没有回调函数
 if (f) {
 clearInterval(element.timeid);
 if (fn) {
 fn();
 }
 }
 }
 console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
 }, 20)
 }

总结

以上所述是小编给大家介绍的JavaScript变速动画函数封装添加任意多个属性，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JavaScript变速动画函数封装添加任意多个属性

推荐度：

点击下载本文 文档为doc格式

标签：增加 js 封装

热门焦点

JavaScript变速动画函数封装添加任意多个属性

JavaScript变速动画函数封装添加任意多个属性

JavaScript变速动画函数封装添加任意多个属性

最新推荐

猜你喜欢

热门推荐