自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(28)
  • 资源 (2)
  • 收藏
  • 关注

原创 纯CSS实现轮播图

本文通过CSS实现可悬停的轮播图效果,不需要js进行复杂的位置计算。为小伙伴们提供一种轮播图的实现思路。

2022-08-20 15:04:36 1966 1

原创 监听DIV元素尺寸变化

web开发过程中为了更好的实现元素自适应效果,往往需要监听DIV的尺寸变化。而DIV元素不像window对象,是没有resize事件的,我们无法直接监听DIV的resize事件。因此在需要对DIV元素进行监听时,需要采用一些特定方法完成size的监听。...

2022-08-18 18:38:57 5412

原创 利用SVG滤镜实现水波倒影效果

SVG滤镜实现水波效果

2022-08-17 08:51:59 617

原创 借助uni-app撸了个证件照小程序

借助于uni-app撸了个证件照小程序,主要用到了canvas的绘图功能,不得不说uni-app的云函数机制相当不错,直接省去了租服务器的费用,双手点个赞!!小程序支持g预览版

2021-05-28 09:32:07 1030 3

原创 git地理位置信息系统

git地理位置信息系统最近调研了一下gis系统的开发方式,发现bigmap这个插件相对来说还是挺好用的。这是官网的介绍:IGEMAP集合了谷歌地图、百度地图、高德地图、OpenStreet等50多种国内外优质的地图资源,主要包括卫星地图、电子地图、地形图等。同时我们也提供了全球矢量地图数据下载、设计。还包括海图、地质图、2.5D地图、地表覆盖以及人口、景观、植被等各种专题地图。资源确实很丰富,样例也挺不错,缺陷就是开发文档写的相当不友好。。。这次调研的需求还是很简单的,显示行政区域,显示迁移特显

2021-05-26 11:00:31 353

原创 bat脚本批量启动程序

每天上班第一件事就是开机,启动各种程序,需要手动点击很多次才能进行手头上的工作。这种无脑无意义的事为啥不让脚本干呢,于是就想写个bat脚本,每天开机后双击脚本,自动启动n个程序。1.首先,新建个txt空白文件,修改后缀为.bat2 .编辑start.bat文件格式为 : start + 空格 + 引号 +空格+ 程序目录程序目录可以在程序的属性,目标中复制过来,直接粘贴...

2019-12-18 10:54:29 13213 3

原创 ES6的兼容方法

JavaScript的迅速演变给Js开发者带来了更多的便利,同时也遇到了问题。对于Js开发者来说,我们非常想要使用这些新特性,但同时又被担心旧版浏览器不支持新版本特性,比如IE浏览器。是否要等到所有浏览器都支持新版本特性之后才开始在代码中使用这些新的API和语法呢,所有负责语言发展的人士都希望,新的特性和模式一旦在标准中稳定下来,并且浏览器能够实现他们之后,就能够在开发者的代码中得到应用。怎么...

2019-10-25 10:35:57 1033

转载 Webpack性能优化

Webpack是现在主流的功能强大的模块化打包工具,在使用Webpack时,如果不注意性能优化,有非常大的可能会产生性能问题,性能问题主要分为开发时打包构建速度慢、开发调试时的重复性工作、以及输出文件质量不高等,因此性能优化也主要从这些方面来分析。本文主要是根据自己的理解对《深入浅出Webpack》这本书进行总结,涵盖了大部分的优化方法,可以作为Webpack性能优化时的参考和检查清单。基于Web...

2019-08-27 11:07:12 3816

原创 IE浏览器动画中使用calc计算方法不生效的坑

最近在写一个动画效果时,在动画中利用calc去计算元素的移动距离,在火狐和谷歌chrome下运动正常,效果很简单:示例代码如下:<div id='moveDiv'> </div> <style> body{ background-color:black; } #moveDiv{ width:30px; heig...

2019-05-24 15:16:16 3813 2

原创 无延迟css换肤方案

要实现前端换肤,大部分程序猿的思路无外乎下面两种:1.通过全局class名称,切换全局类名称实现换肤;2.通过js更改link标签的href进行加载不同的css文件。但是,方法1的方案比较繁琐,全局class控制样式会提高全局样式优先级,如果换肤样式很多,代码会非常啰嗦,不利于维护;方法2通过js更改href时,会重新下载href指向的css文件,多个文件会有延迟,导致样式有个过度状态...

