分类: Web开发

Babel初体验

写在前面现在es6很流行,尽管各大浏览器都还不能支持它的新特性,但是小伙伴们还是很中意它呀,于是小小的学习的一下 Babel这里我们不介绍es6相关内容,只是说下入坑前奏,记录下如何使用babel来对es6进行转码~ 1.准备一个项目(文件夹) 进入到你的项目根目录下,使用下面命令初始化生成一个package.json文件1npm init 2.安装babel使用下面命令安装全局babel-cl

CSS3自定义滚动条样式

写在前面滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦。但是,也只能玩玩,因为只针对webkit内核的浏览器啊啊啊啊啊! overflow介绍定义:overflow 属性指定当它溢出其块级容器时,是否剪辑内容,渲染滚动条或显示内容。 属性值12345overflow:visible //默认值。内容

Web Animations API (JS动画利器)

写在前面之前学习了CSS animation/setTimeout/setInterval/requestAnimationFrame等,这些都可以用在某种场景下的小动画,也可以说是动效。CSS动画君居然强大,但是缺陷也很多啊,有的时候没法满足要求,定时器用在动画中就更不使用了,但是requestAnimationFrame也是个很强大的东西,具体详情移步到window.requestAnima

Hexo博客添加SEO-评论系统-阅读统计-站长统计

交流群有相关问题的可进群提问,Hexo交流群:111868326 (其他的前端问题也可以交流) 写在前面在五月出捣腾了一把个人博客,但是刚开始只做了一些基础设置,套路也没摸清,基础安装篇请看hexo从零开始到搭建完整,里面讲到了基础工具的安装及blog项目的文件夹含义,以及RSS添加、域名的绑定等操作,后来想着加点功能,但是奈何我选的主题集成的东西比较少,需要一步一步自己添加,于是摸索了一番。。

定时器(setTimeout)的秘密

写在前面setTimeout()是大家再熟悉不过的定时器,但平时对定时器的了解甚少,于是想看看setTimeout()的原理机制。 setTimeout()基础setTimeout()函数用来指定某个函数或某段代码,在多少毫秒之后执行。它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。1var timeer = setTimeout(function|code,delay); 注:其

拖放API中的drag和drop实战

写在前面在HTML5之前,实现拖放功能需要借助mousedown/mousemove/mouseover/mouseout/mouseup等鼠标事件来完成,HTML5中拖放API的出现使很多事情变简单。下面是做笔记做笔记~ 源码地址 栗子预览1 栗子预览2 栗子预览3 拖放过程拖放:包括拖拽(drag)和释放(drop) 拖放中涉及两个元素,分别是:源对象和目标对象,如下图源对象是被拖拽的元

css实现鼠标悬浮字体流光背景模糊效果

写在前面有的时候感觉写点小玩意儿挺开心的,还能实践很多的小知识点,所以这次学着写了个有趣的鼠标悬浮模糊效果,只使用了css额。 效果图 源码地址→传送门 预览地址→传送门 小知识点filter: blur(npx); 这个过滤器用来将图片模糊,但是兼容性不太好,n代表模糊度,值越大越模糊。 background-clip: text; background-clip是用于背景图片的裁剪,决定背景

原生JS实现省市区(县)三级联动选择

写在前面前段时间写一个关于天气的东西,里面的省市区(县)城市选择让我很头疼,在网上搜索出来大都是借助插件或者第三方库,感觉这样做代码会很重,所以索性就把几种城市选择的方式实现一遍,以备日后的不时之需。这三种方法都是针对pc端的,并且都是使用原生js实现的,连jq都没使用,于是代码有点繁琐额(尴尬)。。。。不过还是让我把原理讲完吧。 源代码地址→传送门 预览地址→传送门 方法一:下拉选择框实现省市

select表单元素详解及下拉列表模拟实现

写在前面select 是HTML表单元素中很常用的一个,其中很重要的几个属性常被忽略,但这几个属性却能帮助我们完成很多的功能,当然,select下拉列表默认样式很不友好,所以更多的时候可以自己模拟实现一个同样功能的下拉菜单。下文先介绍select标签的一些属性及使用,后面再模拟一个相同效果的下拉菜单。 介绍之前先看下demo预览图: 1.firefox下select的默认样式: 2.chrom

预览github项目的html文件新方法

写在前面关于如何在线预览github中的html文件,其实这是一个很多人知道的东西,但是查资料的时候呢总是找不到正确的答案,并且一开始我也是踩了坑的。 踩坑经历搜出来的结果大概就两种: 第一种是在你打开的源码地址的url地址基础上加http://htmlpreview.github.io/?或者http://htmlpreview.github.com/?(注:填这个还是会转到前面那个前缀去的)