不得不佩服下谷歌Chrome团队，利用HTML5和CSS3实现了一本相当漂亮的在线电子书：《关于浏览器和互联网20件事》。
访问地址：http://www.20thingsilearned.com
话说这本电子书已经出来很久了，不过今天来看依然觉得相当的赞。我们无需刷新页面，就可以来回切换电子书页面，这正是OPOA（One Page One Application）的完美体现。
现在正在学习关于history API这方面的东西，所以特别感兴趣的是他们如何使用window.history.pushState()和window.history.replaceState()来做页面之间的不刷新切换。
今天查阅了一些资料，基本上对history API有了一个基本了解。
HTML5提供了一组API用来获取用户的地理位置，如果浏览器支持且设备具有定位功能，就能够直接使用这组API来获取当前位置信息。
该API是navigator对象的一个属性 – Geolocation。目前除了ie内核浏览器外，其他浏览器的最新版本基本都支持Geolocation。同时，移动设备IOS 3.0+ 和 Android 2.0+ 系统也支持它，现在很多移动设备的应用加入了地理定位的元素。
那么我们接下来看如何使用Geolocation API：
一、检查浏览器是否支持Geolocation
var hasGeolocation = !!(navigator.geolocation);
if(hasGeolocation){
alert(“浏览器支持hasGeolocation”);
}
其实去年就开始接触到了css3动画，由于精力有限，然后就是关于这方面的资料并不多，所以只了解了下皮毛。
最近看了一下移动Javascript框架jQuery Mobile的源码，发现里面的页面切换，很多动画效果都是用css3来实现的。其实现在很多人依旧因为ie不支持css3而放弃去了解这方面知识，作为无线前端开发，很幸运能够走在大家前面去了解这些东西。
今天，主要介绍一下animation,那么先看下面一段代码。
/* 确保我们是在一个 3-D 空间 */
-webkit-transform-style: preserve-3d;
/*让整个行使用x-轴旋转、7秒中的动画、无限次播放以及线性 */
-webkit-animation-name: x-spin;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear; }
/* 定义要调用的动画 */
@-webkit-keyframes x-spin {
0% { -webkit-transform: rotateX(0deg); }
50% { -webkit-transform: rotateX(180deg); }
100% { -webkit-transform: rotateX(360deg); }
}
animation-name 动画的名称。
animation-duration 定义动画播放一次需要的时间。默认为0；
animation-timing-function 定义动画播放的方式，参数设置类似transition-timing-function animation-delay 定义动画开始的时间
animation-iteration-count 定义循环的次数，infinite即为无限次。默认是1。
animation-direction 动画播放的方向，两个值，默认为normal，这个时候动画的每次循环都向前播放。另一个值是alternate，则第偶数次向前播放，第奇数次向反方向播放。
—————————————————————
有兴趣的可以看看我利用animation实现slide幻灯片。
上图截取腾讯微博，仔细的同学应该会发现下面的内容被一个渐变的透明遮罩层盖住了。那么这个效果是怎么实现的勒？当然出于职业病，我会去想它的实现原理。
其实实现方法并不难，由于我做pc页面比较少，首先想到的是用css3的渐变背景来实现，该方法在Safari Mobile上支持的很不错。
那么，pc页面用什么方式处理兼容性才好勒？
从我的角度出发，我应该会选择PNG8图片放到一个DIV，让后利用position属性定位到内容层的下面。
大概css代码就是：
.bottom-cover {
position: absolute;
left:0;
bottom:0;
width: ×××px;
height:×××px;
position: absolute;
background: url(×××.png) no-repeat 0 0 transparent;
}
前两天玄寂 同学推荐了一款WordPress音乐插件 “LRC-19Line” —— 一条置顶在页面上方的LRC LINE.
不过作者 19. 并没有提交到 WopdPress Plugins，在WP后台没有搜索到该插件。google了一下，第一条便是作者关于LRC-19Line的介绍，大致看了一下，就按照作者所描述的方法下载并安装了该插件（-= WP插件下载 =-）。
正如作者所强调的问题，我也遇到了JQuery兼容的情况，我的博客使用了JQuery1.42。好吧，没事就折腾一下好了，对原有的jQuery(“div[@class='line_19']“)全部换成$(‘.line_19′); 这种形式，就这样播放音乐的功能实现了。但是LRC-19Line默认的样式并不符合我的要求，于是我对19_line.php、line.css做了相应的调整。
喜欢的同学可以直接从这里下载：
-= LRC-19line（cssoul WP插件版本）=-
其他版本下载：
