IScroll.js 学习笔记
一.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 学习笔记的更多相关文章
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- 2019-4-29 js学习笔记
js学习笔记一:js数据类型 1:基本数据类型 number类型(整数,小数) String类型 boolean类型 NaN类型其实是一个nu ...
- 一点感悟：《Node.js学习笔记》star数突破1000+
写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...
随机推荐
- Python内置函数(65)——staticmethod
英文文档: staticmethod(function) Return a static method for function. A static method does not receive a ...
- 新概念英语（1-137）A pleasant dream
Lesson 137 A pleasant dream 美好的梦 Listen to the tape then answer this question. What would Julie like ...
- LDAP是什么
LDAP的英文全称是Lightweight Directory Access Protocol,一般都简称为LDAP.LDAP目录服务是一种特殊的数据库系统,其专门针对读取,浏览和搜索操作进行了特定的 ...
- python爬虫requests 下载图片
import requests # 这是一个图片的url url = 'http://yun.itheima.com/Upload/Images/20170614/594106ee6ace5.jpg' ...
- c语言一个显示星号的函数（隐藏密码）
显示星号 void star(char p[]) //显示星号 { int j; while((p[j] = getch())!='\r') { if(p[j] !='\b') { pr ...
- SQL server2017的操作（练习题）
题目: 假设有教材管理数据库BM,包括3个基本表: 教材(书号,书名,作者,出版社) B(Bno, Bname, Author, pub) 班级(班号,专业,所在系,人数) C(Cno, Spe, D ...
- Tensorflow模型加载与保存、Tensorboard简单使用
先上代码: from __future__ import absolute_import from __future__ import division from __future__ import ...
- js 常用数组和字符串方法
javascript数组与字符串常用方法总结 最近在梳理js的基础,首先从数组和字符串开始. string 常用方法: 1.substring(start开始位置的索引,end结束位置索引) 截取的位 ...
- WebGL之通过外部传入a_PontSize值改变点着色器vshader内置变量gl_PointSize的值
最近分配到一个看起来非常简单的优化需求.通过地图上设置工具来改变地图上显示的点的大小和透明度.无非过程就是从控件面板获取到用户设置的值保存到数据库中.然后地图上画点的时候取出设置的值渲染出点即可.前端 ...
- [LeetCode] Student Attendance Record II 学生出勤记录之二
Given a positive integer n, return the number of all possible attendance records with length n, whic ...