jQuery插件制作经验 (2012-02-05)
jQuery插件制作经验:
一、先从一个简单的实例，不需要带参数的一个方法开始
//创建一个匿名函数
(function($){
//给jQuery附加一个新的方法（详细见备注1）
$.fn.extend({
//插件的名字
MyFirstName: function() {
//迭代当前匹配元素集合
return this.each(function() {
var obj = $(this);
//自己的代码
});
}
});
)(jQuery);
二、有参数的
//创建一个匿名函数
(function($){
//给jQuery附加一个新的方法（详细见备注1）
$.fn.extend({
//插件的名字
MyFirstName: function() {
//定义默认参数
Var parms={
Parms1:1,
Parms2:2
}
//合并用户传的参数和默认参数，返回给options（详细见备注2）
var options = $.extend(defaults, options);
//迭代当前匹配元素集合
return this.each(function() {
//把合并后的参数赋值给o
var o= options;
//迭代当前匹配元素
var obj = $(this);
//自己的代码
});
}
});
)(jQuery);
备注2：var options = $.extend(defaults, options); 意思是把defaults和options合并，如果后者有和前者名称一样的元素，后者覆盖前者，然后合并给defaults，然后defaults赋值给options，如果是var options = $.extend(｛｝,defaults, options);那么是把前者和后者合并给｛｝这个参数，然后赋值给options，defaluts的结构和值都没有变化 详细区别见（http://www.cnblogs.com/holygis/archive/2011/11/02/2232659.html）
iScroll框架中文说明 (2012-01-03)
在此文档中你会发现很多例子来教会你如何快速上手iScroll脚本库。参看文中的demo小例子并仔细阅读此文档，可能有点小无聊，但是这篇文章中却是iScroll这个脚本库的精髓之所在哦。
//isScroll JS
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', { checkDOMChanges: true });
/*
setInterval(function () {
if (myScroll.isReady())
document.getElementById('thelist').innerHTML += '- new row
iScroll里传递的参数
iScroll里的第二个参数允许你自定义一些内容，比如下面的这段代码：
var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});
第二个参数通常都是一个对象，像上面的这个例子里就设定了不显示滚动条。常用的参数如下：
hScroll false 禁止横向滚动 true横向滚动 默认为true
vScroll false 精致垂直滚动 true垂直滚动 默认为true
hScrollbar false隐藏水平方向上的滚动条
vScrollbar false 隐藏垂直方向上的滚动条
fixedScrollbar 在iOS系统上，当元素拖动超出了scroller的边界时，滚动条会收缩，设置为true可以禁止滚动条超出
scroller的可见区域。默认在Android上为true， iOS上为false
fadeScrollbar false 指定在无渐隐效果时隐藏滚动条
hideScrollbar 在没有用户交互时隐藏滚动条 默认为true
bounce 启用或禁用边界的反弹，默认为true
momentum 启用或禁用惯性，默认为true，此参数在你想要保存资源的时候非常有用
lockDirection false取消拖动方向的锁定， true拖动只能在一个方向上（up/down 或者left/right）
为了保持资源的完整性，建议去除滚动条
iScroll拉动刷新（pull to refresh）
自从Twitter和一些Apple的本地化应用出现了这个效果之后，这个效果就变得非常流行。你可以看看这儿先一睹为快。 我最近把"pull to refresh"这个部分单分出来作为iScroll的一个额外插件。你可以点击这儿看看pull to refresh是如何工作 滴。你只需要做的就是自定义pullDownAction()这个方法。你可能需要一个ajax来加载新的内容，不过一旦DOM树发生 了变化要记得调用refresh这个方法来。需要记住的是在例子中我们加了1秒的延迟来模拟网络的延迟效果。当然，如果 你不想使用这个延迟，那就把setTimeout方法去掉就行了。
iScroll拉动刷新（pull to refresh）
自从Twitter和一些Apple的本地化应用出现了这个效果之后，这个效果就变得非常流行。你可以看看这儿先一睹为快。 我最近把"pull to refresh"这个部分单分出来作为iScroll的一个额外插件。你可以点击这儿看看pull to refresh是如何工作 滴。你只需要做的就是自定义pullDownAction()这个方法。你可能需要一个ajax来加载新的内容，不过一旦DOM树发生 了变化要记得调用refresh这个方法来。需要记住的是在例子中我们加了1秒的延迟来模拟网络的延迟效果。当然，如果 你不想使用这个延迟，那就把setTimeout方法去掉就行了。
iScroll缩放(pinch / zoom)
我们不得不面对一个事实，那就是光有滚动其实没什么新意的。这就是为什么在iScroll 4这个版本里我们允许你可以放 大和缩小。想要这个功能，只需要设置放大的参数zoom 为true即可实现利用手势来放大和缩小。你可以看看这儿。 双击放大和缩小的功能在iScroll 4里也是得到支持的。要使用缩放功能，你至少需要如下配置：
var myScroll =new iScroll("wrapper",{zoom:true});
如果你想对缩放功能进行深度的自定义的话可以使用下面的一些选项：
zoomMax 指定允许放大的最大倍数，默认为4
【注意事项】：如果想要图片缩放的效果很好的话要把他们放到硬件的合成层中。通俗点说，就是在所有需要缩放的 img元素上使用-webkit-transform:translate3d(0,0,0)来实现，而且尤为重要的是，硬件的加速会占用大量 资源，要谨慎使用，否则你的应用可能就此崩溃。
捕捉的功能会促使scroller去重新定义位置，这样可以制作更加花哨的传送带效果。点击这里有个小例子。 默认情况下，iScroll将scroller分成四分体，或者是相同大小的wrapper。iScroll 4加入了这个属性允许捕捉scroller里的 任何元素，不考虑外部wrapper的大小。如果你想要实现这样的传送带效果，我建议你使用“quadrant”分割。最佳的设 置如下：
var myscroll=new iScroll("wrapper",{
snap:true,
momentum:false,
hScrollbar:false,
vScrollbar: false
});
iScroll捕获元素，可以通过传递一个字符串来作为查询条件，如下：
var myscroll=new iScroll("wrapper",{
snap:"li",
momentum:false,
hScrollbar:false,
vScrollbar:false
});
在这个例子中scroller可以捕捉到滚动区域中最左上角的li元素
iScroll自定义滚动条（custom scrollbars）
在iScroll 4这个版本中，可以利用一系列的css来自定义滚动条的呈现。可以给滚动条添加一个class参数，如下：
var myscroll=new iScroll("wrapper",{
scrollbarClass: "myScrollbar"
});
你可以点击这里看一个小例子，在这个小例子里，myScrollbarH这个类被添加到了水平滚动条上，myScrollbarV这个 类则被添加给了垂直方向上的滚动条上了。需要提醒的是，滚动条是由两个元素组合而成的：容器和显示器。容器同 wrapper的高度相同，而显示器则代表的是滚动条本身。
滚动条的HTML结构如下：
<div class="myScrollbarV">
<div></div>
</div>
.myscrollbarV{
position:absolute;z-index:100;width:8px;bottom:7px;top:2px;right:1px;
}
.myScrollbarV div {
position:absolute;
z-index:100;
width:100%;
/* The following is probably what you want to customize */
background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
border:1px solid #800;
-webkit-background-clip:padding-box;
-webkit-box-sizing:border-box;
-webkit-border-radius:4px;
-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
}
iScroll通用方法：
（1）refresh 在DOM树发生变化时，应该调用此方法
（2）scrollTo() 滚动到某个位置 eg: myscroll.scrollTo(0,10,200,true);
（3）scrollToElement() 滚动到某个元素 eg: myscroll.scrolToElement("li:nth-child(10)",100);
（4）detroy() 完全消除myscroll及其占用的内存空间 eg: myscroll.destroy()
赶集移动Web App开发总结分享 (2011-12-30)
介绍关于移动Web APP开发的经验分享，非常值得收藏
CSS区分各浏览器Hack (2011-12-06)
虽然我不提倡用Css Hack,
但是有时候不得不用Css Hack处理一些比较头疼的样式
以下是区分IE6,IE7,IE8,IE9,Firefox,Chrome,Opera,Safari的Hack写法
也是目前最全的CssHack
#test
{
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow\0; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/
}
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
background-color:blue; 各个浏览器都认识，这里给firefox用；
background-color:red\9;\9所有的ie浏览器可识别；
background-color:yellow\0; \0 是留给ie8的，但笔者测试，发现最新版opera也认识，汗。。。不过且慢，后面自有hack写了给opera认的，所以，\0我们就认为是给ie8留的；
+background-color:pink; + ie7定了；
_background-color:orange; _专门留给神奇的ie6；
:root #test { background-color:purple\9; } :root是给ie9的，网上流传了个版本是 :root #test { background-color:purple\0;}，呃。。。这个。。。，新版opera也认识，所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}
@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。
好了就这么多了，特别注意以上顺序是不可以改变的。css hack虽然可以解决个浏览器之间css显示的差异问题，但是毕竟不符合W3C规范，我们平时写css最好是按照标准来，这样对我们以后维护也是大有好处的，实在不行再用。
手机触摸屏的JS事件 (2011-11-08)
处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：
touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 touchend: // 手指从屏幕上拿起的时候触发 touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详
在开始描述touch事件之前，需要先描述一下多触式系统中特有的touch对象（android和iOS乃至nokia最新 的meego系统都模拟了类似的对象，这里只针对iOS，因为我只有iPad可用于测试。。）。这个对象封装一次 屏幕触摸，一般来自于手指。它在touch事件触发的时候产生，可以通过touch event handler的event对象取到 （一般是通过event.changedTouches属性）。这个对象包括一些重要的属性：
client / clientY：// 触摸点相对于浏览器窗口viewport的位置 pageX / pageY：// 触摸点相对于页面的位置 screenX /screenY：// 触摸点相对于屏幕的位置 identifier： // touch对象的unique ID
HTML主体定义
<body style=”height: 100%;margin:0;padding:0”> <div id=”canvas” style=”position: relative;width:100%;height: 100%;”></div> </body>
Console详解 (2011-10-27)
console.log(object[, object, ...])
在控制台输出一条消息。如果有多个参数，输出时会用空格隔开这些参数。
第一个参数可以是一个包含格式化占位符输出的字符串，例如：
上面的例子可以用下面的无格式化占位符输出的代码替换：
并且，这两种方式是可以组合使用的。如果使用了格式化占位符，而提供的参数的个数多于占位符的个数，那么，多余的参数会以空格分隔的方式附加在字符串后面，就像：
如果参数是一个Javascript对象，那么在控制台输出的就不是静态文字，而是一个可交互的超链接，点击超链接可以查看该对象的HTML, CSS, Script, DOM窗口，可用格式化字符串%o代替Javascript对象。
格式化字符串列表：
| 格式化字符串 | 类型 |
|---|---|
| %s | 字符串 |
| %d, %i | 整型（暂不支持数字型） |
| %f | 浮点型 （暂不支持数字型） |
| %o | 链接对象 |
console.debug(object[, object, ...])
在控制台输出一条消息，包含一个指向代码调用位置的超链接。假如是直接在控制台输入该命令，就不会出现超链接（和console.log()一样）。
console.info(object[, object, ...])
在控制台输出一条带有“信息”图标的消息和一个指向代码调用位置的超链接。
console.warn(object[, object, ...])
在控制台输出一条带有“警告”图标的消息和一个指向代码调用位置的超链接。
console.error(object[, object, ...])
在控制台输出一条带有“错误”图标的消息和一个指向代码调用位置的超链接。
console.assert(expression[, object, ...])
测试表达式expression是否为真。如果不是真，会在控制台写一条消息并抛出异常
console.dir(object)
以列表形式输出一个对象的所有属性，有点和你查看DOM窗口相类似。
console.dirxml(node)
输出一个HTML或者XML元素的XML源代码。和你在HTML窗口看到的相似。
console.trace()
Prints an interactive stack trace of JavaScript execution at the point where it is called.
The stack trace details the functions on the stack, as well as the values that were passed as arguments to each function. You can click each function to take you to its source in the Script tab, and click each argument value to inspect it in the DOM or HTML tabs.
console.group(object[, object, ...])
输出一条消息，并打开一个嵌套块，块中的内容都会缩进。调用console.groupEnd()关闭块。该命令可以嵌套使用。
console.groupEnd()
关闭最近一个由console.group打开的块。
console.time(name)
创建一个名字为name的计时器，调用console.timeEnd(name)停止计时器并输出所耗时间（毫秒）。
console.timeEnd(name)
停止同名的计时器并输出所耗时间（毫秒）。
console.profile([title])
打开Javascript性能测试开关。可选参数title会在打印性能测试报告时在报告的开头输出。
console.profileEnd()
关闭Javascript性能测试开关并输出报告。
console.count([title])
Writes the number of times that the line of code where count was called was executed. The optional argument title will print a message in addition to the number of the count.
Html5 Canvas 拖拽效果 (2011-10-13)
Canvas拖拽效果
var mainCanvas;
var mainCt;
var MAIN_CANVAS_WIDTH=680;
var MAIN_CANVAS_HEIGHT=560;
var currentRectX=100;
var currentRectY=100;
var startDragRectX=0;
var startDragRectY=0;
var startDragMouseX=0;
var startDragMouseY=0;
var RECT_WIDTH=100;
var RECT_HEIGHT=100;
function pageInit(){
mainCanvas=document.createElement("canvas");
mainCanvas.width=MAIN_CANVAS_WIDTH;
mainCanvas.height=MAIN_CANVAS_HEIGHT;
document.body.appendChild(mainCanvas);
mainCanvas.onmousedown=canvasMouseDownHandler;
mainCanvas.onmouseup=canvasMouseUpHandler;
mainCt=mainCanvas.getContext("2d");
redrawRect();
}
function canvasMouseMoveHandler(event){
var canvasMouseX=event.layerX;
if(!canvasMouseX){
canvasMouseX=event.x;
}
var canvasMouseY=event.layerY;
if(!canvasMouseY){
canvasMouseY=event.y;
}
currentRectX=startDragRectX+canvasMouseX-startDragMouseX;
currentRectY=startDragRectY+canvasMouseY-startDragMouseY;
redrawRect();
}
function canvasMouseUpHandler(event){
mainCanvas.onmousemove=null;
}
function redrawRect(){
mainCt.clearRect(0,0,MAIN_CANVAS_WIDTH,MAIN_CANVAS_HEIGHT);
mainCt.fillStyle="#0000FF";
mainCt.fillRect(currentRectX,currentRectY,RECT_WIDTH,RECT_HEIGHT);
}
HTML5 Canvas+Box2D实现物理重力效果 (2011-09-28)
最近研究了一下著名的box2d,
Box2D引擎很强大，能够用JS实现物理效果，
很适合做游戏开发
但是中文资料实在太少了,看国外关于box2d的文章还要翻墙，
可以看一下Box2d C++版本的中文手册，能了解一下box2d的相关知识
可以看下本文 栗子DEMO
下面综合一些知识简单讲解一下
首先创建一个AABB类，设置重力，创建一个有重力的世界
function setupWorld(){
//1. 设置有效区域大小 - b2AABB 类 （左上角向量,右下角向量）
worldAABB = new b2AABB();
worldAABB.minVertex.Set(-1000, -1000); //左上角
worldAABB.maxVertex.Set(1000, 1000); //右下角
//2. 定义重力 - 2D向量 - b2Vec2 类 （x,y）
gravity = new b2Vec2(0, 300);
//3. 忽略休眠的物体
var doSleep = true;
//4. 创建世界 - b2World
World = new b2World(worldAABB, gravity, doSleep);
}
在世界中添加“刚体”，和重力物体
这里我们添加一个地面盒，4个重力体
定义形状流程：
1.定义形状：Shape = new b2CircleDef()
形状参数：表面摩擦力，弹性，密度
2.物体定义： BodyDef = new b2BodyDef();
物体加入形状 BodyDef.AddShape(Shape);
物体参数： 位置
3.在重力世界创建物体
World = World.CreateBody(Shape);
//addBodys()
function addBodys(){
//1. 定义形状 b2CircleDef,b2BoxDef,b2PolyDef 类
var Shape1 = new b2CircleDef(); //Shape1:圆形
Shape1.radius = 20; //半径
Shape1.localPosition.Set(0, 0); //偏移量
Shape1.density = 1.0; //密度
Shape1.restitution = .3; //弹性
Shape1.friction = 1; //摩擦力
var Shape2 = new b2PolyDef(); //Shape2:多边形
Shape2.vertexCount = 3; //顶点数为5
Shape2.vertices[0] = new b2Vec2(0,-20); //顶点1
Shape2.vertices[1] = new b2Vec2(23.10,20); //顶点2
Shape2.vertices[2] = new b2Vec2(-23.10,20); //顶点3
Shape2.localPosition.Set(0, 30); //偏移量
Shape2.density = 1.0; //密度
Shape2.restitution = .3; //弹性
Shape2.friction = 1; //摩擦力
//2. 定义物体 b2BodyDef 类
var BodyDef1 = new b2BodyDef();
BodyDef1.position.Set(200, 100); //设置物体的初始位置
BodyDef1.AddShape(Shape1); //物体中加入Shape1
BodyDef1.AddShape(Shape2); //物体中加入Shape2
//3. 将物体添加至world
Body = World.CreateBody(BodyDef1); //在世界中创建物体
//...可用同样流程继续添加物体，再定义一块地板
var Shape3 = new b2BoxDef(); //Shape3:矩形
Shape3.extents.Set(300, 5); //定义矩形高、宽
var BodyDef2 = new b2BodyDef();
BodyDef2.position.Set(200, 500); //设置物体的初始位置
BodyDef2.AddShape(Shape3); //物体中加入Shape3
Body2 = World.CreateBody(BodyDef2); //在世界中创建物体
// 定义物体
var vbox = new b2BoxDef();
vbox.extents.Set(10,90);
var bodyVbox = new b2BodyDef();
bodyVbox.position.Set(150,450);
bodyVbox.AddShape(vbox);
vbox.density = 1.0; //密度
vbox.restitution = .3; //弹性
vbox.friction = 1; //摩擦力
bodyVbox = World.CreateBody(bodyVbox);
var vbox1 = new b2BoxDef();
vbox1.extents.Set(10,60);
vbox1.density = 1.0; //密度
vbox1.restitution = .3; //弹性
vbox1.friction = 1; //摩擦力
var bodyVbox1 = new b2BodyDef();
bodyVbox1.position.Set(200,450);
bodyVbox1.AddShape(vbox1);
bodyVbox1 = World.CreateBody(bodyVbox1);
var vbox2 = new b2BoxDef();
vbox2.extents.Set(10,30);
vbox2.density = 1.0; //密度
vbox2.restitution = .3; //弹性
vbox2.friction = 1; //摩擦力
var bodyVbox2 = new b2BodyDef();
bodyVbox2.position.Set(280,470);
bodyVbox2.AddShape(vbox2);
bodyVbox2 = World.CreateBody(bodyVbox2);
}
绘制重力世界
//计算和绘制世界的下一帧
function step(){
var dt = 1/60;
//迭代次数，影响物体碰撞的计算精度，太高会导致速度过慢
var iterations = 10;
//计算dt秒之后世界中物体的位置
World.Step(dt,iterations);
//绘制世界
drawWorld();
}
//绘制世界
function drawWorld(){
//绘制之前将上一帧的内容清除
context.clearRect(0, 0, canvasWidth, canvasHeight);
//遍历世界中的物体
for (var b = World.m_bodyList; b; b = b.m_next) {
//遍历物体中的形状
for (var s = b.GetShapeList(); s != null; s = s.GetNext()) {
this.drawShape(s); //绘制一个形状
}
}
}
Html5-Canvas-JS模拟抛物线 (2011-09-21)
今天用HTML5+Canvas+js 模仿”愤怒的小鸟“做了个效果
首先先计算抛物线，判断落地后反弹，自由落体
在上一篇关于JS自由落体，可以先了解一下
先上个 栗子(看Demo)
本文出处 http://www.nonb.cn/blog/html5-canvas-js-parabola.html (写点寂寞) 欢迎转载，转载请注明出处.
//@desc: 模拟抛物线
//@author:fzxa
//@create: 20110921
//@blog: nonb.cn
;(function(){
drawCtx();
function drawCtx(){
var x = 580;
var y = 326;
var ctx = document.getElementById('ctx').getContext('2d');
var backgroundForestImg = new Image();
ctx.clearRect(0, 0, x, y);
backgroundForestImg.src = "./bg.jpg";
backgroundForestImg.onload=function(){
ctx.drawImage(backgroundForestImg,0,0,580,326);
}
console.log(ctx);
}
})(this);
function demo(x, y, a, t) {
var f = document.getElementById('fall');
/*
var Vx = x,
Vy = parseInt(y),
g = a,
t = parseInt(t),
h = 0,
l = 0,
Sx = 0,
Sy = 0;
*/
var Vx = x,
Vy = parseInt(y),
g = a,
t = parseInt(t),
h = 0,
l = 0,
Sx = 0,
Sy = 0;
console.log('Vx:'+Vx+' Vy:'+Vy+' g:'+g+' t:'+t+' h:'+h+' l:'+l+' Sx:'+Sx+' Sy:'+Sy);
var i = setInterval(function() {
if (f) {
Sx += Vx * t;
l = Sx;
Vy += g * t;
h += Vy * t;
console.log('X轴:'+l+' Y轴:'+h+' Vy:'+Vy);
f.style.left = l + 'px';
f.style.top = h-Vy + 'px';
if (h>=-2) {
Vy *= (Vy > 1) ? -0.6 : 0;
Vx = Vx/1.5
if(Vy == 0) clearInterval(i);
}
}
},
t);
}
JS自由落体运动 (2011-09-20)
用JS模拟一下效果
这里用到了一些物理知识，先上栗子 (看Demo)
//@desc: 自由落体运动
//@author:fzxa
//@create: 20110921
//@blog: nonb.cn
var h = 0, v = 1;
var i;
function loop() {
var fps = document.getElementById('fps').value;
i = self.setInterval("niao()", fps);
}
function niao() {
var f = document.getElementById('fall');
var r = parseInt(f.style.right) - h;
var b = parseInt(f.style.bottom) - v;
var view = document.getElementById('view');
document.getElementById('b').innerHTML='b'+b+' r'+r;
f.style.right = r + 'px';
f.style.bottom = b + 'px';
if (b > -210) {
v += 2;
view.innerHTML+='-----b > -210:------
';
} else {
view.innerHTML+='-----当b小于-210时:------
';
h = (v > 9) ? v * 0.2 : 0;//偏移量
v *= (v > 9) ? -0.6 : 0;
if(v == 0){
clearInterval(i);
}
}
view.innerHTML+= 'r:'+r+' b:'+b+' v:'+v+' h:'+h+'
';
}
function start(){
initcfg();
loop();
}
function quit(){
clearInterval(i);
}
function initcfg(){
var f = document.getElementById('fall');
f.style.right = '-300';
f.style.bottom = '-46';
h = 0, v = 1;
document.getElementById('view').innerHTML='';
}
牛。。求源码分享，正在学习中，，
