一.css部分
1.transform 旋转
div

{

transform:rotate(7deg);

-ms-transform:rotate(7deg); 	/* IE 9 */

-moz-transform:rotate(7deg); 	/* Firefox */

-webkit-transform:rotate(7deg); /* Safari 和 Chrome */

-o-transform:rotate(7deg); 	/* Opera */

}
div旋转 
translateX(x) 定义转换，只是用 X 轴的值
translateY(y) 定义转换，只是用 Y 轴的值
translate(x,y) 定义2D转换

2.transition 允许CSS的属性值在一定的时间区间内平滑地过渡
transition主要包含四个属性值：执行变换的属性：transition-property；变换延续的时间：transition- duration；在延续时间段，变换的速率变化transition-timing-function；变换延迟时间transition- delay
eg:

div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover {

width:300px;}

3.perspective 属性定义 3D 元素距视图的距离，以像素计

div

{

perspective: 500;

-webkit-perspective: 500; /* Safari 和 Chrome */

}

目前浏览器都不支持 perspective 属性。

Chrome 和 Safari 支持替代的 -webkit-perspective 属性

4.resize

二、事件

1.transitionend 事件在 CSS 完成过渡后触发

2.pointerEvent

Pointer Event （W3C）能支持的指针装置包括了鼠标、触控（手指）、以及笔型装置；而除了能整合不同类型的指针装置外，Pointer Event 针对能支持的硬件，也多了相当多额外的参数，像是压力、宽度、高度，甚至比型装置的倾斜程度等等,很遗憾的，目前基本上只有微软自家的 Internet Explorer（10+）有原生支持 Pointer event（不过也不大一样，请参考 MSDN），其他的浏览器，都仅支持 Touch Event；而再加上 IE 本身并不支持 Touch Event，所以变成要跨浏览器处理触控事件，就得写两个版本了…

3.orientationchange事件

事件是在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。

注意：如果要查看 orientationchange 事件的效果, 用户必须使用移动设备或者移动模拟器来查看

$(window).on("orientationchange",function(){
  alert("方向已改变!");
});

4.onresize 事件会在窗口或框架被调整大小时发生

<body onresize="alert('You have changed the size of the window')">

参考文章：

http://www.runoob.com/jquerymobile/event-orientationchange.html

http://www.iefans.net/zhizhen-shijian-pointer-event/

http://www.w3school.com.cn/cssref/pr_perspective.asp

http://www.w3school.com.cn/tiy/t.asp?f=hdom_onresize

IScroll.js 学习笔记的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  3. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  4. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  5. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  6. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  7. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  8. 2019-4-29 js学习笔记

    js学习笔记一:js数据类型   1:基本数据类型       number类型(整数,小数)      String类型          boolean类型        NaN类型其实是一个nu ...

  9. 一点感悟：《Node.js学习笔记》star数突破1000+

    写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...

随机推荐

  1. 20道Java面试必考题

    系统整理了一下有关Java的面试题,包括基础篇,javaweb篇,框架篇,数据库篇,多线程篇,并发篇,算法篇等等,陆续更新中.其他方面如前端后端等等的面试题也在整理中,都会有的. 注:文末有福利!pd ...

  2. LXC学习实践（2）安装LXC

    1.准备工作: yum install gcc yum install libcap-devel yum install libcgroup 2.安装LXC 下载源代码:sourceforge.net ...

  3. final类与final方法

    inal---用于类.方法前. final类---不可被继承. final方法---不可被覆盖. final类不能被继承. 如果我们不希望一个类被继承,我们使用final来修饰这个类.这个类将无法被继 ...

  4. Apache Flink 分布式执行

    Flink 的分布式执行过程包含两个重要的角色,master 和 worker,参与 Flink 程序执行的有多个进程,包括 Job Manager,Task Manager 以及 Job Clien ...

  5. 框架学习之Struts2(二)---基本配置和封装表单数据

    一.结果页面配置 1.局部结果页面配置 <!-- 局部结果页面配置--> <package name = "demo" extends = "strut ...

  6. #定义一个方法get_num(num),num参数是列表类型，判断列表里面的元素为数字类型。其他类型则报错，并且返回一个偶数列表：（注：列表里面的元素为偶数）。

    #定义一个方法get_num(num),num参数是列表类型,判断列表里面的元素为数字类型.其他类型则报错,并且返回一个偶数列表:(注:列表里面的元素为偶数). def get_num(num): i ...

  7. 原来你是这样的Promise

    1. Promise简介 promise是异步编程的一种解决方案,它出现的初衷是为了解决回调地狱的问题. 打个比方,我需要: --(延迟1s)--> 输出1 --(延迟2s)--> 输出2 ...

  8. C# webBrowser 控件赋值

    string body = PostWebRequest(txtURL.Text, textBox2.Text); if (webBrowser1.ReadyState != WebBrowserRe ...

  9. C++程序设计语言(特别版) -- 一个桌面计算器

    前言 这里要介绍各种语句和表达式,将通过一个桌面计算器的程序做些事情,该计算器提供四种座位浮点数的中缀运算符的标准算术运算. 这个计算器由四个部分组成:一个分析器,一个输入函数,一个符号表和一个驱动程 ...

  10. eclipse导包导不进来

    今天某个类转移了位置,结果导包导不进来: 解决方法:1.查看本项目中pom的依赖关系,查看是否引用了转移后的项目. 2.查看导不进来的报错类,查看类刚开始import的信息,如果有报错,删除后重新导包 ...