一.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. Docker1.12.6+CentOS7.3 的安装

    安装旧版的docker-engine-1.12.6 kubeadm init --api-advertise-addresses=172.16.160.211命令的时候,提示docker版本太新了 一 ...

  2. 云计算学习(5-1)云平台产品介绍-华为的FusionCloud产品

    FusionSphere云平台:继承了虚拟化和云管理系统,为企业构建私有云  FusionManager:云管理平台(管理计算虚拟化.网络虚拟化.存储虚拟化) FusionCompute.Fusion ...

  3. python入门(1)python的前景

    python入门(1)python的前景 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言. Python由Guido van Rossum于1989年底发明,第一个公开发行版发行于 ...

  4. POJ1236【Tarjan+缩点】

    题目大意:有向关系体现在电脑可以通过网络单向的传输文件,并规定一旦有电脑存在该文件,那么所有它能传输的电脑就能在第一时间得到这个文件,题目有两个问题,第一个是最少向网络中的几台电脑投放文件,能使得整个 ...

  5. highstaock+websocket实现动态展现

    效果:从后台获取回测数据,在前端动态展现,和聚宽实现的回测效果相仿 大体思路:先传一个[[int,0],[int,0],[int,0],[int,0],[int,0],...]格式的死数据到前端渲染x ...

  6. Hive&SqlServerql:inner join on条件中如果两边都是空值的情况下,关联结果中会把数据给过滤掉。

    今天遇到的一个大坑,话不多少,看sql和下边的查询结果: --问题:恰好把buildingid is null的记录给过滤掉 ),buildingid ),)); ); ); ); ); ); ); ...

  7. Linux:crontab组件部署linux定时任务

    crontab简介 crond 是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务 工具,并且会自动启动c ...

  8. hive-jdbc获取查询日志慢的问题发现与解决

    1.问题描述: 数据平台的临时查询一直有一个问题,就是日志获取太慢了,每次都是和结果一块出来的,这就非常影响用户的体验,半天都没任何输出.另一个是Beeline客户端不一致,beeline客户端每次都 ...

  9. netcore webapi帮助文档设置

    如何建 .netcore webapi 项目这个就不说了,这个都没有没必要看下去. 我这里是.netcore 2.0,虽然没测过1.0的,但想来差不多. 1.Nuget Packages安装,使用程序 ...

  10. 对scrapy经典框架爬虫原理的理解

    1,spider打开某网页,获取到一个或者多个request,经由scrapy engine传送给调度器schedulerrequest特别多并且速度特别快会在scheduler形成请求队列queue ...