javascript动画函数封装】的更多相关文章

//把 任意对象 的 任意数值属性 改变为 任意的目标值 function animate(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { var flag = true; for (var k in json) { if (k === "opacity") {//opacity要特殊处理 //opacity没有单位 参与运算自动转换成数值 所以不用parsetInt //…
function animate(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function () { var leader = obj.offsetLeft; var step = 10;//之前只能是正数 只能往右走 /*if (leader < target) { step = step; } else { step = -step; }*/ step = leader < target ? step…
移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下,没必要引入zepto框架,把zepto的动画模块从Zepto 扒下来,加以改造独立:用于生产环境:下面是 Demo栗子: 上面图片对应的 js var leftsbox=document.getElementById("leftsbox"); var boxdiv=leftsbox.get…
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin:0;padding: 0;} div{position: absolute; width: 100px; height: 100px; background: red; left: 0;top: 100px;} </style> </hea…
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin:0;padding: 0;} div{position: absolute; width: 100px; height: 100px; background: red; left: 0;top: 100px;} </style> </hea…
Util.js (持续更新中...) 项目地址: https://github.com/dragonir/Util.js 项目描述 Util.js 是对常用函数的封装,方便在实际项目中使用,主要内容包含:数组类.浏览器类.日期类.函数类.数学类.媒体类.节点类.对象类.字符串类.类型检测类.正则表达式类等内容. 使用方法 1. 引入Bable transpiler以保证支持ES6 <script type="javascript/text" src="./browser…
前言: 大家都知道,在移动端进行操作结点移动时,我们都会使用操作transform来代替top等用以提高性能,必要的时候还可开启3d加速.我们都会使用getComputedStyle来获取结点的最终样式,但使用getComputedStyle来获取transform时我们获取到的是一个矩阵值,而且是无法通过设置矩阵值反向设置transform的效果的.如下: body.style.WebkitTransform = 'translateY(50px)' getComputedStyle(body…
//点击按钮,改变宽度到达一个目标值,高度到达一个目标值 //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } function animate(element, json, fn) {…
运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //-1 整理options options=options||{}; options.data=options.data||{}; options.timeout=options.timeout||0; options.type=options.type||'get'; //0 整理data var a…
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } //变速动画函数封装增加任意多个属性和回调函数及层级还有透明度 //element元素 json对象 存储属性与值 fn为回调函数…