一、css动画

1.元素2D变换transform

2.过渡动画

3.animation动画

4.动画的暂停和播放

5、3D变换

6、属性选择器补充

7.伪类选择器的补充

8.渐变色

9.分栏布局

10.响应式布局

二、jquery

1.jquery使用的方法：

2.创建jquery对象

3.eq和get的用法

4.创建并插入元素

5.设置样式

6.设置类

7.设置属性

8.设置标签体

9.绑定事件

10.元素包裹

11.读取和设置元素大小和位置

12.其他API

三、canvas画布

1.canvas的基础用法

2.绘制矩形

3.绘制文本

4.画线

5.fillStyle和strokeStyle

6.绘制图片

总结：以上的知识点都是比较基础的知识点，需要自己下来多多练习，牢记知识点，灵活运用

一、css动画

1.元素2D变换transform

①平移

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

translate: 平移

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

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

<style>.box {width: 100px;height: 100px;background-color: #f00;transform: translate(-50px, -50px);transform: translateX(300px);transform: translateY(200px);transform: translateZ(50px);}</style>

②旋转

rotate 旋转

参数：可以是角度值 (deg) 也可以是弧度值 (rad) 弧度制的PI = 180°

沿轴进行顺时针旋转为正方向，0°代表竖直向上

负数的含义其实就是 360 - 对应度数

默认旋转函数rotate 是沿着z轴进行旋转

<style>.box {width: 100px;height: 100px;background-color: #f00;position: relative;top: 200px;left: 200px;transform: rotate(30deg);transform: rotate(-30deg);transform: rotateY(0deg);}</style>

③缩放

scale 缩放

参数：比率 1 为原本大小

scale 写负数代表反向

 <style>.box {width: 100px;height: 100px;background-color: #f00;position: relative;top: 200px;left: 200px;transform: scale(1);transform: scaleX(0.5);transform: scaleY(2);transform: scale(2, 0.5);}img {transform: scale(-1);transform: scaleX(-1);}</style>

④倾斜

skew 倾斜

<style>.box {width: 100px;height: 100px;background-color: #f00;position: relative;top: 200px;left: 200px;transform: skew(30deg);transform: skew(0deg, 30deg);transform: skewX(30deg);transform: skewY(30deg);}</style>

⑤给transform同时赋值

 <style>.box {width: 200px;height: 200px;background-color: red;transform: translateX(100px) rotate(45deg) scale(0.5);}</style>

⑥变化的原点

设置transform的原点

原点的位置会影响旋转的圆心，缩放的位置

待选值: top bottom left right center 还可以填入像素值

第一个参数代表水平偏移量第二个参数代表竖直偏移量

transform-origin: right center;

transform-origin: center bottom;

当值为像素值的时候，像素值的参考位置是元素的左上角

transform-origin: 20px 70px;

<style>.box {width: 200px;height: 200px;background-color: red;position: absolute;top: 200px;left: 200px;transform-origin: center;/* transform-origin: right center; *//* transform-origin: center bottom; *//* transform-origin: 20px 70px; */transform: rotate(0deg);transform: scale(0.1);}</style>

2.过渡动画

①transition过渡动画

定义初始状态

transform: translateX(0px);

播放过度动画至少包含 transition-property transition-duration

指定css属性能够产生过度动画

transition-property: left, transform;

transition-property 还有两个待选项

none: 无

all: 所有属性都能播放过渡动画

transition-property: all;

动画播放的时长

transition-duration: 2s;

动画播放的速度曲线

待选项

linear: 匀速直线运动

ease-in: 慢进

ease-out: 慢出

ease-in-out: 慢进慢出

cubic-bezier: 曲线函数

transition-timing-function: linear;

动画播放延迟

transition-delay: 3s;

合成属性

语法:

transition: property duration timing-function delay;

②通过class来控制过渡动画

初始状态

transform: translateX(0);

opacity: 1;

通常来说使用 active 类名来代表播放动画的状态

.box.active 的意思是: 选择既包含.box又包含.active的元素

.box.active {

/* 激活状态 */

transform: translateX(300px);

opacity: 0;

}

添加 active 类名用来控制动画的播放

box.className = 'box active'

box.classList.add('active')

3.animation动画

动画属性如下

动画animation必须包含名称和时长两个属性才会进行播放 */

animation一下四个属性可以和 tansition一块儿进行记忆

/* 动画名称 */

animation-name: move;

/* 动画播放时长 */

animation-duration: 3s;

/* 动画播放的速度曲线 */

animation-timing-function: linear;

/* 动画延迟 */

/* animation-delay: 3s; */

以下属性为 animation 独有的属性

/* 动画的迭代次数

infinite 无限次

*/

animation-iteration-count: 1;

/* 动画播放方向

待选项:

normal: 顺向播放

reverse: 反向播放

alternate: 来回播放

alternate-reverse: 反向来回播放

*/

animation-direction: normal;

/* 动画填充模式（动画播放结束后所保留的状态）

forwards: 保留结束帧的状态

backwards: 保留起始帧的状态

both: 保留初始和结束时的状态

*/

animation-fill-mode: both;

可以定义复合属性，取代上面的所有属性

赋值顺序，可以参考如下顺序

duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */

/* duration | timing-function | delay | name */

/* duration | name */

/* animation: 2s move;

animation: 2s linear 3s move

例子：

<style>
.box{animation: move 3s linear 2s forwards;}
/* 动画帧序列 */@keyframes move {/* 起始帧 */from {/* 每一帧中描述该元素的状态 */transform: translateX(0px);opacity: 0;}/* 可以用百分比来代表动画的中间状态 */50% {transform: translateX(600px);opacity: 1;}/* 结束帧 */to {transform: translateX(300px);}}</style>

4.动画的暂停和播放

animationPlayState 动画播放状态

paused 暂停

running 播放

5、3D变换

要使用3d变换需要依序执行以下步骤：

①. 搭建3d场景，在父元素上设置：transform-style: preserve-3d;

②. 在父元素上设置透视距离：perspective: 100px;

③. 给场景添加演员，给场景元素添加子元素

④. 在子元素上使用3d变换

6、属性选择器补充

匹配属性值包含指定内容的元素

input[name*=e] {

border: 3px solid red;

}

匹配属性值以指定内容开头的元素

input[name^=s] {

font-size: 24px;

}

匹配属性值以指定内容结束的元素

input[name$=e] {

background-color: greenyellow;

}

匹配属性值包含 dep- 开头的元素

input[name|=dep] {

border: 3px solid blue;

}

7.伪类选择器的补充

表单元素被禁用时的样式

input:disabled {

border: 3px solid red;

}

disabled仅限于表单元素使用

.box:disabled {

border: 3px solid black;

}

checked代表被勾选的元素

input[name=sex]:checked {

width: 100px;

height: 100px;

}

选中元素中的第一个字符

.hw::first-letter {

color: red;

}

元素中的第一行内容

.p1::first-line {

color: green;

}

选中的内容

.p2::selection {

background-color: gold;

}

8.渐变色

背景的渐变色实际上是设置的 background-image 而不是 background-color

线性渐变：

语法: linear-gradient(direction, color1, color2, color3 ... )

direction: 渐变色的朝向以 to 开头, 或者可以添加角度值; 默认值为 to top

color1 color2 ...: 渐变的颜色序列

background-image: linear-gradient(30deg, #f00, #0f0, #00f);

颜色值后可以添加像素距离，该像素值代表着该颜色所处的位置，该位置颜色将到下一个位置的颜色之间进行渐变

background-image: linear-gradient(to right, #f00, #f00 50px, #0f0 50px, #0f0 100px, #00f 200px);

重复线性渐变

background-image: repeating-linear-gradient(to right, #f00, #f00 50px, #00f 50px, #00f 100px);

径向渐变

background-image: radial-gradient(#f00, orange, #0f0, #ff0, #f0f);

background-image: radial-gradient(#f00, #f00 50px, #00f 50px, #00f 100px, #0f0 100px, #0f0 200px);

重复径向渐变

background-image: repeating-radial-gradient(#f00, #f00 50px, #ff0 50px, #ff0 100px);

9.分栏布局

设置文本列数

column-count: 3;

设置列宽度

column-width: 150px;

分栏边框，属性值和边框的属性值相同

column-rule: 5px double red;

两列文本中间的间距

column-gap: 100px;

10.响应式布局

响应式是什么？

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

此处我们讨论的是页面的响应式

什么是页面的响应式？

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

为什么要使用页面响应式

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

如何实现响应式？

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

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

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

媒体类型 media-type：

备选项

all: 所有设备

print：打印机的预览模式

screen：显示屏

speech：语音合成器

min-width: 屏幕最小宽度

max-width: 屏幕最大宽度

 @media screen and (min-width: 600px) and (max-width: 900px) {.box {background-color: orange !important;}}@media screen and (min-width: 900px) {.sidebar {display: block !important;}}@media screen and (max-width: 900px) {.sidebar-mini {display: block !important;}}

二、jquery

1.jquery使用的方法：

① 查询并存储元素

② 操作元素，包括修改元素样式，绑定事件等

使用 $() 函数获取一个 jQuery 对象

jquery 对象的变量名一般以 $ 美元符开头

let $box = $('.box')

jquery 对象看上去像一个数组其中数组成员就是 dom 对象

给元素添加样式

$box.css('height', '100px')

$box.css('background-color', '#f00')

jquery对象的函数总返回自己

所以可以进行链式调用

2.创建jquery对象

什么是jquery 对象

使用jquery $() 函数查询出来的返回值就是一个jquery 对象

$box 就是一个jquery 对象

let $box = $('.box')

获取jquery对象的方法有两种

①使用 css 选择器

let $li = $('ul>li')

②使用 dom 对象

先查询一个dom对象

let box = document.querySelector('.box')

使用dom对象获取一个jquery对象

let $box = $(box)

3.eq和get的用法

eq 读取对应索引位置的jquery对象

let $li = $lis.eq(1)

get 读取对应索引位置的dom对象

let li = $lis.get(2)

li.style.color = '#f00'

使用 [] 方括号的方式去获取索引对应的 dom 对象

其结果等价于 get 函数获取的结果

let li = $lis[2]

li.style.color = '#f00'

4.创建并插入元素

创建一个节点，该节点就是一个jquery对象

let $box = $(`<div class="box">new</div>`)

某个元素追加一个子节点

$(document.body).append($box)

追加一个子节点到另一个元素中

$box.appendTo($(document.body))

某个元素追加一个节点到头部

$(document.body).prepend($box)

追加一个子节点到另一个元素的头部

$box.prependTo($(document.body))

某个元素的前面追加一个元素

$box2.before($box)

某个元素被添加到另一个元素的前面

$box.insertBefore($box2)

某个元素的后面添加一个元素

$box2.after($box)

某个元素被添加到另一个元素的后面

$box.insertAfter($box2)

5.设置样式

读取样式

let width = $box.css('width')

console.log(width);

读取多个样式

let r = $box.css(['width', 'color', 'font-size'])

console.log(r);

赋值样式

$box.css('background-color', '#f00')

通过函数来赋值样式

index 遍历的数组成员的索引

value 对应索引元素的样式值

$box.css('background-color', (index, value) => {

console.log(index, value);

返回一个参数就可以赋值css属性

if (index === 0) {

return 'pink'

} else {

return 'gold'

}

})

6.设置类

添加类

$box.addClass('active')

判断是否存在某个类名

$box.hasClass('active')

删除类

$box.removeClass('active')

7.设置属性

读取属性

let clazz = $box.attr('class')

console.log(clazz);

赋值属性

$box.attr('my-data', 'hello world')

删除属性

$box.removeAttr('class')

8.设置标签体

相当于dom对象的innerText

$p.text('<span style="color: red">hello</span> world')

相当于dom对象的innerHTML

$p.html('<span style="color: red">hello</span> world')

9.绑定事件

和dom对象绑定事件进行类比

dom 对象有两种绑定事件的方法

①使用事件属性例如: onclick onmousemove

$btn.click(ev => {

console.log('click');

// ev 是jquery封装的事件对象

console.log(ev);

})

② 使用事件监听器

$btn[0].addEventListener('click', ev=>{})

const handler = ev => {

console.log(ev);

console.log(1);

}

绑定事件

$btn.on('click', handler)

$btn.on('click', ev => {

console.log(ev);

console.log(2);

})

绑定一次性事件

$btn.one('click', ev => {

console.log(ev);

console.log('one');

})

解绑指定事件处理程序

$btn.off('click', handler)

解绑所有事件处理程序

$btn.off('click')

10.元素包裹

wrap wrapAll 函数作用是将指定元素用一段html内容包裹起来

每一个元素都使用 div 来进行包裹

$('li').wrap('<div class="fs"></div>')

所有的 li 元素用一个 div 进行包裹

$('li').wrapAll('<div class="fs"></div>')

11.读取和设置元素大小和位置

读取元素位置

position 查询元素相对于父元素的位置不能赋值只能读值

console.log($box.position());

offset 查询元素全局坐标

console.log($box.offset());

offset 可以赋值

$box.offset({ top: 200, left: 100 })

所有查询元素大小的函数均可赋值

查询元素的内容宽高

console.log($box.width(300));

console.log($box.height());

innerWidth 代表 width + padding

console.log($box.innerWidth());

outerWidth 代表 width + padding + border

console.log($box.outerWidth());

12.其他API

index() 查询某个节点在集合中的索引

let index = $('.box').index($('.box:nth-child(3)'))

console.log(index);

find() 查询某个节点的后代节点

let $span = $('.box-list').find('.box>span')

console.log($span);

js api 的查询方法

let boxList = document.querySelector('.box-list')

查询boxList的子节点

console.log(boxList.querySelector('.box>span'));

closest 查询最近的父节点

console.log($span.closest('.box-list'));

三、canvas画布

1.canvas的基础用法

使用canvas的步骤

① 创建canvas标签

② 给canvas标签设置 width height 属性

canvas width="400" height="300"></canvas>

③ 通过js 获取canvas标签

④. 通过canvas标签获取context画布上下文（画布对象）

const ctx = canvas.getContext('2d')

⑤ 通过context绘制画布

ctx.fillRect(100, 50, 100, 100)

2.绘制矩形

改颜色

ctx.fillStyle = '#f00'

绘制实心矩形(rectangle)

ctx.fillRect(x, y, w, h)

x: 水平坐标

y: 竖直坐标

/坐标原点在canvas左上角

w: 宽度

h: 高度

ctx.fillRect(50, 100, 150, 50)

镂空矩形

参数和实心矩形相同

ctx.strokeRect(300, 100, 200, 100)

清空矩形, 用于清空画布

ctx.clearRect(0, 0, 800, 600)

3.绘制文本

修改字体大小和字体库

ctx.font = '32px 华文琥珀'

ctx.fillStyle = '#f00'

绘制实心文字

语法：ctx.fillText(text, x, y, max-width)

text: 要渲染的文本

x,y: 文本渲染的坐标位置

max-width: 文本最大宽度，当大于该宽度，文本字体将自动缩小以自适应宽度

ctx.fillText('祖国万岁!!', 200, 100, 100)

ctx.fillText('祖国万岁!!', 200, 100)

ctx.strokeStyle = '#0f0'

镂空文字

参数和实心文本相同

ctx.strokeText('祖国万岁!!', 200, 300)

4.画线

设置颜色和线宽

ctx.strokeStyle = '#ff0'

ctx.lineWidth = 15

画线分两个步骤:

①描点（设置路径）

②画线（将所描的点连接起来）

步骤一

使用 beginPath 开启路径

ctx.beginPath()

移动笔头但不会记录路径上的线条

ctx.moveTo(400, 100)

用线绘制到下一个点

ctx.lineTo(200, 200)

ctx.lineTo(600, 200)

ctx.lineTo(400, 100)

将路径封闭

ctx.closePath()

注意：beginPath在画新的路径的时候必须调用，closePath选择性调用

步骤二

为了显示图形需要调用以下函数

将路径所包围的图形用纯色来填充

ctx.fill()

将路径用镂空线条进行绘制

ctx.stroke()

ctx.strokeStyle = '#f00'

ctx.beginPath()

ctx.moveTo(400, 400)

ctx.lineTo(500, 400)

角度转弧度的公式: rad = (PI / 180) * deg

弧线

ctx.arc(x, y, r, start, end)

x: 圆心横坐标

y: 圆心纵坐标

r: 圆半径

start: 起始弧度 0度时的方向为水平向右顺时针为正方向

end: 结束弧度

ctx.arc(400, 400, 100, 0, Math.PI / 180 * 30)

ctx.closePath()

ctx.fill()

ctx.stroke()

5.fillStyle和strokeStyle

fillStyle 可以修改所有使用fill的函数所填充的颜色

ctx.fillStyle = '#f00'

ctx.fillRect(0, 0, 50, 50)

ctx.beginPath()

ctx.arc(250, 250, 200, (Math.PI / 180) * (-90), (Math.PI / 180) * (90))

ctx.fill()

strokeStyle 可以修改所有stroke函数的描边颜色

ctx.strokeStyle = 'violet'

ctx.lineWidth = 10

ctx.strokeRect(50, 0, 50, 50)

ctx.beginPath()

ctx.arc(250, 250, 200, (Math.PI / 180) * (90), (Math.PI / 180) * (270))

ctx.stroke()

6.绘制图片

语法:

ctx.drawImage(image, dx, dy);

ctx.drawImage(image, dx, dy, dWidth, dHeight);

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

image: img 标签的 dom 对象

dx dy: 图片在canvas中的坐标

dWidth dHeight: 图片在canvas中的宽高

sx, sy: 参考图片源，截图的坐标

sWidth, sHeight: 截图的宽高

const img = document.querySelector('img')

const canvas = document.querySelector('canvas')

const ctx = canvas.getContext('2d')

img.addEventListener('load', () => {

// // 图片加载完成后再绘制图片

// // ctx.drawImage(img, 100, 100)

// // ctx.drawImage(img, 100, 100, 100, 100)

// ctx.drawImage(img, 10, 100, 170, 170, 100, 100, 170, 170);

// })

动态生成图片进行绘图

let img = document.createElement('img')

img.style.display = 'none'

img.src = './img/heihei.png'

img.addEventListener('load', ev => {

// 绘图

ctx.drawImage(img, 10, 100, 170, 170, 100, 100, 170, 170);

// 删除图片节点

img.remove()

})

// 插入图片到页面

document.body.appendChild(img)

总结：以上的知识点都是比较基础的知识点，需要自己下来多多练习，牢记知识点，灵活运用

移动互联网应用的阶段学习总结相关推荐

聚焦互联网应用和深度学习
互联网已经发展到互联网3.0阶段,可是本人还只能从零开始,先学习好java(平台开发).做好最基础的. 第二阶段,伴随着互联网的人功能智能的快速发展,基于深度学习的各种应用,得到大力普及,如智能机器人 ...
牛逼！java程序员必看经典书单，以及各个阶段学习建议!
本文作者为优知学院创始人陈睿(mike),作者有10年以上技术&产品经验,曾任百度研发经理.携程定制旅游CTO. 优知学院,首家互联网技术结合产品学习社区.提供互联网技术.产品的入门指南.干货 ...
2018年计算机职称考试冲刺,2018年中级会计职称考试冲刺阶段学习计划
2018年中级会计师考试冲刺阶段复习时间段是8月12日至9月8日.经过前面一段时间的复习,相信考生已经对全书的内容有了一定的了解和掌握.在此小编为大家总结了2018年中级会计职称考试冲刺阶段学习计划, ...
Python第一阶段学习总结
[第7天]Python第一阶段学习总结 2021/09/23 一. 元组元组的定义元组是容器型数据(序列),将()作为容器的标志里面多个元素用逗号隔开:(元素1, 元素2,-) 元组不可变(不支持 ...
OpenCV作业及近阶段学习总结
OpenCV作业及近阶段学习总结作业描述不太理解为啥不让用OpenCV的API,明明可以直接可以一行代码搞定..... numpy代码如下: 均值滤波 import cv2 import nump ...
Java web阶段学习总结(华清远见)
标题Java web阶段学习总结经过web前端的学习之后,我们开启了Java web后端的学习. 学习一样新的东西首先要了解它的原理,以及所要具备的一些条件.对于Servlet 的开发步骤一般有:新 ...
自学大数据者请进：大数据学习线路及各阶段学习书籍推荐
大数据学习路线及各阶段学习书籍推荐!废话不多说,直接切入主题,有需要的小伙伴可以参考学习! 阶段一.大数据基础--java语言基础方面自学大数据者请进:大数据学习线路及各阶段学习书籍.视频推荐 (1 ...
如今互联网时代，必须学习黑客的思维模式
如今互联网时代,必须学习黑客的思维模式,灵活.变通.掌握高科技才是未来唯一出路.因此像现在国内知名黑客培训机构东方联盟,这是很多年轻人向往学习的地方.那么什么是黑客技术?许多黑客实际上是书呆子.程序员 ...
大数据学习线路及各阶段学习书籍推荐
大数据学习路线及各阶段学习书籍推荐!废话不多说,直接切入主题,有需要的小伙伴可以参考学习! 阶段一.大数据基础--java语言基础方面 (1)Java语言基础 Java开发介绍.熟悉Eclipse开发 ...

移动互联网应用的阶段学习总结

一、css动画

1.元素2D变换transform

2.过渡动画

3.animation动画

4.动画的暂停和播放

5、3D变换

6、属性选择器补充

7.伪类选择器的补充

8.渐变色

9.分栏布局

10.响应式布局

二、jquery

1.jquery使用的方法：

2.创建jquery对象

3.eq和get的用法

4.创建并插入元素

5.设置样式

6.设置类

7.设置属性

8.设置标签体

9.绑定事件

10.元素包裹

11.读取和设置元素大小和位置

12.其他API

三、canvas画布

1.canvas的基础用法

2.绘制矩形

3.绘制文本

4.画线

5.fillStyle和strokeStyle

6.绘制图片

总结：以上的知识点都是比较基础的知识点，需要自己下来多多练习，牢记知识点，灵活运用

移动互联网应用的阶段学习总结相关推荐

最新文章

热门文章