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

原生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 基础动画函数封装(一)

移动端滑屏全应用【一】cssHandler操作基础动画函数封装

前言: 大家都知道,在移动端进行操作结点移动时,我们都会使用操作transform来代替top等用以提高性能,必要的时候还可开启3d加速.我们都会使用getComputedStyle来获取结点的最终样式,但使用getComputedStyle来获取transform时我们获取到的是一个矩阵值,而且是无法通过设置矩阵值反向设置transform的效果的.如下: body.style.WebkitTransform = 'translateY(50px)' getComputedStyle(body…

原生javascript 基础动画原理

一.实现原理: 1.开定时器前先清除定时器 2.设置定时器 3.当前元素的位置 + 每一步的长度 4.当元素当前位置超过目标点时,把当前位置==目标点 5.设置元素位置,开始运动 6.判断当前位置如果到达目标点,则清除定时器二.代码 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin:0;padding:…

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

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

浅谈原生JavaScript的动画和特效

一.JavaScript中的动画原理动画效果的实现总的来说可分为两种,一种是利用纯css实现,该方法在css3成熟后广泛应用:另外一种是通过JavaScript(或者一些封装的库如jQuery的animate方法)间接的操作css样式,每隔几秒执行一次.这里主要讲的是原生js里面的动画: 1.常用的动画方式 JavaScript动画用的最多的3个方法是setInterval().setTimeout()以及requestAnimationFrame(): 延时器setTimeout()和定时器…

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

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

原生JavaScript中动画与特效的实现原理

现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作CSS样式,每隔一段时间更新一次: 一种是直接通过CSS定义动画.第二种方法在CSS3成熟之后被广泛采用. 我们今天只讲第一种实现方式. 一.JavaScript中动画原理所谓的动画,就是通过一些列的运动形成的动的画面.在网页中,我们可以通过不断的改变元素的css值,来达到动的效果. J…

javascript基础(五)函数

原文http://pij.robinqu.me/ 通过call和apply间接调用函数(改变this) call 和 apply带有多个参数,call和apply把当前函数的this指向第一个参数给定的函数或对象中,并传递其余所有的参数作为当前函数的参数. var O = function () { this.foo = 'hello'; this.hello = function () { return 'world'; } }; var fn = function () { console.…

（Frontend Newbie）JavaScript基础之函数

函数可以说是任何一门编程语言的核心概念.要能熟练掌握JavaScript,对于函数及其相关概念的学习是非常重要的一步.本篇从函数的基本知识.执行环境与作用域.闭包.this关键字等方面简单介绍JavaScript中的函数的使用. 基础我们通常通过如下两种方式定义函数: function myFunc() { console.log("this is myFunc"); return; } var myFunc = function () { } 与其他面相对象语言不同的是,JavaS…

JavaScript基础学习-函数及作用域

函数和作用域是JavaScript的重要组成部分,我们在使用JavaScript编写程序的过程中经常要用到这两部分内容,作为初学者,我经常有困惑,借助写此博文来巩固下之前学习的内容. (一)JavaScript函数 JavaScript函数是指一个特定代码块,可能包含多条语句,可以通过名字来供其他语句调用以执行函数包含的代码语句. 1.JavaScript创建函数的方法有两种: 函数声明: function funcDeclaration(){ return 'A is a function';…

JavaScript 基础回顾——函数

在JavaScript中,函数也是一种数据类型,属于 function 类型,所以使用Function关键字标识函数名.函数可以在大括号内编写代码并且被调用,作为其他函数的参数或者对象的属性值. 1.命名函数的创建和使用 <script type="text/javascript"> function 函数名 (形参列表) { //执行语句 return 返回值; } </script> 2.函数的参数和返回值与C#,java等语言相比,JavaScript函…

Javascript 基础--JS函数（三）

一.基本概念:未完成某一个功能的代码(语句,指令)的集合. 二.函数的调用方式: 2.1.函数名(传递参数1,传递参数2) 基本语法 function 函数名(参数列表){ //代码; return 值; } 2.2.通过指向函数的变量去调用 var myvar=函数名; myvar(实际参数); var myvar = test('abc'); //如果test函数没有返回值,但是你又接受了,则返回的就是undefined; //如果有返回值,是什么就是什么 window.alert(my…

javascript 自定义动画函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c…

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

javascript动画函数封装

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…

javascript基础知识-函数

1.javascript中函数有两种定义方式: 函数语句定义和表达式定义 //函数有定义 function test(){ console.log("This is a function"); } //表达式定义 var f = function(a){ return Math.sqrt(a); }; 2.函数调用方式有以下四种: 1)作为函数 2)作为方法 3)作为构造函数 4)通过它们的call()和apply()方法间接调用 3.关键词this没有作用域的限制,不是变量,也不是属…

JavaScript基础——创建函数

JavaScript的最重要的一个部分是制作其他代码可以重用的代码.要做到这一点,你可以把代码组织成执行特定任务的函数.函数是结合在一个单一的块中,并给予一个名称的一系列代码语句.然后,你就可以通过引用该名称来执行块中的代码. 1.定义函数你可以使用function关键字后跟一个描述该函数用途的名称.在()中的零个或多个参数的列表,以及在{}块中的一个或多个代码语句来定义一个函数.例如,下面是一个网控制台写入"Hello World"的函数的定义: function myFuncti…

Javascript：常用函数封装

//cookie function setCookie(name, value, iDay) { if(iDay!==false) { var oDate=new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie=name+'='+value+';expires='+oDate+';path=/'; } else { document.cookie=name+'='+value; } } function getCookie…

JavaScript基础之函数与数组

函数函数的基本概念为完成某一功能的程序指令(语句)的集合,称为函数.有的程序员把函数称为方法,希望大家不要被这两个名词搞晕了. 函数分为:自定义函数.系统函数(经常查看js帮助手册). js自定义函数基本语法: function 函数名(参数列表){ //代码语句 return 值;//有无返回值是可以选择的. } 参数列表:表示函数的输入函数主体:表示为了实现某一功能代码块函数可以有返回值,也可以没有例, 函数.html: <!DOCTYPE html> <ht…

javascript基础知识--函数定义

函数声明式 function funname( 参数 ){ ...执行的代码 } 声明式的函数并不会马上执行,需要我们调用才会执行:funname(); * 分号是用来分隔可执行JavaScript语句,由于函数声明不是一个可执行语句,所以不以分号结束. 函数表达式 var x = function( 参数 ){ ...执行的代码块 }; 函数表达式定义的函数,实际上也是一个匿名函数(这个函数没有名字,直接存储在变量中) * 函数表达式结尾是要加分号的,因为它是一个执行语句. Function…

javascript基础之函数

javascript的函数定义与python有很大的区别,的记住格式就好,下面请看代码 // 函数 // 简单定义 function func() { console.log('hello word') } func(); // 函数的调用 function f2(a,b){ console.log('参数的个数',arguments.length); console.log('查看函数的属性:',arguments); return a*b; } var ret2=f2(3,4); conso…

【javascript基础】函数前面的一元操作符

在函数前面加:+ ; ~ ! - 等等一元操作符,javascript 引擎都会将后面的statement转换成表达式(expression),这样就可以调用了.…

JavaScript 基础(五) 函数变量和作用域

函数定义和调用定义函数,在JavaScript中,定义函数的方式如下: function abs(x){ if(x >=0){ return x; }else{ return -x; } } 上述abs() 函数的定义如下: function 指出这是一个函数定义; abs 是函数的名称: (x) 括号内列出函数的参数,多个参数以,分隔: {...}之间的代码是函数体,可以包含若干语句,甚至可以没有任何语句. 注意:函数体内部的语句在执行时,一旦执行到return 时,函数就执行完毕,并将结果…

原生 javascript 基础回顾

(1)打开新窗口语法: window.open([URL], [窗口名称], [参数字符串]) 参数说明: URL:可选参数,在窗口中要显示网页的网址或路径.如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档. 窗口名称:可选参数,被打开窗口的名称. 1.该名称由字母.数字和下划线字符组成. 2."_top"."_blank"."_self"具有特殊意义的名称. _blank:在新窗口显示目标网页 _self:在当前窗口显示目标…

JavaScript基础-即时函数(Immediate Functions)(017)

1.即时函数的声明方法即时函数(Immediate Functions)是一种特殊的JavaScript语法,可以使函数在定义后立即执行:(function () { alert('watch out!');}()); 下面分几部来理解这种写法: 橙色部分是一个函数表达式: 天蓝色的一对括号代表立即执行它,括号里是执行这个函数需要的参数(这个例子不需要参数): 再用一对括号(就是黑色的这一对)把上面的部分包起来. 黑色这一对括号可以让人明白这个表达式得到的是函数的返回值,而不是函数对象.…

Javascript基础--成员函数(六)

成员函数:也叫方法 1.常用方法比如:我们希望对象不但有属性,还希望他有行为.(行为在程序中要靠函数来体现)(1) 添加speak函数,输出我是一个好人 (2) 添加jisuan函数,可以计算从1+..+1000的结果 (3) 修改jisuan函数,该方法可以接收一个数n,计算从1+..+n的结果 (4) 添加add成员函数,可以计算两个数的和 function Person(name,age){ //这个就是使用传入的实际参数,去初始化属性. this.name = name; this.a…

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

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

javascript基础：函数参数与闭包问题

今天在写东西的时候,对函数参数的概念有些模糊,查阅相关资料后,在博客上记点笔记,方便日后复习. 首先,在js中函数参数并没有强语言中那么要求严格,他不介意传递进来多少个参数,也不在乎传进来的参数是什么数据类型,甚至可以不传参数.原因是:ECMAScript中的参数在内部都是用一个数组来表示的函数的显式参数与隐式参数函数的显式参数是在函数定义时列出的,比如: function hello(arg1,arg2){ //函数体 } 此时的arg1,arg2就是函数的显式参数函数的隐式参数在函数调…

javascript基础-js函数

一.创建函数的方式 1)普通方式 function cal( num1, num2 ) { return num1+num2; } 2)使用变量初始化方式 var plus = function(num1, num2) { console.log(num1 + num2); } // 调用 plus(15,20); 3)使用构造函数 //这种方式不推荐使用,这种语法会导致解析两次代码 var box = new Function("num1", "num2", &q…

【原生javascript 基础动画函数封装(一)】的更多相关文章