- 博客(27)
- 收藏
- 关注
RSS订阅原创 ios系统下h264编码的mp4文件无法播放的问题
H.264中有profile（画质级别）和level（用来约束分辨率、帧率和码率）的概念，profile有四种，分别是Baseline Profile（基本画质）、Extended profile（进阶画质）、Main profile（主流画质）和High profile（高级画质），level一般用数字表示，Level越高，视频的码率、分辨率、fps越高。我们可以通过potplayer等播放软件，查看对应的mp4文件的压缩级别，如果压缩级别高于苹果能支持的压缩级别，则会出现ios下无法播放的问题。
2023-03-22 18:24:44
4097
原创 粘性布局实现慢滚动demo
1、粘性元素的父元素或者父元素的父元素等（总之就是直系长辈元素）任意一个设置overflow:hidden;的任意一种时，就会不生效。2、父元素的高度小于设置sticky元素的高度时，sticky也失效。
2022-09-22 13:27:04
227
原创 Git常用命令大全
总结：Git命令不仅仅是以上这些，要深究的话还有很多很多，并且每一条命令还有多种搭配使用的选项，每种选项搭配都代表着不同的作用，需要用到的时候可以再研究学习，以上命令参考自https://git-scm.com/book/zh/v2/ 前三章。// 查看xxx在xxxx年xx月期间， 除了合并提交之外的哪一个提交修改了files文件。// 查看近n次提交，并显示显示每次提交所引入的差异。// 启动编辑器，可以修改之前的提交信息。// 跳过git add步骤，直接提交。............
2022-08-18 15:22:19
1372
原创 css自定义字体
通常我们字体定义是这样定义的，但是为什么需要多种格式的字体文件？为什么要写两个src?为什么。eto后面需要加?#iefix？总的来说，都是为了兼容各大浏览器！@font-face { font-family: 'fontTest'; src: url(xxx.eot); src: url(xxx.eot?#iefix) format("embedded-opentype"), url("xxx.woff") format("woff"), url("xxx.t...
2022-03-10 12:23:29
2128
原创 ScrollMagic帧动画Demo
用的图片是top-down排列的精灵长图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ScrollMagic-GSAP</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.
2022-01-25 17:06:32
967
原创 监听多张图片加载完成
1、递归监听多张图片，确保所有图片都已加载完成var indexObj = (function () { return { init: function () { var that = this; // kv加载 that.kvSlide = $('.kv-swiper .swiper-slide') that.srcList = [] that.srcIndex = 0 that.propName = 'pc-p.
2022-01-25 15:19:15
2036
原创 a标签下载图片
a标签能用做下载图片功能，主要是标签有download属性，加上download后会指示浏览器下载而不是导航。但是这个属性是HTML5属性，仅兼容版本较高的浏览器，兼容性如下：可以看到，download属性完全不兼容ie的，所以要单独做ie的兼容<a href="../imgs/spider-man/swiper/1.jpg" download="1.jpg" class="downBtn">下载<img src="../imgs/spider-man/download.pn
2022-01-24 11:56:57
5390
1
原创 ffmpeg安装教程
官网：FFmpeg1、下载ffmpeg安装包到ffmpeg官网下载安装包Download FFmpeg，这里以windows为例2、解压文件进入bin目录，可以看到这三个文件3、设置环境变量点击“系统属性->高级系统设置->环境变量->系统变量”，选择“Path”条目，点击“编辑->新建”，把第一步的bin文件夹路径复制粘贴进去，然后点击确定即可。4、测试是否安装成功按win + R打开运行，输入cmd打开命令运行...
2021-12-17 17:23:50
61529
12
原创 帧动画背景，适配各种屏幕
帧动画实现方式大致分为三种，下面的css3动画和js动画的图片均使用雪碧图（我使用的雪碧图布局方式是top-down，无边距）实现，雪碧图生成方法可参考使用Grunt生成雪碧图_HYEHYEHYE的博客-CSDN博客一、Gif图这个方式是最简单快捷的，适合做一些比较简单、色彩单一的动画。因为画质上，gif 支持颜色少(最大256色)、Alpha 透明度支持差，图像锯齿毛边比较严重；交互上，不能直接控制播放、暂停、播放次数，灵活性差；性能上，gif 会引起页面周期性的绘画，性能较差。二
2021-11-26 14:46:02
438
原创 使用Grunt生成雪碧图
1、Grunt是基于 Node.js 的项目构建工具，所以使用Grunt之前必须先安装好node.js和npm包管理器2、全局安装Grunt的命令行支持，安装完之后，命令提示符中将会识别grunt命令npm install -g grunt-cli3、cd到项目目录下，使用npm init初始化项目（项目名称不要使用中文）npm init执行npm init命令，如不需做特殊配置，一直按enter键即可，直到执行完跳出，执行完之后会自动生成一个pakeage.json文件 。（如项目
2021-11-25 17:19:20
450
原创 css写的三角箭头
实心三角箭头：i{ display: block; width: 0; height: 0; position: relative; border-color: transparent transparent transparent #000; border-style: solid; border-width: 7px 0px 7px 9px;}效果图：空心三角箭头：i{ display: block; ..
2021-11-16 17:30:18
1668
原创 TweenMax逐帧动画
分享一个网上看到的TweenMax逐帧动画小demo地址：http://contactu.cn/2015/test_frame/<html lang="en"><head> <meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"> <title>测试逐帧动画</title> <script s
2021-11-15 16:47:40
770
原创 ScrollMagic结合TweenMax的Demo
ScrollMagic是一款可以把滚动条当进度条用的jquery插件，ScrollMagic + GSAP的组合可以制作炫酷动画，TweenMax是GSAP中功能最全的一个库<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ScrollMagic-GSAP</title> <script src="https
2021-11-15 11:11:01
698
原创 .gitignore文件的格式规范
在.gitignore文件中：1. 所有空行或者以#开头的行都会被 Git 忽略。例：# .gitignore文件中的注释# 无论哥多少空行，都会被忽略2.可以使用标准的 glob 模式匹配，它会递归地应用在整个工作区中。（glob 模式是指 shell 所使用的简化了的正则表达式）。例：# 忽略所有的 .a 文件，*匹配零个或多个任意字符*.a# 忽略文件名为cat.a,bat.a,Cat.a,Bat.a等文件，?匹配任意一个字符?at.a# 忽略文件名为C...
2021-10-20 11:16:37
941
原创 微信小程序中new Date()转换时间格式时，IOS不兼容的问题
平常我们获取某一个指定时间的时间戳时，都是这样获取new Date('2021-10-1100:00:00').getTime()但是，2021-10-11这种时间格式在ios微信小程序中并不支持，ios只支持2021/10/11这种格式，而android则两种格式都支持，所以换成这种写法就可以了new Date('2021/10/1100:00:00').getTime() 另外，"2021-10-11"转"2021/10/11"可以这...
2021-10-11 15:46:33
1221
原创 知识点整合：js根据场景所需返回值，选择合适的遍历函数
some：array.some(function(currentValue,index,arr),thisValue)检测数组中的数据，如果有一项为真就返后true，否则返回falseevery：array.some(function(currentValue,index,arr),thisValue)检测数组中是否满足要求，会依次执行数组中每一个元素，如果每一个满足条件就返回true，否则返回false；注意：如果是空数组，返回值也为truefind：array.find(functi
2021-09-30 17:17:16
198
转载 npm install 是否会更新package-lock.json
npm 并不是一开始就是按照现有这种规则制定的。5.0.x 版本：不管 package.json 中依赖是否有更新，npm install 都会根据 package-lock.json 下载。针对这种安装策略，有人提出了这个 issue[6] ，然后就演变成了 5.1.0 版本后的规则。5.1.0 版本后：当 package.json 中的依赖项有新版本时，npm install 会无视 package-lock.json 去下载新版本的依赖项并且更新 package-lock.json。针
2021-09-23 10:49:11
1933
原创 PS中字间距VA单位的解释
VA的单位是em*1000为什么是*1000呢，因为EM的值一般比较小，不便于看，所以就以*1000的形式显示出来举例：假设当前字体大小为28px，VA值为100，计算间距的像素值， 此时，1em = 28px 那么，字间距 = 100 / 1000*em =0.1em = 0.1*28px = 2.8px...
2021-09-17 15:35:52
2067
转载 CSS动画开启硬件加速
（一）前言在需要高频交互的css动画时候，我们就需要考虑使用CSS3 硬件加速。首先，CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 进行渲染，减少 CPU 操作的一种优化方案。由于 GPU 中的 transform 等 CSS属性不会触发 repaint，所以能大大提高网页的性能。现在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。（
2021-08-16 12:02:16
2352
原创 vs code使用Easy Sass插件编译sass文件路径报错问题解决
问题：scss文件中使用了@import来引入另一个scss文件，两个scss文件不在同一层级，所以我使用相对路径的写法来引用文件，但是使用vs code里面安装的扩展Easy Sass进行编译时，终端报错但其实这个文件是存在的，并且相对路径的写法是没有错的，而且之前用过其他编译工具（koala）编译过也没有问题，那我就考虑到会不会是Easy Sass不能识别@import相对路径，我尝试把page-common.scss放到和about-honor.scss同目录下，再次编译是可以成功的。..
2021-07-20 17:46:29
1713
1
原创 vue自定义网页标签图标不生效的原因和解决办法
正常情况下，自定义网页标签图标我们只需要更换下图中的favicon.ico即可，但是最近做项目遇到直接替换favicon.ico有不生效的问题用.jpg或.png格式制作成.ico图标的网站有很多，这里推荐一个比特虫：https://www.bitbug.net/发现问题原因后来发现项目使用了@vue/cli-plugin-pwa插件https://www.npmjs.com/package/@vue/cli-plugin-pwa打开上面链接后可以看到插件更改了网页标签图标的路径
2021-07-19 18:00:43
5885
1
原创 vue中watch的使用写法
watch的使用写法大致两种：第一种：直接写一个监听处理函数，值是函数watch: { cityName(newName, oldName) { // 直接书写函数就能为对象添加属性方法，函数名将被用作方法名,这里不能用箭头函数，因为箭头函数是匿名函数 // ... }} 或watch: { cityName: 'nameChange' //nameChange是定义在methods里的函数名}或watch: { cityName:
2021-07-14 17:32:49
3820
原创 vs code中的Easy Sass插件配置项说明
1、找到settings.json文件文件 => 首选项 => 设置 => settings.json全局配置文件2、配置项"easysass.compileAfterSave": true, // 保存scss/sass文件后自动编译"easysass.excludeRegex": "", // 提供文件名正则表达式，匹配到的文件会被排除，不会编译为css，默认为空，则功能关闭"easysass.formats": [ { "format":
2021-07-06 16:12:52
2149
原创 iOS 字体pt和px的转换
px就是表示pixel，像素，是屏幕上显示数据的最基本的点；pt就是point，英文音译为“磅因”，中文读作“点”，是排版印刷中常用的文字大小单位。iOS中，单位是pt。日常工作中，美工给我们的UI图，单位是px。pt： iOS中的字号单位，1pt = 1/72 英寸。px： 美工给的字体像素大小DPI : 每英寸的像素数...
2021-07-01 12:22:59
2641
原创 Vue中阻止checkBox事件冒泡
记录一个小note:@click.stop.native="()=>{}"<el-checkbox-group v-model="checkList"> <div class="li" :class="item.checked ? 'active' : ''" v-for="(item,index) in scrollList" :key="item.title" @click="changeCheckbox(item,index)"> <spa
2021-06-30 17:29:20
2561
1
原创 vue-cli3创建的项目中使用Echarts
vue-echarts使用的坑因为最近需要在vue项目中使用过Echarts，我在网上浏览过很多在vue项目中使用过Echarts的文章，很多文章都建议使用vue-Echarts，但是我发现在项目中引入vue-Echarts时项目编译总是报错，如下：引入方式一：import ECharts from 'vue-echarts/components/ECharts'报错：引入方式二：importechartsfrom'vue-echarts'报错：按提示npm i...
2021-06-30 16:50:52
322
转载 npm install安装的四种用法-save和-save-dev
npm install xxx：安装项目到项目目录下，不会将模块依赖写入devDependencies或dependencies。npm install -g xxx:-g的意思是将模块安装到全局，不是安装到当前目录的项目下npm install -save xxx:-save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。npm install -save-dev xxx:-save-dev的意思是将模块安装到项目目录下，并在package文件的
2021-06-28 18:00:36
12779
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人