- 博客(68)
- 收藏
- 关注
RSS订阅原创 chrome自制插件--百度搜索结果去广告1.0
chrome自制插件--百度搜索结果去广告1.0一、前言二、效果三、说明四、安装五、下载一、前言国内用户用百度的占绝大多数，但是百度搜索结果的广告真烦人，特别是搜索“黄金”或者“理财”等相关信息，结果发现网页第一版全是所谓的推广链接，而且你会发觉这些链接大部分都是虚假网站，以骗钱为目的，关键这些链接还很难区分开来，要又经验并且仔细看才能区分，百度真无节操，当然你用vpn上google就安逸了。...
2019-10-16 00:26:04
1766
原创 chrome自制插件--简单一键登录（附插件开发介绍）
chrome自制插件--简单一键登录（附插件开发介绍）一、前言二、需求三、文件结构及代码3.1 第一步：建立文件3.2 第二步：修改manifest.json，配置插件3.3 第三步：修改background.js文件，实现想要的功能3.4 第四步：修改contentscripts.js文件，用于自动登录3.5 第五步：chrome加入插件四、GitHub源码五、参考资料一、前言chrome快...
2019-10-15 23:38:49
9059
4
原创 chrome自制插件--动易网站后台一键登录v1.4
动易网站后台一键登录v1.4一、介绍一、介绍上篇《chrome自制插件–简单一键登录（附插件开发介绍）》我介绍了chrome插件开发和后台一键登录简单版，本篇提供功能强大的正式版。注意：本插件针对动易系统后台登录，当然你也可以修改源码，适应你的系统和实际使用情况。1.4版本更新：1、智能识别新旧版本系统，如果识别失败请手动添加记录2、新增“默认帐号”管理功能，在没有配置网站记录的情况下...
2019-10-15 23:38:34
1285
原创 html5调用摄像头并拍照
html5调用摄像头并拍照一、注意二、开始三、在线演示和源码一、注意1、必须在https协议下才，并且允许实用摄像头。2、原本是想在手机上用的，但发现ios手机上不行，安卓的不知道，pc+chrome就可以，待解决。二、开始研究了下用html5+javascript 调用摄像头并拍照，代码参考了网上的，然后做了个小demo。原理主要用到 Vedio + Canvas + getUs...
2019-10-15 21:42:31
2407
1
原创 css3布局方式一：box布局
一、注意注意：box布局是2009提出的，flex布局2012年提出的，二者原理基本一致，flex可以说是box的新语法，但是不能相互替代，而且很关键的一点是二者兼容性不同，box兼容性更好，特别是对于移动端，所以还是有必要学习box布局的。二、开始随着移动端的崛起，现在是多端多分辨率的时代，前端工程师必须考虑页面的自适应。自适应通常大家的反应都是用百分比布局，但局限还是比较多的，最常见的...
2019-10-15 21:13:49
1692
原创 javascript结合css3制作手机菜单左滑特效（附演示地址和源码）
javascript结合css3制作手机菜单左滑特效（附演示地址和源码）一、前言二、在线演示和GitHub源码三、原理说明四、核心代码一、前言现在我们见过很多手机展示菜单的方式是整个页面向左滑动，然后右侧出现菜单，然后点击或者向右滑动左侧页面收起菜单。这种菜单用户体验比较好，现在一些针对手机端框架都包含了这种效果，例如jqm，但我们实际开发的时候往往只需要这一个效果，如果调用整个框架，总感觉有...
2019-10-15 14:39:59
600
原创 基于superslide的文字动画全屏焦点图（附演示地址和源码）
基于superslide的文字动画全屏焦点图一、前言二、在线地址及GitHub源码三、核心代码讲解一、前言对于焦点图，我们平时用superslide已经能实现大部分效果，但有时候想实现些更绚丽的效果，例如现在一些流行的焦点图都有切换图片后几段文字（图片）独立动画出现，这样有视觉差异，动画效果更生动，其实如果你熟悉js，那么在superslide的基础上也可以做出一样的效果。思路就是利用sup...
2019-10-15 13:58:48
681
原创 javascript移动设备触屏画板（附演示地址和源码）
javascript移动设备触屏画板（附演示地址和源码）一、前言二、在线演示和GitHub源码三、示例核心代码一、前言上篇学习了 《javascript移动设备触屏事件及练习》后，我们初步了解了触屏事件。这次我们这基础上打造一款有触摸功能的画板，好让我们的艺术细胞发扬广大。触摸事件我们用到“touchstart、touchmove、touchend”，而画板我们用到html5的“canv...
2019-10-15 12:05:27
619
3
原创 javascript移动设备触屏事件练习（附演示地址和源码）
javascript移动设备触屏事件及练习一、前言二、触摸事件简单介绍三、在线演示和GitHub源码四、示例核心代码一、前言对于写原生js代码或者理解触摸事件原理的人员来说，记录移动端触摸事件的核心内容及写下有实用意义的demo是十分有必要的，本文仅做简单介绍和demo演示，用于日后需要的时候使用。二、触摸事件简单介绍核心是如下几个事件：touchstart - 触摸开始touchen...
2019-10-15 11:45:29
305
原创 jQuery横向/纵向滚屏特效练习（附demo源码）
jQuery横向/纵向滚屏特效练习（附demo源码）一、前言二、效果三、在线演示和源码一、前言横向/纵向滚屏特效现在挺常见的，应用的地方也很多。虽然网上已有相关插件，但个人还是自己做了2个demo，供练习和需要的时候使用，如有兴趣你也可以下载源码来看看。可以鼠标点击/划过导航或者滚轮切换屏幕。二、效果三、在线演示和源码–>在线演示–>GitHub源码...
2019-10-15 11:13:28
326
原创 jQuery百叶窗效果原理（附3个demo源码）
jQuery百叶窗效果原理，附3个demo源码一、前言二、原理图解三、在线演示及源码一、前言对于轮播图切换，其实可以有更多效果，其中一类型就是百叶窗。本人参考了网上一些特效，做一些练习和实践，没有封装函数，考虑扩展到SuperSlide。重点是实现效果的思路，并不是代码，掌握了思路可以扩展无限种效果。二、原理图解三、在线演示及源码效果：–>在线演示地址–>GitHub...
2019-10-15 10:48:34
495
原创 跟我做css3的ppt（Animation介绍&Animate.css应用）
跟我做css3的ppt（Animation介绍&Animate.css应用）一、前言二、Animation 介绍和demo三、Animate.css 介绍四、使用Animate.css做一个ppt一、前言上一篇文章《翻滚吧少年！（自定义css3动画过渡中的贝塞尔曲线）》我简单介绍了css3中transition的使用，和自定义过渡中的贝塞尔曲线，效果已经很好了，但有一个比较明显的缺点就...
2019-10-15 01:09:02
1237
原创 翻滚吧少年！（自定义css3动画过渡中的贝塞尔曲线）
翻滚吧少年！（自定义css3动画过渡中的贝塞尔曲线）一、翻滚吧少年二、背景介绍二、cubic-bezier 贝塞尔曲线介绍四、在线demo和源码一、翻滚吧少年我们先看看本文示例效果：–>在线演示地址以上效果没有应用js，只用到css3的贝塞尔曲线来实现各种缓动效果，是不是心动呢？那么应该怎么使用呢？二、背景介绍随着高级浏览器的普及，css3和html5也开始越来越流行了。现在很...
2019-10-14 23:37:03
778
原创 与时俱进，三栏弹性布局的5种方法（绝对定位、圣杯、双飞翼、flex、grid）
与时俱进，三栏弹性布局的5种方法（绝对定位、圣杯、双飞翼、flex、grid）一、前言二、需求三、具体代码3.1 绝对定位布局3.2 圣杯布局3.3 双飞翼布局3.4 flex布局3.5 grid布局四、总结一、前言本文以实用角度出发，直接列出三栏弹性布局的5种方法：绝对定位、圣杯、双飞翼、flex、grid 的具体代码，并简要分析其原理和优缺点。二、需求需求：用css实现三栏布局，htm...
2019-10-14 22:26:22
705
原创 setTimeout、promise、async/await 实例代码对比及图解
setTimeout、promise、async/await 实例代码对比及图解一、前言二、实例代码2.1 setTimeout代码2.2 promise代码2.3 async/await 代码三、执行效果四、执行过程图解4.1 promise图解4.2 async/await 图解五、总结一、前言setTimeout、promise、async/await 都是js的异步机制，对于三者的原理...
2019-10-13 23:47:02
309
原创 nodejs入门使用介绍（附3个实用基础demo）
nodejs入门使用介绍（附3个实用基础demo）一、什么是node.js二、node.js特点三、node.js 异步、事件驱动模型四、node.js安装和配置五、实例一（HelloWorld）六、实例二（简单爬虫）一、什么是node.jsNode.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动，...
2019-10-13 20:58:41
5083
原创 老板，今年有哪些大众好电影？（nodejs豆瓣电影爬虫）
老板，今年有哪些大众好电影？（nodejs豆瓣电影爬虫）前言目标页面分析设计思路效果演示GitHub 和源码前言现在看电影通常都会看豆瓣评分，虽然豆瓣本身有筛选功能，但是缺乏了一个重要元素：评分人数。想看好电影，通常是按评分排序，这时候会有好几十个评分9+的电影，但是点击查看发现评分人数寥寥无几，这些就缺乏参考价值了，通常只是少数人的狂欢，意义不大。所以必须综合考虑，加上评分人数，最少上w吧...
2019-10-13 16:24:19
749
3
原创 VsCode SFTP插件详细使用介绍
VsCode SFTP插件使用介绍一、前言二、SFTP安装三、SFTP原理四、SFTP配置4.1 常用配置4.2 示例配置五、SFTP使用六、结语一、前言前端开发少不了ftp修改文件的情况，通常我们都会用 FlashFXP 等软件来上传或下载网站文件，但如果我需要进行网站编码开发的时候，那么使用编辑器软件来上传文件就方便多了。这次我介绍用 VsCode 的 SFTP插件来同步网站文件。ps...
2019-10-11 16:05:39
67934
14
原创 iconfont 多色图标使用介绍
iconfont 多色图标使用介绍前言一、多色文字图标特点二、多色文字图标使用方式三、修改颜色结语前言阿里巴巴矢量图标库 http://iconfont.cn 已经推出多色图标很久了，那么究竟如何使用呢？一开始我以为和普通文字图标无区别，但实际使用的时候发现并不是。多色文字图标其实是用svg做的，需要引用js才能正确使用，优缺点也比较明显，但是这种方式是符合未来发展方向的，值得推荐使用的。...
2019-10-11 10:04:31
5610
原创 手机远程控制电脑方法（TeamViewer vs 向日葵）
手机远程控制电脑方法（TeamViewer vs 向日葵）前言使用TeamViewer使用 “向日葵远程控制”软件最后前言总有些情况下不方便直接使用电脑，但又要用到电脑，例如，我想躺在床上撸代码，这时候就需要“手机远程控制电脑”了。网上搜了一下资料，目前总结了2种方法，都是用到软件。1、是用“TeamViewer”软件(适合临时使用，最近开始收费了，韭菜割起来)2、是用“向日葵远程控制”...
2019-10-10 23:41:20
5610
1
原创 提高前端生产效率（PxCook工具推荐）
提高前端生产效率（PxCook工具推荐）软件介绍软件布局说明设计模式开发模式总结软件介绍这次介绍一个适合设计和前端的软件 PxCook软件官网：https://www.fancynode.com.cn/pxcook软件主要用于设计图标注说明，通常来说是设计师标注后给前端人事使用的，但就我们公司来说，目前没有这个步骤，现在是前端人员直接在ps里面查看设计图个元素的尺寸，但多年实践经验来说，是...
2019-10-10 22:31:30
4892
4
原创 前端动画性能比较（js动画{ translate vs left/top } vs css动画）
前言js动画{ translate vs left/top }js动画vs css动画
2019-10-10 21:41:50
1670
原创 webpack学习和使用二（常用配置）
webpack学习和使用二一、自动打包+热更新1、简单化指令2、自动打包3、热更新接着上一篇“webpack学习和使用一（安装使用和简单demo）”我们继续设置一些webpack的常用配置一、自动打包+热更新1、简单化指令现在我们执行 npx webpack 后是不是有一串黄色的警告提示？WARNING in configurationThe 'mode' option has not...
2019-09-24 19:44:56
286
原创 从chrome开发工具中直观了解浏览器的渲染过程
文章目录前言浏览器渲染过程浏览器渲染步骤重排重绘解析实例演示只修改背景色只修改宽度总结前言前端人员可能不太了解浏览器渲染Html的过程，或者了解相关知识，但是不能通过具体的方式来更深入认识。本文通过Chrome的开发者工具来直观了解浏览器渲染html的过程，能对于页面性能优化有更好的帮助。浏览器渲染过程我们先看一张图解：我们看到Html和Css先是分开解析，然后合在一起生成Rend...
2019-09-24 17:26:31
1877
原创 傻瓜式搭建多人协作vue工作环境（GitHub Desktop + VSCode + Webpack + Vue）
你遇到的问题是不是被一堆git命令搞到晕？是不是在cmd打命令再切换到编辑器写代码，麻烦得一b？是不是装webpack踩到各种坑？是不是不知道怎么配合webpack写一个vue的hello world？是不是不知道怎么把写好的代码同步GitHub代码？来来来，这里用一篇文章介绍怎样搭建一个傻瓜式多人协作的vue工作环境，利用VSCode这神器，把一切都简单化。（笔者也是踩过各种坑啊...
2019-09-21 17:46:20
2085
原创 web模拟战旗游戏战场（附演示地址&源码）
前言本人从小受到“火焰纹章”、“机器人大战”等熏陶，比较喜欢策略型游戏，但有时候玩人家的游戏总有点不尽人意，于是尝试模拟这类型游戏。本次尝试用web技术实现战旗游戏中战场的游戏逻辑。先放成果：在线地址游戏逻辑战旗游戏逻辑比较简单：一、总方向单位：我方 vs 敌方操作：移动+行动结束条件：一方团灭二、实现细节地图：底图 + 操作层 + 单位层单位放置：随机地图 + 随机单位属...
2019-09-18 17:27:33
673
原创 js继承最实用的2种方式：Es5对比Es6，学会这2种可以解放人生了
前言js 的继承老生常谈了，网上也总结了很多继承方法，有原型继承、原型链继承、寄生继承、构造函数继承、组合继承等，各种方法各有利弊，现在ES6提出了新的继承机制，完美摆平了这乱七八糟的局面，但是ES6还没能兼容所有浏览器，所以笔者分别用ES5和ES6写出2种完整继承的方法，学会这2个即可。实例代码具体看代码和注释，不明的地方百度即可，可以把代码拷贝到本地运行，看效果： //ES5组合继承...
2019-09-18 16:15:40
254
原创 webpack学习和使用一（安装使用和简单demo）
webpack学习和使用一一、webpack是什么二、webpack能干什么三、webpack安装1、我们先建立一个项目文件夹\webpackDemo2、初始化npm3、安装webpack4、安装webpack-cli （webpack命令行界面，安装了才可以执行wepack命令）四、webpack使用1、先建立我们实际工作用到的文件，dist用于存放打包后的文件，src用于存放是开发环境时的代码...
2019-08-29 10:39:20
327
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人