标签: 前端

三月结

写在前面三个月没更新了,实在是对不起小胖友们及自己内心的小九九啊。趁着这两天有空,赶紧写一波。 论这三个月我去干嘛了,说实话,是我躲起来了,躲在了一片懒惰的海洋里!本文主要是微微的理顺一下这三个月发生的事情。 国庆 先从国庆前夕开始说起,感觉那几天过得及其快,快到让我忘记了所有的发生的事情,似乎那段时间自己已经没有了情绪,只是在等待国庆的来临。 9月28日晚上,经历了两个小时的等待之后,一个人

CSS3自定义滚动条样式

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

Web Animations API (JS动画利器)

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

定时器(setTimeout)的秘密

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

JS中client/offset/scroll等的宽高解析

window相关宽高属性1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerHeight获取整个浏览器窗口的高度(单位:像素),包括侧边栏(如果存在)、窗口镶边(window chrome)和窗口调正边框。包含调试窗及浏览器边框 window.outerWidth表示整个浏览器窗口的宽度,包括侧边

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/?(注:填这个还是会转到前面那个前缀去的)

CSS3饼状loading效果

写在前面(附录有源码及效果) 之前碰到一个小练习,就是用纯CSS3来写饼状的loading效果,之前着实没有写过这玩意儿,小花完全没头绪,然后参考了张鑫旭老师的CSS3实现鸡蛋饼饼状图loading等待转转转,还有些别的东西,用一种看起来有一点类似但是好像又不一样的方式完成了同样的效果,题目要求的大概就是这个样子: 开始琢磨了一下,睡一觉起来画了个图,理顺了一下,不过感觉此图有点难意会啊啊啊啊