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年半过去了.突然有些感慨, ...
随机推荐
- testNG常用方法
1.常用注释: 注解 描述 @BeforeSuite 在该套件的所有测试都运行在注释的方法之前,仅运行一次. @After ...
- IDEA里面创建maven项目，依赖
在IDEA里面创建一个简单的Maven项目: 在file-->new-->project ,选择maven,点击next 里面的一些简单参数的定义(第一次使用的话可以使用默认的值进行后面的 ...
- python——函数
python--函数 1.介绍: 在过去的十年间,大家广为熟知的编程方法无非两种:面向对象和面向过程,其实,无论哪种,都是一种编程的规范或者是如何编程的方法论.而如今,一种更为古老的编程方式:函数式编 ...
- 如何在node和vue前后端分离的项目中使用极客验证，用node的方式
1.用express的脚手架和vue-cli的脚手架搭建的项目目录如下图 2.在vue-client的src/component新建一个login.vue文件,作为登录页面,代码如下 <temp ...
- python操作mysql增删查改
# coding=utf-8 ''' python操作mysql,需安装MySQLdb驱动 安装MySQLdb,请访问 http://sourceforge.net/projects/mysql-py ...
- requests+xpath+map爬取百度贴吧
# requests+xpath+map爬取百度贴吧 # 目标内容:跟帖用户名,跟帖内容,跟帖时间 # 分解: # requests获取网页 # xpath提取内容 # map实现多线程爬虫 impo ...
- 误删除AUD$所在的表空间，无法切换用户
问题故障:数据库Open,无法切换普通用户: ---递归SQL无法执行 SQL> conn hr/hr ERROR at line 1: ORA-00604: error occurred ...
- Linux正则表达式总结【网络资源整理】
正则表达式的分类 1.基本的正则表达式(Basic Regular Expression 又叫Basic RegEx 简称BREs) 2.扩展的正则表达式(Extended Regular Expre ...
- java中lamda表达式的应用
lamda表达式主要是为了解决匿名内部类的繁琐过程 范例:简单的lamda表达式 此处使用匿名内部类 package com.java.demo; interface IMessage{ public ...
- java 反射（Reflection）
看了很多关于java 反射的文章,自己把所看到的总结一下.对自己,对他人或多或少有帮助吧. Java Reflection是什么? 首先来看看官方文档Oracle里面对Reflection的描述: R ...