2019-04-04 15:53:33 1049

原创 vue可视化组件

vue开发的可视化组件,包含柱状图组件,圆形进度条组件:使用方式:NPM下载安装vue-charts-jfnpm install vue-charts-jf --saveimport vueChart from 'vue-charts-jf'Vue.use(vueChart);github地址:https://github.com/jianfeng418/vue-charts...

2019-03-20 16:30:19 9252

原创 Vue编写的树形tree组件

近期在进行vue的学习,自研的vue项目需要一个tree组件。由于在学习阶段,不想‘拿来主义’,拿别人写好的组件使用,对于处于学习阶段的开发者来说不是一件好事,虽然拿别人开发好的东西过来用可以快速进行业务开发,但阻绝了学习者锻炼自身开发技能的机会。‘拿来主义’的学习方式,与其说是学习一门语言,不如说是学习一种成熟组件的使用方式。自己动手写一写还是非常有利于自身水平提升的。于是,开始动手自己写vue...

2019-02-21 10:50:46 43932 14

原创 vue-menu菜单 从开发到npm包发布

最近在开发vue项目,其中一些组件采用自研的方式开发,在这里对于一些通用性较强的组件进行一些总结,本文记录一下vue-menu菜单组件的开发过程和npm包发布过程。一、组件的开发1、需求分析组件需要的功能:(1)点击或者鼠标hover某一元素后弹出下拉菜单;(2)下拉菜单项具备点击功能;(3)下拉项可以置灰,点击无效;(4)可以为下拉菜单添加自定义的类;2、创建项目...

2019-01-07 17:46:25 4042

原创 vue实现easyui-layout的伸缩拖拽功能

最近在做一个vue项目,需要一个类似于easyui-layout的伸缩功能,要求可伸缩并且可拖拽,由于vue也提供了过度和动画的特性,决定利用vue提供的过渡特性自己动手写一个实现。Vue官网对于transition组件的解释:Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展...

2018-12-17 14:10:52 4206

原创 解决vue路由跳转未匹配路径时出现空白页的问题

