JavaScript背景
Web前端有三层:
HTML:从语义的角度,描述页面结构
CSS:从审美的角度,描述样式(美化页面)
JavaScript:从交互的角度,描述行为(提升用户体验)
JavaScript是世界上用的最多的脚本语言。
发展历史
JavaScript诞生于1995年。布兰登 ? 艾奇(Brendan Eich,1961年~),1995年在网景公司,发明的JavaScript。
JavaScript是由网景公司发明,起初命名为LiveScript,后来由于SUN公司的介入更名为了JavaScript。
备注:由于当时Java这个语言特别火,所以为了傍大牌,就改名为JavaScript。如同“北大”和“北大青鸟”的关系。“北大青鸟”就是傍“北大”大牌。
同时期还有其他的网页语言,比如VBScript、JScript等等,但是后来都被JavaScript打败了,所以现在的浏览器中,只运行一种脚本语言就是JavaScript。
JavaScript和ECMAScript的关系
ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称 ...
前言
JS动画的主要内容如下:
1、三大家族和一个事件对象:
三大家族:offset/scroll/client。也叫三大系列。
事件对象/event(事件被触动时,鼠标和键盘的状态)(通过属性控制)。
2、动画(闪现/匀速/缓动)
3、冒泡/兼容/封装
4、正则
offset 家族的组成
我们知道,三大家族包括:offset/scroll/client。今天来讲一下offset,以及与其相关的匀速动画。
offset的中文是:偏移,补偿,位移。
js中有一套方便的获取元素尺寸的办法就是offset家族。offset家族包括:
offsetWidth
offsetHight
offsetLeft
offsetTop
offsetParent
下面分别介绍。
1、offsetWidth 和 offsetHight
用于检测盒子自身的宽高+padding+border,不包括margin。如下:
offsetWidth = width + padding + border;
offsetHeight = Height + padding + ...
缓动动画
三个函数
缓慢动画里,我们要用到三个函数,这里先列出来:
Math.ceil() 向上取整
Math.floor() 向下取整
Math.round(); 四舍五入
缓动动画的原理
缓动动画的原理就是:在移动的过程中,步长越来越小。
设置步长为**:目标位置和盒子当前位置的十分之一**。用公式表达,即:
1盒子位置 = 盒子本身位置 + (目标位置 - 盒子本身位置)/ 10;
代码举例:
123456789101112131415161718192021222324252627282930313233<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height ...
client 家族的组成
clientWidth 和 clientHeight
盒子调用时:
clientWidth:获取盒子区域宽度(padding + width)。
clientHeight:获取盒子区域高度(padding + height)。
body/html调用时:
clientWidth:获取网页可视区域宽度。
clientHeight:获取网页可视区域高度。
clientX 和 clientY
event调用:
clientX:鼠标距离可视区域左侧距离。
clientY:鼠标距离可视区域上侧距离。
clientTop 和 clientLeft
clientTop:盒子的上border。
clientLeft:盒子的左border。
三大家族 offset/scroll/client 的区别
区别1:宽高
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 内容宽度(不 ...
方法的注释
方法写完之后(注意,一定要先写完整),我们在方法的前面输入/**,然后回车,会发现,注释的格式会自动补齐。
比如:
123456789/** * 功能:给定元素查找他的第一个元素子节点,并返回 * @param ele * @returns {Element|*|Node} */function getFirstNode(ele){ var node = ele.firstElementChild || ele.firstChild; return node;}
断点调试
(1)先让程序运行一遍。
(2)f12,弹出代码调试工具
(3)打断点:
然后刷新页面。
(4)一步步调试,每点击一次,执行一步:
(5)监视变量:
当然,也可以添加变量或者表达式到监视窗口。操作如下:
上图中,选择变量或表达式,然后右键add to watch.
然后监视窗口:
新建文件时快速生成Html
安装如下插件:
FileHeader:自动创建文件开头模板,并且会根据最后的保存时间修改更新时间。官网链接。
CSS Format:css格式化。
Emmet:它能够让你在编辑器中书写CSS和HTML的缩写并且动态地拓展它,是一个能大幅度提高前端开发效率的一个工具。这个软件的安装过程比较久。官网教程。
开始使用:
新建文件,输入html:5,按[Ctrl + E] 或者 Tab 键,
参考链接:Sublime Text 新建文件快速生成Html【头部信息】和【代码补全】、【汉化】
常用插件
SublimeCodeIntel:JavaScript代码自动提示(不好用)
安装完成后,通过路径Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut打开配置文件。
将
12"codeintel_selected_catalogs": ["jQuery"]
改为:
1"codeintel_selected_catalogs ...
CSS3属性详解:动画详解
发表于 | 更新于 | css3
前言
本文主要内容:
过渡:transition
2D 转换 transform
3D 转换 transform
动画:animation
过渡:transition
transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征,可以实现元素不同状态间的平滑过渡(补间动画),经常用来制作动画效果。
补间动画:自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。
参考链接:补间动画基础
transition 包括以下属性:
transition-property: all; 如果希望所有的属性都发生过渡,就使用all。
transition-duration: 1s; 过渡的持续时间。
transition-timing-function: linear; 运动曲线。属性值可以是:
linear 线性
ease 减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
transition-delay: 1s; 过渡 ...
前言
我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一些属性。
本文主要内容:
颜色
文本
盒模型中的 box-sizing 属性
处理兼容性问题:私有前缀
边框
背景属性
渐变
颜色
CSS3中,有一种新的表示颜色的方式:RGBA或者HSLA。
RGBA、HSLA可应用于所有使用颜色的地方。
RGBA 举例:
123background-color: rgba(0, 0, 255, 0.3);border: 30px solid rgba(0, 255, 0, 0.3);
解释:
RGBA 即:Red、Green、Blue、Alpha
R、G、B 的取值范围是:0~255
HSLA 举例:
1background-color: hsla(240,50%,50%,0.4);
解释:
H 色调,取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。
S 饱和度,取值范围 0%~100%。值越大,越鲜艳。
L 亮度,取值范围 0%~100%。亮度最大时为白色,最小时为黑色。
A 透明度,取值范 ...