2012 年 3月随笔档案 - 向我开炮

图片延迟加载

摘要：工作需要写了一个简单的图片延迟加载【效果预览】大概思路如下：获取所有需要延迟加载的图片，根据位置进行排序，触发滚动条或window窗口大小的时候判断哪些图片在当前可见区域，以此类推，完毕之后删除事件，完成。写代码的时候大概思路如下：1、默认给需要延迟的图片src设置成一张1px的透明gif图片，把图片路径存储到img的一个叫"_src"的属性当中(属性名自定义)。2、给需要延迟加载的图片一个标识，我这里用的一个class叫"loadImg"的名字。3、获取所有标识的对象，然后根据其位置进行排序。这个方法可以参考源代码里边初始化时候的sortNumber 阅读全文

posted @ 2012-03-28 15:50 向我开炮阅读(212) 评论(0) 推荐(0)

Canvas 小游戏台球

摘要：预览地址：点击预览尚未完善，持续更新... /3.8/操作方法：鼠标放到蓝球上点击拉动松开即可，顶部红色线条为力度，力度与该长度成正比。请使用非IE内核浏览器。//(2012.3.9)1、鼠标移出画布清除线条和球杆。2、记录桌面球体移动数量。(防止连续动作)HTML部分：<!DOCTYPE HTML><html><head><title>Canvas 台球</title></head><body></body></html>JS部分：(function(){ /* Author:Jin. 阅读全文

posted @ 2012-03-08 18:22 向我开炮阅读(299) 评论(0) 推荐(0)

Canvas画钟 js

摘要：用Canvas模拟了webQQ里头的那个钟。下图左侧是webQQ的原版，右侧是画出来的。效果预览画的过程中都还比较顺利，只是最里边的那个小圆顶部有一点点小渐变，花了不少功夫。用得比较多的是旋转部分的代码，得先存之前的位置，然后再旋转，再恢复到原来的属性继续往下画。HTML部分：<!DOCTYPE HTML><html> <head> <meta chaset="utf-8" /> <title>Canvas Clock</title> <style> a{color:#333;margin: 阅读全文

posted @ 2012-03-05 15:50 向我开炮阅读(325) 评论(0) 推荐(0)

Canvas js 小游戏

摘要：第一次用canvas做了个很小很小的游戏。不是很完美，算是Hello Wrold吧。预览效果下面的横条可以用左右箭头键控制，也可以用鼠标。按键控制不是很灵活。下面是html：<!DOCTYPE HTML><html> <head> <meta chaset="utf-8" /> <title>Canvas 小游戏</title> <style> a{color:#333;margin:0 10px;font-size:24px;} .ts{width:800px;text-align:cen 阅读全文

posted @ 2012-03-04 14:52 向我开炮阅读(291) 评论(0) 推荐(0)