载入中…

飞机云-JS动画-HTML5小实践

2011.05.01 | 天气: 晴 | 标签: , , , ,

觉得静态的飞机云不够美，干脆搞成动态的，原理还是很非常简单，对背景的偏移量做出调整，用了JQuery选择器（这东西太好用了）和HTML5的本地存储（来保持动画的一致性）。
最终效果图 演示地址

首先准备两张背景图（GIF的alpha质量有问题，用了透明的PNG，IE6核心的直接无视了）

然后开始码代码

function head_animate(){
//speed = Math.round(618*Math.sin((i/114)));这条是实验渐入样式，发现不好看，姑且留着
var x = localStorage.offset_x;
var y = localStorage.offset_y;
speed = 3820-y;
x-=3;y--;//为什么是3:1请看下面的注意
localStorage.setItem('offset_x',x);
localStorage.setItem('offset_y',y);
x_y=x+'px '+y+'px';//Jquery对于简写的属性两个以上的变量不支持，所以用拼字符串
$('#page').css( {backgroundPosition: x_y} );
//$('#head_s i').html(' i:'+i + ' speed:'+speed );
if (y > 14){
//距离顶部还有14px的时候停下
var ht=setTimeout('head_animate()',speed);
//速度会越来越慢
}
}
/*Jquery的启动*/
$(document).ready(function(){
//header animate
//这两个是我主题的偏移量
if(('localStorage' in window) && window['localStorage'] !== null){
var x = localStorage.offset_x;
var y = localStorage.offset_y;

if (x == null || y == null){
//首次启动
x=628;y=110;
//存储值
localStorage.setItem('offset_x',x);
localStorage.setItem('offset_y',y);
}
var ht=setTimeout('head_animate()',5000);

}
else{
//IE!老浏览器随便给个地方算了
$('#page').css( {backgroundPosition: '500px 40px'} );
}
});

需要注意的是飞机云图片的角度，因为电脑是一个个像素点组成的，不能用非整数，用非整数的话飞机云就会跳动起来。角度折换成图片的宽高比，我的是3:1（1:1即45度效果是最好的，但是对头部的高度要求不是一般的高）。飞机云可以在最后放上渐变到消失，不过我现在还没这样的打算哈，因为这样图片会大得多。

因为使用HTML5的本地存储，所以飞机云一旦飞到一定高度之后以后永远停在上面了，所以哈，同志们朋友们要视这玩意作为陪衬哈

参考了 丸子的HTML5本地存储

上班一周记

2011.04.23 | 天气: 阴, 雨 | 标签: , , ,

其实我也没想到，我会开始给上海那本已拥挤不堪的公交系统增添一份负担的。我那份半夜三更随便投的而且没填完的简历现在换来了PChome的面试通知，估计是关键字诱人……4年Linux使用经验，2年网站管理什么的（好吧，我承认其实都是乱玩这个个人网站的结果）。在前台的引导下填完了几张表格，一阵稀里糊涂的回答之后就得了个几乎“白打工”的实习职位。
虽然说PChome归CBS interactive管（没看错，就是某些美剧里的那个标志是个大眼睛的CBS电视台），可是感觉不到那种美国互联网公司那股自由的风，相反很有国内中小企业的感觉——没啥人情味的写字间和固定的打卡制度。两天了解下来，里面的同事之间倒是很风趣，目前没有体验到什么传说中的办公室战争，也可能是我没进来多久的原因。带我熟悉开发环境的“成龙”大哥很有意思，他就是一个活数据库，各种表各种函数关系都很牛，而且估计他也没35（这家伙脸比我还嫩……看不出，也不好意思问）。还有三个一样是实习的同学，都是学计算机的(不过都是搞硬件出身)。
刚进公司就赶上他们的季度总结会，本想找个角落坐的，没想到那个笑呵呵的果粉（Ipad、Iphone，就差Mac AIR就凑齐了）招呼下我们几个实习生就坐到了他边上，会开到一半，我老大征求他意见的时候才发现这家伙竟然是老板……这家伙是有两把刷子，激励员工各种到位，我替他”总结”的有“刚毕业年轻人要这么多钱干嘛，学到本领和经验才是真金”,“不会没关系，努力学就是了”，“成功不仅是熬出来的，而且是乐着熬出来的”，“抱怨是没用的，改变它才是应该做的”。结束的时候还推荐了《秘密》这部电影，好吧，我看了觉得YY成真这样的说法还真有吸引力。不过人家能说那也是资本，反正自己就不会说话，哈哈哈。
先写这么多了，虽然明天不用上班但是生物钟在催命了……

