• 展开微博窗口
  • QQ:52619941
  • 微信:cnmemory
  • 展开分类目录
  • 还没有账号?

Memory

CSS3+JS+PHP制作实时时钟

闲下来的时候就爱捣鼓些小玩意,顺便来一首经典的老歌,随意感受一下^_^,回归正题,今天给大家带来的是一款由CSS3实现的实时时钟(DEMO的链接在文本的末尾),主要的思路是利用css3的transform和animation来实现一个会走的钟摆,那么,为什么会利用到PHP呢?因为要通过animation制作一个指针转动的动画,但是在animation动画中,指针的起始点要根据实际的时间来控制,我们就需要PHP的帮助,通过下面的代码计算出时针,分针,秒针的初始位置:

date_default_timezone_set('Asia/Shanghai');
$sec = date('s');
$min = date('i')+$sec/60;
$hour = date('H')+$min/60;
$hour_deg = floor($hour/12*360);
$min_deg = floor($min/60*360);
$sec_deg = floor($sec/60*360);

分享一个前端性能检测的小玩意——DOM Monster

从事前端开发,使效果能够完美呈现的同时,还会遇到一个不可规避的问题,那就是性能。而DOM Monster则能够辅助你对页面的DOM进行相关的性能调试,并且使用简单,我们只需将DOM Monster添加进书签,在需要他的时候点击他,这样,他就能够替你分析出当前网页中所出现的性能问题及相应的优化方案,诸如提示减少JAVASCRIPT全局变量,某某处有多少空节点,去除他们以提高速度等等。

此外DOM Monster还是一个开源项目,代码以托管在github,如果你想改进他,不凡试一试。

 

dbg

 

项目地址: http://mir.aculo.us/dom-monster/ 
下载地址: https://github.com/madrobby/dom-monster 

JS判断鼠标进入或离开容器的方向做出特殊hover效果

无意中在uemo的一个子站点看到一个很动感的hover效果,经过简单分析,想必是通过JS判断鼠标进入方向来实现这个hover效果,使父容器中的子容器通过判断鼠标进入方向,从而使子容器从相同的方向“进入”到父容器中并且从鼠标离开的方向“离开”父容器。下面这一段js代码来源于网络,如果想深入了解代码的意义请跳转

http://sentsin.com/web/112.html

DEMO:

http://www.im050.com/im050/memory/demo/jquery-direction.html

而在津泓橱柜官方网站的制作过程中,在其产品展示页面也使用了这样的效果

具体参见:http://www.jhcg.net/home/product/

HTML代码部分:

<style>
body {margin: 50px;}
#wrap {width: 100px; height: 100px; background: #000}
#result