您的位置:首页 > Web前端 > JavaScript

【微收藏】FourShadows.js – 时间感知的算法驱动的图标阴影JS库

2014-11-26 22:07 211 查看
废话一箩筐,筐筐有心得
不小心养成了一个刷微博的习惯,主要还是关注一些前端人士,学习一些前端方面的知识,看到大家都有一些刷微博的小习惯。有的是转发一下,转发内容来一个标记(MARK).也有评论中标记为Mark的,这种完全不知道是干什么?不过有一个比较好的@我的印象笔记 不过,我不怎么喜欢使用这些小工具,因为怎么的我都不喜欢详细看,实际上这不是一个好习惯,我最常用的还是微博的收藏功能,最后找个时间再细看一下这些内容,今天就分享一篇收藏的内容。(吐槽一下:微博的某设备官方客户端真心不好用,主要是针对我常用的收藏功能)

时间感知的算法驱动的图标阴影JS库 - Four Shadows Demo
英文不是很好,使用的谷歌翻译,大致理解的是根据一天中的时间,并根据模拟时钟的“时针”的方向上阴影的方向变化。

Four Shadows Demo

Current Hour:
Direction of shadow is based on direction of 'hour hand' on an analog clock.

Simulate Time

setup
①:引入fourshadows.js

②:body中写上这么一个div:>div class="fs-icon-l fs-cast" data-icon="filename.png"$lt;>/div<

③:引入css样式:

.fs-icon-l {width: 512px; height: 512px;}

.fs-icon-m {width: 256px; height: 256px;}

.fs-icon-s {width: 128px; height: 128px;}

.fs-icon-xs {width: 64px; height: 64px;}

④:配置一下默认JS设置
参考DEMO以及Github开源 https://github.com/Gigacore/four-shadows http://gigacore.github.io/demos/fs/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: