互联网移动应用总结

目录

一、css动画

1、动画原理及2D变换

2、过度动画

3、3d变换和animation动画

4、渐变色分栏布局与响应式 

二、jQuery

1、jquery基础用法   

2、创建jquery并插入元素 

3、设置样式与设置类，设置属性，设置标签体 

4、绑定事件 

5、遍历元素 

6、表单元素取值赋值 

7、特效 

8、元素包裹 

9、ready事件 

10、读取和设置元素大小和位置 与获取和设置滚动条的位置

11、Ajax

三、canvas画布

1、canvas的基础用法   

2、绘制矩形   

3、绘制文本 

4、画线   

5、fillStyle和strokeStyle   

6、绘制图片   

7、像素级颜色操作

四、多媒体标签、swiper和animate.css

1、多媒体标签 

2、animate.css

3、swiper

---

一、css动画

1、动画原理及2D变换

        ①平移

 /* transform: 变换，用于描述物体的位置旋转缩放

                translate: 平移

                第一个参数 水平平移量 右为正方向

                第二个参数 竖直平移量 下为正方向

                    transform: translate(px, px);  第一个为X轴，第二个为Y轴

                    transform: translateX(px);指定为X轴平移

                    transform: translateY(px);指定为Y轴平移

                   transform: translateZ(px);指定为Z轴平移

              ②旋转

              ③缩放

              ④倾斜

2、过度动画

①：transition过渡动画 ②：通过class来控制过渡动画 ③：transition动画事件 

3、3d变换和animation动画

①：animation动画 /* 参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation */ 

第二种方式

②：动画的播放和暂停

③：使用class控制animation动画

④：3d变换与3d立方体

主盒子设置 ：transform-style: preserve-3d;

4、渐变色分栏布局与响应式 

①：属性选择器 

②：伪类选择器

③：渐变色

④：分栏布局 

⑤：响应式布局

 响应式是什么？

         当某个事情发生后，立即做出反应就叫响应式

什么是页面的响应式？

         页面的元素样式会根据页面的宽度做出变化

 为什么要使用页面响应式

         为了让同一个页面能够适配不同的设备

如何实现响应式？

 使用媒体查询，来实现响应式布局 

 媒体查询的作用：当媒体查询条件成立时，将应用花括号中代码块的样式 

        语法：@media media-type and (condition1) and (condition2) ... 

二、jQuery

1、jquery基础用法