如初的博客🥝

发表于 2024-10-22 | 更新于 2024-10-22 | JavaScript特效 | JavaScript特效

前言 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 + ...

02-scroll家族和缓动动画

发表于 2024-10-22 | 更新于 2024-10-22 | JavaScript特效 | JavaScript特效

缓动动画三个函数缓慢动画里，我们要用到三个函数，这里先列出来： 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 ...

03-client家族(可视区)

发表于 2024-10-22 | 更新于 2024-10-22 | JavaScript特效 | JavaScript特效

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 = 内容宽度（不 ...

04-JS的小知识

发表于 2024-10-22 | 更新于 2024-10-22 | JavaScript特效 | JavaScript特效

方法的注释方法写完之后（注意，一定要先写完整），我们在方法的前面输入/**，然后回车，会发现，注释的格式会自动补齐。比如： 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. 然后监视窗口：

07-浮动

发表于 2024-10-22 | 更新于 2024-10-22 | css | css

文本主要内容标准文档流标准文档流的特性行内元素和块级元素行内元素和块级元素的相互转换浮动的性质浮动的清除浏览器的兼容性问题浮动中margin相关关于margin的IE6兼容问题标准文档流宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。标准文档流的特性（1）空白折叠现象：无论多少个空格、换行、tab，都会折叠为一个空格。比如，如果我们想让img标签之间没有空隙，必须紧密连接： 1<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" /> （2）高矮不齐，底边对齐：举例如下：（3）自动换行，一行写不满，换行写。行内元素和块级元素学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等级：行内元素块级元素我们可以举一个例子 ...

04-Sublime Text在前端中的使用

发表于 2024-10-22 | 更新于 2024-10-22 | 前端工具 | 前端

新建文件时快速生成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 ...

02-Git的使用

发表于 2024-10-22 | 更新于 2024-10-22 | 前端工具 | 前端

常见操作全局配置用户信息 123git config --global user.name "smyhvae"git config --global user.email "smyhvae@163.com" 分支的合并场景：基于master分支的代码，开发一个新的特性如果你直接在master分支上开发这个新特性，是不好的，万一你在开发特性1的时候，领导突然又要叫你去开发特性2，就不好处理了。难道开发的两个特性都提交到master？一会儿提交特性1的commit，一会儿提交特性2的commit？这会导致commit记录很混乱。所以，我给你的建议做法是：给每个特性都单独建一个的新的分支。比如说，我专门给特性1建一个分支feature_item_recommend。具体做法如下：（1）基于master分支，创建一个新的分支，起名为feature_item_recommend： 123$ git checkout -b feature_item_recommendSwitched to a new branch 'feature_i ...

CSS3属性详解：动画详解

发表于 2024-10-21 | 更新于 2024-10-22 | 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属性详解(一)

发表于 2024-10-21 | 更新于 2024-10-24 | css | css

前言我们在上一篇文章中学习了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 透明度，取值范 ...

CSS3选择器详解

发表于 2024-10-21 | 更新于 2024-10-21 | css3

CSS3介绍 CSS3在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。 CSS3的现状浏览器支持程度不够好，有些需要添加私有前缀移动端支持优于PC端不断改进中应用相对广泛应对的策略：渐进增强（1）坚持渐进增强的原则：让低版本浏览器能正常访问页面，高版本的浏览器用户体验更好。【重要】比如说，同样是一个头像，可能在低版本的浏览器中，头像方的；在高版本的浏览器中，头像是圆的。（2）考虑用户群体。（3）遵照产品的方案。参考链接：渐进增强 VS 优雅降级 | 简书渐进增强和优雅降级之间的不同（面试题目）浏览器的版本问题由于CSS3普遍存在兼容性问题，为了避免因兼容性带来的干扰，浏览器的建议版本为： Chrome浏览器 version 46+ Firefox浏览器 firefox 42+ 如何使用手册 CSS参考手册的网址：http://css.doyoe.com/ CSS参考手册的下载链接：http://download.csdn.net/downlo ...

VSCode的使用

发表于 2024-10-21 | 更新于 2024-10-21 | 前端 | 前端

前言 VS Code 本来是前端人员专用，但由于它实在是太好用了，于是，各种开发方向的码农也正在用 VS Code 作为他们的主力编程工具。甚至是一些写作的同学，也把 VS Code 作为 markdown 写作工具。写下这篇文章，是顺势而为。 VS Code 的介绍 VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面，都做的很不错。编辑器与 IDE IDE和编辑器是有区别的： IDE ：对代码会有较好的智能提示，同时侧重于工程项目，对项目的开发、调试工作有较好的图像化界面的支持，因此比较笨重。比如 Eclipse 的定位就是 IDE。编辑器：要相对轻量许多，侧重于文本的编辑。比如 Sublime Text 的定位就是编辑器。再比如 Windows 系统自带的「记事本」就是最简单的编辑器。需要注意的是，VS Code 的定位是编辑器，而非IDE。但 VS Code 又比一般的编辑器的功能要丰富许多。 VS Code的一些补充 VS Code 的使命， ...

让盒子在网页中居中的方法

发表于 2024-10-21 | 更新于 2024-10-21 | css | css

让一个盒子居中的几种方法，通过绝对定位实现，会跟着浏览器窗口的缩放不断调整位置，一直居中 1.通过绝对定位，定位时上边距与左边距都给50%，在利用margin减去当前盒子的一半宽度与高度 123456789.box{ position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px;} 2.通过绝对定位给4个方向都为0；用margin自动，实现居中 12345678910.box { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; margin: auto;} 3.在不知道width、height的情况下，利用transform:translate(-50%, -50%)一样可以做到 12345678.box { ...