密码保护：破解简单Mifare射频卡密钥杂记

2011.04.01 | 天气: 晴 | 标签: , , , , ,

这是一篇受密码保护的文章。您需要提供访问密码：


调整成全站使用Jquery

2011.03.31 | 天气: 晴 | 标签: , , ,

Jquery这个东西实在太好，不管是动画、选择器、还是各种属性读取，真的应证了他的格言“Write Less Do More”，搞得我都觉得现代浏览器都应该默认本地存储这玩意，然后下一代浏览器应该拿这玩意做标准。相比之下，CSS3不好好干他的事，跑来搞动画，真是不知道又会有怎样的一场口水战了。
昨晚在士兵同学的刺激下，今晚一咬牙把烂尾工程做完了。
在强大的Jquery下，我之前几乎所有的Javascript的文章就像垃圾一样 = -||

  • 比如：《博客调用QQ昵称的歪门邪道》
    直接用JSON调用秒杀了……代码还出奇地简单
    $.getScript('http://r.qzone.qq.com/cgi-bin/user/cgi_personal_card?uin='+t_author);
    后面……真的就没有后面了……这样一来，QQ昵称调用次数的限制就是无限了。
  • 再比如：《wordpress侧栏评论改装》更垃圾
    直接$('.shide').hide(0);就解决了多余的评论暂时不显示的问题了。
    事件触发更加，以前是每条评论HTML上加监听，现在倒好，两行解决$('.rc_com').bind('mouseover',function(){
    $(this).children('.shide').toggle('fast');}
  • 我一直头疼的GRAvatar调用问题倒是正好在1.5版本里解决了，用了这个
    $.ajax({statusCode: {XXX: function (){ }}});对，没看错！正是AJAX里梦寐以求的HTTP statusCode响应 我只用了一个，即一切正常的200，大家能看到显示完的网页都是因为所有的HTTP statusCode都是 200）

这次改函数库倒是还搞清楚了什么callback……其实就是……菜鸟我还是举个伪程序的例子吧

  • 如果：小明亲小红
  • (小红)亲(小白)
  • (小红)打(小刚)

假设“亲”就是要callback的事情
变成函数版就是：
function （小明）亲（小红）{（小红）打（小刚），callback:（小红）亲（小白）;}
当然这里不觉得有什么好，等小红和大家玩了其他很多游园项目后（程序继续写下去了）的时候，你还想知道小明亲了小红后发生了什么？就像那个俄国间谍偷到美国航天飞机发射程序，看见N个“}”结束符，晕了吧。所以写程序还是多多callback一下比较好，以前一直觉得很深奥，自己悟出来了觉得怎么这么简单……

不过我代码写得少了、动画更炫了，载入的时候各位就要受罪了，要多28K的JQuery库要下载，所以我说应该把Jquery加到所有浏览器里！

wordpress侧栏评论改装

2011.03.10 | 天气: 晴 | 标签: , ,
  • 对wordpress默认侧栏不满意？
  • 别人改装的还有头像显示？
  • 请求剩下的评论还要ajax传输一次？

你算找对地方了，这里这个小工具正好能满足你的要求。（世界上要是多了一个开源的东西必定是作者“傻B嘻”了）
把以下代码包打开，解压以后复制里面的代码到主题function.php里就可以了。
然后进入管理界面的外观，小工具里就有个“改装好的评论”了。
主要功能如图有：

  • 主动断句（其他插件的也有）
  • 重复作者评论去除（名字、邮箱、IP任一一项）
  • 去掉“@xx,”这样回复模式的字段
  • 侧栏会显表情，而且表情代码不会被截成两段

< 阅读全文 >