利用JS的background-position实现产品3D旋转。
利用CSS3的transform实现水滴晃动。
Demo访问http://www.webin.us/webin/wordpress/test/floh
PS: iphone/ipad 下包的显示有问题，自动被缩小50%，原因待查…
存档在 ‘前端技术’ 分类
CSS3+javascript 实现3D产品展示动画
2011年6月9日小试Google translate API
2011年5月27日
简介jQuery 1.6新功能
2011年5月4日jQuery 1.6正式版昨天正式发布，新功能如下：
用来暂停ready事件，当我们需要动态按顺序加载js脚本的时候可以用到。
当 事件队列执行完后执行其它方法,所以对象都可用，不一定要Deferred对象。
返回对象的属性状态值。
与.attr()的区别，1.6中attr()方法有改动，只返回对象的属性值，请注意：
| $(elem).prop(“checked”) | true (Boolean) |
| $(elem).attr(“checked”)(1.6+) | “checked” (String) |
| $(elem).attr(“checked”)(1.6之前版本) | true (Boolean) |
简单实现checkbox的限定复选个数
2011年4月20日jQuery实现iframe高度自适应（兼容IE6,7,8）
2011年3月24日网上有很多iframe自适应的方法，但基本都是基于body或document的，当body被撑大后，不能变小，这样就当iframe内部页面的dom变化时，iframe的大小不会跟着变化。
我的方法是把在内容外面包在一个层(div)里，通过获取这个层(div)的高度来控制iframe的高度。
Demo演示
注：本次探讨只涉及同域iframe，跨域iframe的自适应接下去再尝试。
代码如下：
父窗口代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <div style="height:200px"></div> <iframe id="iframe_1" src="iframe-inside-content.html" width="100%" frameborder="no" border="0" scrolling="no"></iframe> </body> </html>
子窗口代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
/*
* $("#wrap").height()为总包裹容器层的高度
*/
$(window.parent.document).find('#iframe_1').height($("#wrap").height());
})
/*
* 隐藏内容使iframe高度变小
*/
function hideDiv(){
$("#content").hide();
$(window.parent.document).find('#iframe_1').height($("#wrap").height());
}
/*
* 隐藏内容使iframe高度变大
*/
function showDiv(){
$("#content").show();
$(window.parent.document).find('#iframe_1').height($("#wrap").height());
}
</script>
<style>
*{margin:0;paddding:0;}/*重置默认的间距*/
body{background:transparent;background-color:#eee;height:100%;}
#content{height:1000px;background-color:#ddd;margin:50px;}
/*
* 如果#content内容有浮动层，即使用了float，
* 那#wrap也必须用float，不然#wrap不会包含#content的高度
* #wrap{float:left}
* #content{float:left}
*/
</style>
</head>
<body>
<div id="wrap">
<a href="#" onclick="hideDiv();">隐藏DIV</a>
<a href="#" onclick="showDiv();">显示DIV</a>
<div id="content">div content</div>
</div>
</body>
</html>
小试 Sencha Touch
2011年3月23日Sencha Touch 是基于ExtJs开发的web app框架。
下面引自百度百科（写得很明了，就懒得自己写了）
Sencha特性
Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备（webkit核心浏览器）。
下面是Sencha官方给出的几点特性
- 基于最新的WEB标准 – HTML5，CSS3，JavaScript。整个库在压缩和gzip后大约80KB，通过禁用一些组件还会使它更小。
- 支持世界上最好的设备。Beta版兼容Android和iOS，Android上的开发人员还可以使用一些专为Android定制的主题。
- 增强的触摸事件。在touchstart、touchend等标准事件基础上，增加了一组自定义事件数据集成，如tap、swipe、pinch、rotate等。
- 数据集成。提供了强大的数据包，通过Ajax、Jsonp、YQL等方式绑定到组件模板，写入本地离线存储。
我简单得尝试了下实现新浪微博web客户端的功能
由于新浪的大部分功能都需要登录后才能提供，而用oAuth登录需要页面跳转登录并授权，用户体验上不是很好，暂时也没想到其它方法解决，所以就简单调用public_timeline的API看看效果。
如何利用HTML5将现有网页转成mobile版本（译）
2011年3月14日原文地址：http://www.html5rocks.com/mobile/mobifying.html
原文作者：Eric Bidelman
简介
mobile版本网站是现在比较热门的话题。今年，智能手机的出货量首次超过PC。越来越多的用户使用移动设备来上网，这意味着网站开发人员为他们的网站进行手机浏览器的优化变得越来越重要。
“mobile”战场对大部分开发者都是陌生的。许多人忽略了他们传统的网站会被手机用户访问。相反，网站设计的时候只考虑桌面浏览器。
开发一个能适应移动设备的html5rocks.com
作为练习，我们以html5rocks.com为例，当然我们不是专门开发一个mobile版本的网站，而是利用css制定一个mobile版本，让原网站能自动被浏览器识别并良好显示。
本文探讨的移动版本限于iOS和andrioid手机。
左边是PC版，右边是Mobile版
神奇！在URL上也能玩游戏
2011年3月11日发现一个能在URL上玩的游戏网页
玩法很简单，用键盘左右键控制 url 上的 字母”O” ,当 “O” 与 字母 “a” 重置时按空格消灭”a”,
不多说，点这里玩
研究了下代码，当然主要是通过定时刷新hash实现的，下面是我加了注释的代码
关于jQuery 1.5 的Deferred对象
2011年3月8日刚发布不久的jQuery 1.5 有个重大的改进就是引入了 Deferred Object(延迟对象)。
下面是Deferred的小实例
var a= $.Deferred(); function test() { var name=prompt("Please enter the sitename",""); if (name=="webinus") a.resolve();//设为成功状态 else a.reject();//设为失败状态 return a.promise();//返回状态 } test().then( //当成功时执行 function() { alert("不错!"); }, //当失败时执行 function() {alert("笨,答案是webinus!");} )
下面是我翻译的deferred object的官方文档。
译文原文：
http://api.jquery.com/category/deferred-object/
jQuery.Deferred,在1.5版本中被引进，具有链式操作功能，能同时在回调队列里注册多个回调方法，还能引用其他回调队列，并能输出同步/异步方法的成功/失败状态。
举个例子来说，在1.5之前的版本，异步方法像jQuery.ajax()只能在ajax请求成功/失败/完后之后再接收回调方法。
jQuery.Deferred 增强了对回调方法的管理和引用。特别是它提供了多种灵活的方式实现多重回调，而且不管原始的回调方法是否已经分发使用，这些回调都能被引用（可以理解成使用没有返回的返回值）。
解决多个Ajax并发导致返回数据不同步的问题
2011年3月4日最近在做项目中做到同时向Twitter(T),Flickr(F),Youtube(Y)请求数据，并需要将三者数据同时通过showResult()显示出来的功能。
由于向T,F,Y请求的方式不一样，返回数据的速度自然是不同的，如图：
所以需要在Ajax的回调方法里加上判断三者数据是否都成功返回的方法，然后再继续下面的showResult()。
我们都知道javascript是单线程的，且没有sleep(暂停)功能，网上普通采用的方法是用setTimeout加setInterval进行回调，不过这种方法对定时的估计没法做到很精确.
于是我尝试了直接用status(状态)判断加递归做。
流程图：
不多说，看代码：
