JavaScript—封装animte动画函数

【JavaScript—封装animte动画函数】的更多相关文章

JavaScript—封装animte动画函数

封装Animte 动画函数虽然可能以后的开发中可能根本不需要自己写,Jquery 给我们封装好了,或者用CSS3的一些属性达到这样的效果可能更简单. 我比较喜欢底层的算法实现,万变不离其中,这个逻辑思路,也是需要锻炼的.也跟着做了一遍 ///动画函数 //element:元素 //target:最后停止的位置 function animte(element, target) { //只有一个Timeid定时器在执行 if (element,timerId) { clearInterval(el…

JavaScript封装Ajax工具函数及jQuery中的ajax，xhr在IE的兼容

封装ajax工具函数首先要思考:1.为什么要封装它?提高开发效率2.把一些不确定的情况考虑在其中 a. 请求方式 b. 请求地址 c. 是否异步 d. 发送参数 e. 成功处理 f. 失败处理3.确定参数 a. Type--请求方式 get (get/post) b. Url--请求地址默认当前地址字符串 c. Async--是否异步 true (true/false) d. Data--发送的数据 {} 对象{name:xx} e. Success--成功回调 function 函数函…

Js封装的动画函数实现轮播图

---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示项目目录结构用到的js封装的animate()动画 function animate(element, target) { clearInterval(element.timeId); //定时器的id值存储到对象的一个属性中 element.timeId = setInterval(function () { //获取元素的当前的位置,数字类型 var curre…

使用原生JS封装一个动画函数

最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一个动画,看了一下以前封装的函数,千疮百孔,又进行了重新封装,先上代码,有详细的备注. function animate(el, target, step, dtime) { /** * 参数说明: * - el 表示操作的元素对象 * - target 表示移动的目标距离单位 px * - ste…

javascript封装animate动画

面向对象式: Element.prototype.animate=animate; Element.prototype.getStyle=getStyle; function animate(json,callback) { clearInterval(this.timer); for (var attr in json) { var that = this; this.timer = setInterval(function () { if (attr == 'opacity') { that…

原生javascript封装的函数

1.javascript 加载的函数 window.onload = function(){} 2.封装的id函数 function $(id) { return document.getElementById(id); } //调用 $("id") 3.封装的数组id function $arr(array) { return document.getElementsByTagName(array); } //调用 $arr("数组") 4.自定义平均值函数 fu…

js-特效部分学习-offsetParent、scrollHeight 、动画函数的封装

1. offsetParent 获取的最近的定位的父元素 offsetLeft/offsetTop 是相对于offsetParent的距离 offsetHeight/offsetWidth 获取盒子的大小 border + height + padding <style> #box { width: 200px; height: 200px; background-color: #ff0000; } #child { width: 100px; height: 100px; mar…

移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）

移动端 css3 transition 动画 ,requestAnimationFrame 动画对于性能的要求,h5优先考虑: 移动端单页有时候制作只用到简单的css3动画即可,我们封装一下,没必要引入zepto框架,把zepto的动画模块从Zepto 扒下来,加以改造独立:用于生产环境:下面是 Demo栗子: 上面图片对应的 js var leftsbox=document.getElementById("leftsbox"); var boxdiv=leftsbox.get…

原生JS实现动画函数的封装

封装了一个JS方法,支持元素的基本动画:宽.高.透明度...等,也支持链式动画和同时运动. 获取元素的属性的函数并进行了兼容性处理: function getStyle(obj, attr) { if(obj.currentStyle){ //IE浏览器 return obj.currentStyle[attr]; }else{ //chrome.firefox等浏览器 return getComputedStyle(obj,null)[attr]; } } 动画函数: var timer =…

JS---最终版本--封装缓动（变速）动画函数---增加任意多个属性&回调函数&层级&透明度

封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度相较之前的,增加了2个判断,第一个判断是不是透明度,第二个判断是不是zindex, 都不是,就只是普通属性和之前一样 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <styl…