主页

2017
0
前端

曲面阴影

讲了几次js的东西，换换口味了，讲讲css的东西吧，其实css写好了是非常有意思的，一些css的特效看起来非常炫酷，且流畅度要比js好得多。一件好的作品，不仅要好用，还要带给用户视觉上以美的享受，许多东西把细微的东西做得好一些，能有非常棒的体验。说是曲面阴影，其实应该还要加上翘边阴影的，这两个实现方法其实都差不多，都是用css的伪元素来实现的，说到:after和:before，其实css3中许多东

0
前端

瀑布流小实例

网站备案终于下来了，等了十几天，不容易呀，顺便搞了个免费的https证书，把评论也换成畅言的了，来必力太挫了，ui看见想打人系列。瀑布流，又称瀑布流式布局。其特点是随着页面滚动条向下滚动，不断加载数据块并附加至当前尾部。从Pinterest开始兴起，国内也有许多网站采用这种样式，不过大多数为了节约代码采用的是等宽等高的样式。今天我要演示的是等宽不等高如何进行瀑布流加载。 html结构由于我们这里瀑

0
前端

计算器小实例

最近在学react，没啥时间更新博客，等有空的时候把react基础写一写，react写法还是挺有意思的。这个实例没啥可说的，就是一个小实例而已，js实现最简单的计算器功能。当然原理很简单的，就是通过eval()可以计算字符串的特性实现字符串的运算，当然eval()还是少用为好，它的可读性非常差，不好再做优化和编译。 关键js代码12345678910111213141516171819202122

0
前端

拖拽小实例

在日常业务中有很多时候会用到拖拽，比如弹窗什么的，还有一些导航什么的拖动组成自己喜欢的导航。今天就写了两个小例子带大家了解PC端和移动端的拖拽是怎么实现的。 PC端拖拽pc端拖动主要是onmouse事件，当你鼠标对拖动目标点下时触发拖动目标的onmousedown事件，此时记录下鼠标点击的位置坐标和拖动目标的右上角坐标，得到二者之差，鼠标点下并且拖动触发document的onmousemove事件

0
前端

图片加载

图片懒加载技术相信大家再熟悉不过了，当网站中用到大量图片时回事网站打开时加载过慢，用户体验不好。用户其实看到的是可视区域，可视区域下面的图片什么的可以不用加载，当用户滚动滚动条要看到还没加载的图片时，在让其进行加载。所谓懒加载，就是把img的src放在一个自定义属性中，src为空，当触发某个事件时把自定义属性的值赋给src。1234<img data-src="https://timgsa.

0
前端

CSS-背景裁剪

最近一直忙着看ES6（懒），好久都没更新博客（不想写），难得下午抽空写写。好了，今天的是文字对背景图片的裁剪，以及一些衍生的小东西。 background-clip:background-clip 属性规定背景的绘制区域。其值主要有四个1234background-clip: border-box;background-clip: padding-box;background-clip: cont

0
前端

图片上传那些事-总结篇

好了，总结篇终于开工了，这次来说说关于上传的一些琐碎事情。 1.file input的美化file input 好用是好用但是论起颜值来说差得不是一点半点，怎么能让这玩意儿拉低我们写好的页面颜值呢(ง •̀_•́)ง，来整整容吧，其实这个东西实现起来也很简单的首先我们把这个上传的input用display: none;隐藏掉，然后发挥自己力量写个高颜值的上传按钮，给这个按钮添加点击事件，点击的时候

0
前端

图片上传那些事-图片上传篇

上次说完了图片上传预览，使用form提交就可以把图片进行提交了，但是在现实中这样的操作往往满足不了用户需求，一般在进行上传操作时可能会进行图片的多次重新选择和增删所选择的图片，这时用form提交就实现不了。 这时就该我们本篇的主角闪亮登场了：FormData。W3C在2008年提出XMLHttpRequest Level 2的草案中改进了XMLHttpRequest对象，在新版本的一些功能中就有F

0
前端

图片上传那些事-图片预览篇

在前端工作中，有一些小功能是大家经常遇到的，图片的上传就是经常遇到的功能之一，平时图片上传有很多的需求，比如图片预览，批量上传，有些还要有上传进度，本文将介绍如何实现图片的批量上传和删除以及预览。以前的浏览器由于安全问题和兼容问题，实现不了本地图片信息的读取预览，只能选择一张就上传一张图片到服务器，然后服务器返回图片地址从而实现图片的预览，但是随着老的浏览器(ie)的逐渐淘汰，以及各个浏览器标准的

0
前端

Circle 进度环--css篇

网上有各种进度，进度条啊，进度环，进度条做起来简单，可是有很多时候需要的是进度环，本篇是用css3的效果结合js完成进度环的。废话不多说了，上结构html:12345<div class="loading"> <div class="left"><span></span></div> <div class="right"