在进行vue项目开发时,常用vue-router进行路由的导航,这种方式可以很好的进行路由和组件的匹配,但是当用户手动更改为未进行匹配的url时,系统找不到响应的组件进行页面渲染,就会出现空白页面。这种用户体验并不好,下面总结解决该问题的方法。1.导航守卫可以使用 router.beforeEach 注册一个全局前置守卫:const router = new VueRouter({ ...

2018-11-19 09:01:11 19751 4

原创 几种CSS实现元素垂直居中的方式

    最近在项目中又用到了元素的垂直居中,在这里整理总结一下可以实现元素垂直居中的几种方法。    方法1:    利用line-height实现单行元素的垂直居中。                                                                     实现方法:将行内文本的line-height设置为父级元素的高度:&...

2018-11-01 14:18:54 1600

原创 JS惰性载入函数

函数的惰性载入,在Js中很常见的一种编码现象。由于各大浏览器的差异,我们在实现一项功能的时候需要考虑不同浏览器之间的兼容性问题,因此需要进行浏览器嗅探。最常用的嗅探方法就是通过if else的方式判断当前环境是否支持某一对象。例如,使用原生js创建XHR对象:function createXHR(){ if(typeof XMLHttpRequest != 'undefine...

2018-10-25 09:54:50 765

原创 JS中的几种循环和跳出方式

JS中的循环是大家很常用的,这里总结一下几种常用循环的跳出方式。1.for循环var arr = ['q','w','e','r','t'];for(var i=0, len = arr.length ; i< len ; i++){ console.log(arr[i]); }// q , w , e , r , t跳出本次循环continue:f...

2018-09-27 11:34:03 48644 5

原创 JavaScript中的构造函数的作用域安全

在JS中,构造函数其实就是一个使用new操作符调用的函数,和普通函数的区别是函数名的首字母大写(不是强制规定)。当使用new调用时,构造函数内用到的this对象会指向新创建的对象实例:function Person(name,age,job){ this.name = name; this.age = age; this.job = job;}var perso...

2018-08-31 11:28:36 573

转载 深入浅出 JavaScript 关键词 -- this

原文地址:Mastering JavaScript this Keyword – Detailed Guide 原文作者:Jay 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:老教授 校对者:allen、dz要说 JavaScript 这门语言最容易让人困惑的知识点,this 关键词肯定算一个。JavaScript 语言面世多年,一直...

2018-08-21 10:16:18 205

原创 H5的Audio API音频

h5出现之前,要进行Web音频的展示,往往需要在浏览器加载flash等插件,h5中新增的<audio>标签允许用户进行一些基本的音频流操作,但是对于一些复杂的音频处理应用,其功能远远不能满足需求,而h5中提供的Audio API就派上了用场。H5的Web Audio API很强大,我们可以利用它去创建各种音频,甚至可以创建一段完整的音乐。在进行一些网站建设时,我们前端攻城狮可以摆脱网上...

2018-08-20 16:49:34 3923

原创 理解JavaScript的原型对象

在JavaScript中,只要创建一个新函数,系统都会为该函数自动创建一个prototype属性,这个属性是一个指针,指向函数的原型对象。看下面的代码:创建了一个空函数Person,打印Person后,可以看到有个prototype属性,它指向一个对象:这个对象就是传说中的原型对象,其中的constructor(构造函数)属性也是默认添加的,这个属性包含一个指向pr...

2018-08-06 10:44:39 175

原创 优化CSS选择符

CSS选择符对性能的影响源于浏览器匹配选择符和文档元素时所消耗的时间,前端攻城狮们可以通过编写更高效的选择符来控制匹配耗时,实现高效率选择符首先要理解选择符是如何匹配的。1 CSS匹配规则:最右边优先 看下面这条规则: #toc > li { font-weight:bold; }对于我们大多数有从左到右阅读习惯的人,可能自...

2018-07-27 10:29:24 623

原创 认识JavaScript的作用域

         当执行JavaScript代码时,JavaScript引擎会创建一个执行上下文(Execution Context)。执行上下文(作用域)设定了代码执行时所处的环境。JavaScript引擎会在页面加载后创建一个全局的执行上下文,然后每执行一个函数时都会创建一个对应的执行上下文,最终建立一个执行上下文的堆栈,当前起作用的执行上下文在堆栈的最顶部。         每个执行上下...

2018-07-25 11:00:37 191

原创 编写高效JavaScript

当今的Web应用程序都是由大量的JavaScript代码驱动。每次用户在界面上操作时,都要执行成千上万行的Js代码。因此,关注性能,不仅要关注页面的加载时间,也要关注在页面上操作时的响应速度。要实现快速而友好的用户界面,最好的办法就是编写的JavaScript代码能在浏览器中高效的运行。 在编写代码的过程中,如果多注意一下自己的代码质量,就可以得到更流畅的用户体验。身...

2018-07-25 09:38:47 605

原创 js函数柯里化

什么是函数柯里化?        在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。这个技术由 Christopher Strachey 以逻辑学家 Haskell Curry 命名的,尽管它是 Moses Schnfinkel 和 Gottlob Frege 发明的。       ...

2018-07-05 17:55:02 1173

原创 函数节流和函数防抖

写在前面 在前端开发中,我们知道对于DOM的频繁操作是非常消耗资源的,尤其是对于浏览器的onresize,onscroll事件进行响应去操作DOM元素的时候,有时候会看到浏览器卡顿,用户体验非常不好。但是我们又要监听浏览器的onresize,onscroll事件,这时候函数节流(throttle)和函数防抖(debounce)就发挥作用了。函数节流原理 对于连续触发的事件,...

2018-06-14 17:23:09 1074

原创 斐波那契数列的几种js实现

斐波那契指的是这样一个数列:1、1、2、3、5、8、13、21、34......在数学上,斐波纳契数列以如下被以递归的方法定义:F(1)=1,F(2)=1, F(n)=F(n-1)+F(n-2)(n>=2,n∈N*);随着数列项数的增加,前一项与后一项之比越来越逼近黄金分割的数值0.6180339887..…问题来了,怎样用代码实现一个斐波那契数列呢?下面是一些方法的总结;方...

2018-05-31 18:03:49 23846 2

2013年职称英语考试理工类B级试题及答案

2013年英语职称考试真题以及答案分析理工类B(包含答案与解析)

2018-10-29

精通CSS:高级Web标准解决方案(第2版)中文扫描

精通CSS:高级Web标准解决方案(第二版)。Amazon第一CSS畅销书全新改版; 令人叫绝的CSS技术汇总; 涵盖CSS3和HTML5技术

2018-10-16

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除