雨林寒舍 | jquery
  • 展开微博窗口
  • 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);

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