Web前端系统学习——课程笔记（章节15-17）

Web前端系统学习——课程笔记

课程链接：WEB前端系统学习 - 网易云课堂

参考教程：菜鸟教程

笔记链接：Web-Learn-Note

---

• 章节15 CSS3动画过渡
• 章节16 JS认知
• 章节17 JS属性操作

---

章节15 CSS3动画过渡

• 课时54 过渡 18:10

  过渡 ，就是从一个值到另一个值之间的过程
  transition
  	比如：
  		transition:1s 1s all ease; 后三个值可以省略
  
  		第一个值：过渡的总时间 单位是s或ms
  
  		第二个值：延迟过渡的时间 单位是s或ms
  
  		第三个值：需要过渡的样式
  
  		第四个值：过渡的方式
  
  					linear 匀速
  
  					ease    慢速开始，然后慢慢变快
  					ease-in 慢速开始
  					ease-out 慢速结束
  					ease-in-out 开始和结束都慢
  					cubic-bezier(1,0,1,0) 贝瑟尔曲线
  					贝瑟尔曲线线上工具 http://xuanfengge.com/easeing/ceaser/
  

• 课时55 2D变换 20:42

  变换    transform
      位移
          translate 当中接受的值就是正常的px值 ru：200px
          translateX() 正值往右走 负值往左走
          translateY() 正值往下走 负值往上走
          translate(X轴的位移量,Y轴的位移量)
              第一个值X轴位移量
              第二个值Y轴的位移量
              中间用逗号隔开
  
      旋转
          rotate 当中接受的是一个旋转角度 如：45deg
          rotate() 正值是顺时针 负值逆时针
  
      缩放
          scale 当中接受的是一个数值，可以使浮点数 如：1.2 或者 0.3 或者 2
          scale() 大于1 是放大效果 小于1 是缩小效果
      斜切
          skew 当中接受的也是一个旋转角度 如：40deg
          skewX() 
          skewY()
          skew(30deg,30deg)
              第一个值X轴斜切角度
              第二个值Y轴斜切角度
              中间用逗号隔开
  
  变换原点
      transform-origin
          left
          top
          right
          bottom
          center
          默认是center 当设置相应的值后，会按照相应的设置的值发生变换
  

• 课时56 3D变换 27:12

     3d效果，首先需要给需要进行3d变换的元素的父级，添加3d环境 和 景深
      	方法：
      		transform-style:preserve-3d; 添加3d环境
      		perspective:数值; 如：300px;
  
  		transform
  			rotateX 跳水 或者 后手翻 前空翻
  			rotateY 扫堂腿 或者 红人 芭蕾舞
  			rotateZ 大风车 或者 风火轮 
  
  			translateX 向左右 向右走
  			translateY 上天 入地
  			translateZ 冲着你来 或者 冲着你倒退
  
  兼容 ie9以下不支持
  

• 课时57 animation 关键帧 17:14

  动画
  	animation
  		首先要先定义一套关键帧
  			方法：
  				@keyframes 动画名称{
  					0%{
  						相应的样式
  					}
  					10%{
  						相应的样式
  					}
  					20%{
  						相应的样式
  					}
  					100%{
  						相应的样式
  					}
  				}
  			（温馨提示，可以从0%一直设置到100%）
  
  		然后调用 动画名称 
  			方法：
  				animation:1s 2s 动画名称 运动方式 动画执行的次数
  					第一个值：运动的总时间
  					第二个值：延迟的运动时间
  					第三个值：动画名称
  					第四个至：运动方式
  						linear 匀速
  
  						ease    慢速开始，然后慢慢变快
  						ease-in 慢速开始
  						ease-out 慢速结束
  						ease-in-out 开始和结束都慢
  						cubic-bezier(1,0,1,0) 贝瑟尔曲线
  						贝瑟尔曲线线上工具 http://xuanfengge.com/easeing/ceaser/
  
  					第五个值：动画执行的次数
  						可以具体的数值 也可以是无限次 infinite
  

章节16 JS认知

• 课时58 JS认知 18:06

• 课时59 显示隐藏 29:45

  下拉列表的显示隐藏
  变量声明
  	方法：
  		var 变量名
  			var变量声明的关键字
  			变量名就是你自己瞎编的 但是不能是关键保留字 比如：var function
  			关键字 保留字的网址 http://www.runoob.com/js/js-reserved.html
  

章节17 JS属性操作

• 课时60 JS属性操作读写 13:59

  属性操作
  	属性 分为属性名 和 属性值
  		在标签中设置属性 方法： 属性名="属性值"
  		在CSS中设置属性 方法： 属性名:属性值;
  	操作
  
  		读操作 获取 查找
  			方法： 元素.属性名 比如： oDiv.style.width
  		写操作 添加 替换 修改
  			方法： 元素.属性名 = 新要设置的值 比如：oDiv.style.width = '400px'
  			
  			= 一个等号就是赋值
  				会把等号右边的给左边
  

• 课时61 字符串拼接 15:43

  字符串的拼接
  	字符串就是JS数据类型的一种
  		数字 可以进行运算
  		字符串 进行拼接
  		布尔  
  
  	+ 
  		数字类型相加可以运算 就是相加
  		字符串类型和任何类型相加都是字符串，都会进行拼接
  

• 课时62 if 16:13

• 课时63 innerHTML className 22:11

  innerHTML就是元素里面所有的东西 文字 换行 标签 …… 
  
  innerHTML可以进行读操作 也可以进行写操作
  	oDiv.innerHTML 
  		读取元素里面的内容
  	oDiv.innerHTML = 新的值;
  		替换
  			用新的值 代替 旧的值
  
  	+=
  		在自身的基础上 累加一个新的值 可以用加等
  		比如
  			a = a + 2;
  			a += 2;
  
  		在比如：
  			oDiv.innerHTML = oDiv.innerHTML + '诺手';
  			oDiv.innerHTML += '诺手';
  

• 课时64 “-” 33:15

  在JS中的属性操作中，不允许出现“-” ，用驼峰式命名代替
  
  数组就是用来存数据的大仓库
  		1.每一个数据中间用逗号隔开
  		2.通过数组下标读取 下标是从0开始
  			比如
  				var arr = [1,2,'img/1.jpg'];
  				alert(arr[2]);
  		3.数组的长度 length