原生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-特效部分学习-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 变速动画函数

//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } //变速动画函数封装增加任意多个属性和回调函数及层级还有透明度 //element元素 json对象存储属性与值 fn为回调函数…

Node.js用ES6原生Promise对异步函数进行封装

Promise的概念 Promise 对象用于异步(asynchronous)计算..一个Promise对象代表着一个还未完成,但预期将来会完成的操作. Promise的几种状态: pending:初始状态,即等待操作的执行 fulfilled:成功的操作 rejected:失败的操作 pending的状态既可以转为fulfilled,也可以转为rejected,当状态发生改变时,promise.then(onFulfilled, onRejected)方法将被调用 Promise的基本用法 1…

js变速动画函数封装回调函数及层级还有透明度

//点击按钮,改变宽度到达一个目标值,高度到达一个目标值 //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } function animate(element, json, fn) {…

原生javascript 基础动画函数封装(二)

<!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…

原生javascript 基础动画函数封装(一)

移动端滑屏全应用【四】移动端动画贞动画函数mTween封装

首先此函数是基于大家都知道的Tween动画算法的,在此基础上使用了三中讲到的兼容版动画贞,可以使动画变得更流畅. 1. 首先要记得引入Tween.js 2. 引入mTween.js 3. 调用 * mTwee.js文件如下: (这里的m意为mobile) (function(){ window.requestAnimationFrame = window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRe…

编写原生JS的insertAfter函数

DOM里有insertBefore函数,但没有insertAfter函数,所以自己编写一个该函数: function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if(parent.lastChild == targetElement){ parent.appendChild(newElement); }else{ parent.insertBefore(newElement,tar…

关于原生js中bind函数的实现

今天继续研究了bind函数的实现,也知道了shim和polyfill的说法,现在总结一下, if (!Function.prototype.bind) { Function.prototype.bind = function (oThis) { if (typeof this !== "function") { // closest thing possible to the ECMAScript 5 internal IsCallable function throw new Typ…

兼容IE9以下和非IE浏览器的原生js事件绑定函数

事件绑定函数的demo如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"/> <title>测试事件绑定函数</title> <scrip…

原生JS实现bind()函数

一.bind()函数的两个特性: 1.bind和curring,函数科里化 function add(a, b, c) { var i = a+b+c; console.log(i); return i; } );//给add()传了第一个参数a func(, );//103,继续传入b和c );//给func2传入第一个参数,也就是b,此前func已有参数a=100 func2();//310,继续传入c,100+200+10 可以利用此种特性方便代码重用,如下,可以不同的页面中只需要配置某几…

原生JS实现旋转木马轮播图特效

大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me…

用jQuery基于原生js封装的轮播

我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址的数组,图片宽度,上一页,下一页的id,图片列表即ul的id(这儿使用无序列表排列的图片),自动轮播间隔的时间.功能:实现了轮播的自动轮播,可以点击上一页,下一页进行切换. 下面是html中的代码,只需要把存放的容器写好,引入jquery即可: <!DOCTYPE px;"> </…

原生js动画效果（源码解析）

在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro/html/201410/23513.html 1.匀速动画效果说明:匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的 <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR…

JS---案例：移动元素，封装动画函数

案例:移动元素,封装动画函数 1. div要移动,要脱离文档流---position:absolute 2. 如果样式的代码是在style的标签中设置,外面是获取不到 3. 如果样式的代码是在style的属性设置,外面是可以获取 4. 获取div的当前位置 console.log(my$("dv").offsetLeft); 动画函数animate封装 <!DOCTYPE html> <html lang="en"> <head>…

关于原生js中函数的三种角色和jQuery源码解析

原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关系: 分三小类: 1.普通函数 function fn(){ console.log('我是一个最基础的函数'); } fn(); 2.类包括(内置类,自定义类)也就是构造函数内置类是通过构造函数的形式创建的自定义类形式和内置类一样创建内置类的使用:其实上述fn函数就是内置Function…

原生js写的一个弧形菜单插件

弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var defaultPra = { mainMenuId: "ArcMenu",//主菜单id menuBoxId:"menuBox",//菜单包裹id position: "",//弧形菜单 customPosition:"0,0",/…

原生JS无缝轮播图

(1)原理介绍 (2)静态布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <style type="text/css"> *{ margin: ; padding: ; } li{ list-style: none; } a{ text-decoration: none; } .b…

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

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

原生JS封装简单动画效果

原生JS封装简单动画效果一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(obj.timer) { //判断定时器是否存在,决定是否清空 clearInterval(obj.timer); } obj.timer = setInterval(function() { var leader = obj.offsetLeft; var step = num;//num为你移动一步…

原生js判断css动画结束 css 动画结束的回调函数

原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件: transitionend事件和animationend事件标准的浏览器事件,但在WebKit浏览器里你仍然需要使用webkit前缀,所以,我们不得不根据各种浏览器分别检测事件 var transitions = { 'transition':'tra…

原生JS封装创建多级菜单函数

手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构废话不多说,展示代码.先展示数据代码,注意,使用此封装函数需要满足此数据结构. var data = [{ id: 1, address: "安徽", parent_id: 0 }, { id: 2, address: "江苏", parent_id: 0 }, { id: 3, addre…

原生JS封装_new函数，实现new关键字的功能

1.前言众所周知:没有对象怎么办?那就new一个! 那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢? 现在我们就来剖析一下原生JS中new关键字内部的工作原理. 2.原生的new 首先,我们先new一个对象看看: //创建Person构造函数,参数为name,age function Person(name,age){ this.name = name; this.age = age; } //实例化对象小明 xm = new Person('xiaoming',1…

原生Js封装的动画类

算法用的是Tween类,需要研究的参考这篇文章: http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html 网页里常用的动画放大缩小位置移动透明度改变效果预览:http://jsfiddle.net/dtdxrk/WnACG/embedded/result/ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type…

js 封装一个均速动画函数

//动画函数---任意一个元素移动到指定的目标位置 //element为元素 target为位置 function carToon(element, target) { //设置一个定时器让他循环去增加 element.timeid = setInterval(function () { //拿到当前的位置(纯数字) var current = element.offsetLeft; //每次要移动的像素current var step = 10; //注意这里是判断到底往那边走如果当前的位…

原生JS面向对象思想封装轮播图组件

原生JS面向对象思想封装轮播图组件在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能实现都分别分为不同的模块.目前我封装的这个版本还不适配移动端,只适配PC端. 主要的功能有:自动轮播,点击某一张图片对应的小圆点就跳转到指定图片,有前后切换按钮.使用的时候只需要传入图片的路径以及每张图片分别所对应的跳转路径还有目标盒子ID就可以了,还可以自定义每张图轮播的延时,不过延时参数不是必须…

原生JS封装Ajax插件(同域&&jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.…

用原生JS写移动动画案例及实际应用

js很强大相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的左边或右边会有个分享的框,鼠标放上去就还移出一个列表,里面是要分享的地址.鼠标移开,就会移进去. 要实现这个效果要怎么做呢? 可以想一想,鼠标经过和鼠标离开很好理解用onmousemove事件和onmouseout事件就能完成. 那移动动画呢?我们可以一步一步思考, 首先,一开始是这样的…

【原生JS实现动画函数的封装】的更多相关文章