框架类别: animate.css（css3效果）
wow.js（与animate.css配合，向下滚动过程释放CSS效果，不依赖JQ）
*************** JS: new WOW().init(); 【只能做一次动画】
scrollReveal.js（是一个兼容PC端和移动端的滚动动画组件库，0依赖）
*************** 默认样式 window.sr = ScrollReveal(); 【可以作序列动画，向上向下展示动画并更改动画出场参数】
sr.reveal(".box");
【less预编译】（变量、嵌套，运算，混合，函数）
0、 在同一个作用域内，所有的定义的变量，以最后一个变量数值为准
1、 嵌套层数不要超过3层
2、 运算符注意要在运算符两旁有空格
3、 Mixins（仅类似函数，但用法与函数有一点区别，必须以.开头的函数名）
** 如果函数有参数且参数没有给默认值，那么调用时所有实参都要写上（不需要的用''写实参），不然报错
4、 函数找文档
color: saturate(@color, 10%); // 饱和度增加 10%
color: desaturate(@color, 10%); // 饱和度降低 10%
color: lighten(@color, 10%); // 亮度增加 10%
color: darken(@color, 10%); // 亮度降低 10%
5、 匹配，在函数形参内添加一个标记，下面调用时判断是哪个标记就调用哪个函数，一般匹配都用在相同函数名
eg 圆角4个角时的判断
6、 &:hover {}
7、 @import "url" less文件关联其他less文件
【zepto.js框架】（6-10K轻量级,类似JQ的专门的做移动端方面的框架）
0、分核心模块与插件模块，插件模块必须在下面引用才能触发对应的函数 eg: animate() 必须要添加 fx.js
1、animate()函数 zepto 和 JQ 的动画不一样
***************zepto的底层是通过css3 实现的（就是通过transition），jQuery是通过操作DOM实现的（通过数值相加，所以颜色,字体加粗等是不能通过JQ的animate实现）
2、zepto上面的动画，不要加太多， 因为动画很耗性能，加多了会很卡，特别是一些webview开发；
一、【视口】
1、<meta name="viewport" content="width=device-width, initial-scale=1">
有些地方为了更准确，可能会约束的更多一些：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1,.maximum-scale=1.0, user-scalable=0">
width 设置viewport的宽度，为一个正整数，或字符串"width-device"
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
二、【click 和tap】
1、Click在jq和zepto中都是可以使用的
不同的是tap只有在zepto中才有，而且tap的速度更快（快约200ms）
Tap效果只在移动端才能使用。
三、【swipe-】
1、用在移动端触摸滑动发生事件
【swiper】(轻量级、主要处理移动设备触控滑块，横跨各种设备)
1、底层原理通过CSS3控制，所以在做类似微场景这样的全屏效果的时候，不能通过translate去改变位置，*****只能通过margin-left等
2、做移动端做适配，要根据设计图给的尺寸去改变视口content="尺寸"，这样里面的图片就不需要去做宽高设置，直接根据屏幕自适应
3、可以与animate.css配合用 看官网
【JQ的ajax】
1、$("name").load(url,{"id":123},function(){}); 请求的数据类型为post
如果不传中间的json数据请求的数据为get
2、$.getJSON(url,function(data){}) getJSON 只能接受json数据格式（和有数组包含的json数据）的文件，无论文件后缀名称
【SuperSlide】（解决PC和移动端大部分特效展示问题的框架，PC依赖JQ、移动端不依赖JQ）
1、www.superslide2.com
【BootStrap基本结构解释】
1、<meta http-equiv="X-UA-Compatible" content="IE=edge">
按IE最新版渲染页面（防止跳转，出现怪异情况）
2、<!--[if lt IE 9]> <!-- 只有IE才识别的注释 -->
<script src="lib/html5shiv/html5shiv.min.js"></script> <!-- 不支持h5标签的浏览器需要引用 html5shiv.js 包 -->
<script src="lib/respond/respond.min.js"></script> <!-- 不支持媒体查询的浏览器 需引入 respond.js 包 -->
<![endif]-->
【sublime框架智能提示方法】
1、装插件 -> Preference -> Package Settings -> sublime Better Completion -> setting User -> 找到对应插件改为true
【BootStrap】
1、表单给颜色变化 给标签这些属性 has-success（绿） has-error（红） has-warning（黄）
2、.form-control 设置表单元素的宽度100% (input,select,textarea)
.form-group 包裹在 .form-group 中可以获得最好的排列
.form-inline
.form-horizontal 水平排列的表单 联合使用 Bootstrap 预置的栅格类
3、http://placehold.it/300X500 图片占位用 img src=""
4、也可以用阿里巴巴那种字体方式
【mousewheel框架】（与JQ scroll 用法一致）
1、因为滚滚屏去掉了滚动条，所以scroll失效，就要用mousewheel去绑定滚动事件
2、mousewheel 有2个参数 e(事件参数) d(正反向 1 -1)；
【QQ浏览器】
1、backface-visibility: hidden (用于3d旋转时 背面隐藏)
【图片作拖拽动画出现问题】
1、拖拽图片会出现禁止图标，使鼠标弹起事件失效，原因（浏览器默认行为拖拽图片，会产生打开该图片地址或打开图片为网址）
**********解决办法放一个透明层覆盖在图片上方，但这样做的话，遇到全屏图片拖拽会导致其他地方也会被遮盖
【JQ解绑事件用unbind】
【jquery.interactive_bg】（压缩后6.32k）(框架有用法interactive-background)
1、鼠标移动背景跟着微小滚动
用法: <html>--<body>
..
<div data-ibg-bg="bg.jpg"></div>
..
</body>
JQ:
$(".bg").interactive_bg({
strength: 25, //该选项控制背景随着光标移动而移动的强度
scale: 1.05, //该选项控制背景缩放的规模
animationSpeed: "100ms", //接受css持续时间
contain: true, //如果你设置的scale数据高于1，那么在此处如果值为true将防止扩大对象/背景溢出容器，值为false时，扩展内容就会溢出。默认 值为true。
wrapContent: false //该选项让你选择是否在容器里面的所有元素都跟随光标的移动而移动，或者只是单纯的背景有效应。值为true时所有元素都响应该 函数。默认值是false。
});
响应式背景
$(document).ready(function(){
$(".bg").interactive_bg(); // function call
});
// change background size on window resize
$(window).resize(function() {
$(".bg > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})
网址：http://www.uqu8.com/html/2014/html-css_0911/15.html
扫一扫
147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
