<!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…
前言: 大家都知道,在移动端进行操作结点移动时,我们都会使用操作transform来代替top等用以提高性能,必要的时候还可开启3d加速.我们都会使用getComputedStyle来获取结点的最终样式,但使用getComputedStyle来获取transform时我们获取到的是一个矩阵值,而且是无法通过设置矩阵值反向设置transform的效果的.如下: body.style.WebkitTransform = 'translateY(50px)' getComputedStyle(body…
一.实现原理: 1.开定时器前先清除定时器 2.设置定时器 3.当前元素的位置 + 每一步的长度 4.当元素当前位置超过目标点时,把当前位置==目标点 5.设置元素位置,开始运动 6.判断当前位置如果到达目标点,则清除定时器 二.代码 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin:0;padding:…
封装了一个JS方法,支持元素的基本动画:宽.高.透明度...等,也支持链式动画和同时运动. 获取元素的属性的函数并进行了兼容性处理: function getStyle(obj, attr) { if(obj.currentStyle){ //IE浏览器 return obj.currentStyle[attr]; }else{ //chrome.firefox等浏览器 return getComputedStyle(obj,null)[attr]; } } 动画函数: var timer =…
一.JavaScript中的动画原理 动画效果的实现总的来说可分为两种,一种是利用纯css实现,该方法在css3成熟后广泛应用:另外一种是通过JavaScript(或者一些封装的库如jQuery的animate方法)间接的操作css样式,每隔几秒执行一次.这里主要讲的是原生js里面的动画: 1.常用的动画方式 JavaScript动画用的最多的3个方法是setInterval().setTimeout()以及requestAnimationFrame(): 延时器setTimeout()和定时器…
现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作CSS样式,每隔一段时间更新一次: 一种是直接通过CSS定义动画.第二种方法在CSS3成熟之后被广泛采用. 我们今天只讲第一种实现方式. 一.JavaScript中动画原理 ​ 所谓的动画,就是通过一些列的运动形成的动的画面.在网页中,我们可以通过不断的改变元素的css值,来达到动的效果.  ​ J…
移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下,没必要引入zepto框架,把zepto的动画模块从Zepto 扒下来,加以改造独立:用于生产环境:下面是 Demo栗子: 上面图片对应的 js var leftsbox=document.getElementById("leftsbox"); var boxdiv=leftsbox.get…
匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成,还剖析了匀速运动的实现,提取匀速运动的封装方法.这里我们回顾一下在匀速运动中存在三个核心逻辑:1.当最后的间距小于单位移动距离时,直接将位置移动到终点,并结束定时器执行:2.每次启动运动算法函数时,结束以前启动的定时器,防止重复启动运动算法函数出现定时器叠加:3.运动速度要设置正负值,保证正反双向…
函数和作用域是JavaScript的重要组成部分,我们在使用JavaScript编写程序的过程中经常要用到这两部分内容,作为初学者,我经常有困惑,借助写此博文来巩固下之前学习的内容. (一)JavaScript函数 JavaScript函数是指一个特定代码块,可能包含多条语句,可以通过名字来供其他语句调用以执行函数包含的代码语句. 1.JavaScript创建函数的方法有两种: 函数声明: function funcDeclaration(){ return 'A is a function';…
一.基本概念:未完成某一个功能的代码(语句,指令)的集合. 二.函数的调用方式: 2.1.函数名(传递参数1,传递参数2)   基本语法 function 函数名(参数列表){ //代码; return 值; } 2.2.通过指向函数的变量去调用 var myvar=函数名; myvar(实际参数); var myvar = test('abc'); //如果test函数没有返回值,但是你又接受了,则返回的就是undefined; //如果有返回值,是什么就是什么 window.alert(my…
原文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.…
<!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,对于函数及其相关概念的学习是非常重要的一步.本篇从函数的基本知识.执行环境与作用域.闭包.this关键字等方面简单介绍JavaScript中的函数的使用. 基础 我们通常通过如下两种方式定义函数: function myFunc() { console.log("this is myFunc"); return; } var myFunc = function () { } 与其他面相对象语言不同的是,JavaS…
在JavaScript中,函数也是一种数据类型,属于 function 类型,所以使用Function关键字标识函数名.函数可以在大括号内编写代码并且被调用,作为其他函数的参数或者对象的属性值. 1.命名函数的创建和使用 <script type="text/javascript"> function 函数名 (形参列表) { //执行语句 return 返回值; } </script> 2.函数的参数和返回值 与C#,java等语言相比,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…
 函数    函数的基本概念 为完成某一功能的程序指令(语句)的集合,称为函数.有的程序员把函数称为方法,希望大家不要被这两个名词搞晕了. 函数分为:自定义函数.系统函数(经常查看js帮助手册). js自定义函数基本语法: function 函数名(参数列表){ //代码语句 return 值;//有无返回值是可以选择的. } 参数列表:表示函数的输入 函数主体:表示为了实现某一功能代码块 函数可以有返回值,也可以没有 例,    函数.html: <!DOCTYPE html> <ht…
说明 前一篇博客介绍了js以及一些关于js基本类型的简单知识,本篇博客将详细介绍js的基础类型,捎带介绍对象类型,更详细的对象类型的说明将后续再讲. js中类型的说明 js中的类型分为基本类型和对象类型,其中基本类型包括:①数字.②字符串.③布尔值.此外还有两个原始值null和undefined.其中对象包括数组对象.函数对象和普通对象,普通对象是“命名值”的无序集合,而数组对象是带编号的值的有序集合.JavaScript核心还定义了三种有用的类:日期(Data)类.正则(RegExp)类.错误…
JavaScript语法 二.数据类型 程序把这些量.值分为几大类,每一类分别叫什么名称,有什么特点,就叫数据类型. 1.字符串(string) 字符串由零个或多个字符构成,字符包括字母,数字,标点符号和空格: 字符串必须放在引号里(单引号或双引号). var mood = "happy"; var mood = 'happy'; 用引号括起来的内容,就是字符串类型 了; 如果内容有单引号也有双引号的时候,使用转义字符"\",作用:解决冲突 2.数值(number)…
生成器 迭代器 装饰器 模块   来个需求,一个列表中所有元素都+1 1.最容易想到的方法 for循环,找列表索引,对应每个值+1 list_old = [1,2,3,4,5,6,7,8,9] for index,i in enumerate(list_old): list_old[index]+=1 print(list_old) 2.用上节课讲的匿名函数试试,也可以 a = map(lambda x:x+1,list_old) for i in a: print(i) 3.列表生成 a =…
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的最重要的一个部分是制作其他代码可以重用的代码.要做到这一点,你可以把代码组织成执行特定任务的函数.函数是结合在一个单一的块中,并给予一个名称的一系列代码语句.然后,你就可以通过引用该名称来执行块中的代码. 1.定义函数 你可以使用function关键字后跟一个描述该函数用途的名称.在()中的零个或多个参数的列表,以及在{}块中的一个或多个代码语句来定义一个函数.例如,下面是一个网控制台写入"Hello World"的函数的定义: function myFuncti…
//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…
成员函数:也叫方法 1.常用方法 比如:我们希望对象不但有属性,还希望他有行为.(行为在程序中要靠函数来体现)(1) 添加speak函数,输出我是一个好人 (2) 添加jisuan函数,可以计算从1+..+1000的结果 (3) 修改jisuan函数,该方法可以接收一个数n,计算从1+..+n的结果 (4) 添加add成员函数,可以计算两个数的和 function Person(name,age){ //这个就是使用传入的实际参数,去初始化属性. this.name = name; this.a…
函数声明式 function funname( 参数 ){ ...执行的代码 } 声明式的函数并不会马上执行,需要我们调用才会执行:funname(); * 分号是用来分隔可执行JavaScript语句,由于函数声明不是一个可执行语句,所以不以分号结束. 函数表达式 var x = function( 参数 ){ ...执行的代码块 }; 函数表达式定义的函数,实际上也是一个匿名函数(这个函数没有名字,直接存储在变量中) * 函数表达式结尾是要加分号的,因为它是一个执行语句. Function…
javascript之BOM 学习要点: 屏幕对象 History对象 Location对象 一.屏幕对象 Screen对象是一个由javascript自动创建的对象,该对象的主要作用是描述客户端的显示器的信息. 目前显示器分辨率为800X600或1024X768两种. screen.height:屏幕的高度 screen.width:屏幕的宽度 screen.availHeigh:屏幕的有效高度 screen.availWidth:屏幕的有效宽度 二.History对象 History对象可以…
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…
Ajax 一.XMLHttpRequest对象 一)XHR用法 var xhr = new XMLHttpRequest(); //open()方法,参数一:发送方法,参数二:请求的URL,参数三:是否发送异步请求 //调用open()方法并会真正发送请求,只是启动一个请求以备发送. xhr.open('get', 'test.txt', false); //send()方法接受一个参数,即作为请求主体要发送的数据,如果无数据也要传入null xhr.send(null); //在收到请求后响应…
在函数前面加:+  ;  ~ !  - 等等一元操作符,javascript 引擎都会将后面的statement转换成表达式(expression),这样就可以调用了.…