标签: 小实例

2017
0
前端

特效篇--图片环绕

2017年快要结束了，来点特效的东西作为2017年博客的结束篇吧，其实特效这东西看看就好了，实际用处不是特别的大，不过效果什么的还是挺酷的。 本文介绍的是图片环绕，散列切换如何完成的，一共三个切换效果，先看看效果吧：当然博客展示的面积不够：请点这里查看全部效果链接。废话不多说直接上代码了：html：1234567891011121314151617181920212223242526<div

0
前端

Canvas --雪花图

昨天冬至，又到了白色相簿的季节了，︿(￣︶￣)︿笑，后天就是圣诞了，安安心心做个剩蛋老人吧(ノへ￣、)。好了好了，重庆还是没下雪，冷着不下雪，感觉好亏。既然不下，那就只有自己写点雪花了。canvas这个东西一直是想深入学习的，做出来的东西各种炫酷吊炸天，但是没啥时间，就只会点小东西，大家将就着看吧：首先既然是用canvas，那么结构就非常简单啦，html什么都不用写，用js创建canvas。我们把

0
前端

时间--时钟篇

这天是越来越冷了，人也越发的懒起来，早上起来简直要老命，下班回去也只想进被子里面，游戏都不想打了╮（﹀_﹀）╭，冷呀。。。。好了，写个时钟来激励一下懒惰的自己吧。 旋转方式做时钟首先要把样式给搞定，主要是围绕中心旋转的样式。围绕中心旋转形成等分状态其实有两种做法，假设html样式如下：1234567891011121314<ul class="pox"> <li>1&

0
前端

初探Promise

一个星期没更新了，先来个小游戏来放松放松，勇者大战魔王： 考验人品的时候到了，反复进攻，看你能几次进攻打败魔王。 上面只是个小例子，如何实现上面的效果呢，这就要说到我们今天的正主了–Promise，Promise译为承诺。在ES6发布时Promise被ES6列为正式规范，成为最重要的特性之一，Promise 对象用于一个异步操作的最终完成（或失败）及其结果值的表示。简单来说就是把一个函数放进去

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
前端

Circle 进度环--css篇

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