摘要：转载过来，去掉一些废话吧。目标：方便的拼接字符串，不使用让人眼晕的+＝。使用过程如下：1，先创建一个作为“模板”的字符串，如：’My name is ${name},I\’m ${age}.’2，传一个对象进去，其中包含了你要填进模板的值，如：{name:’LIX’,age:11}3，最后你就能得到... 阅读全文

摘要：这篇文章可以和上一篇函数优先级的文章结合起来看。看下面的代码：if (!("aa" in window)) { alert('oh my god'); var aa = 1; } alert("aa" in window);alert(aa);回答以下问题：会报错吗？会弹出几次？第2个alert是true还是false?第3个alert弹出什么？为什么？思考下，然后测试下，如果你回答正确，那么后面的文章就不用看了。－－－－－－－－－－－－－－－－－－－－－－－－－－－－－在JS里定义变量太简单了，直接一个var ，甚至不用var都可以：v 阅读全文

摘要：此文讨论一下函数声明和函数表达式的一些不同之处，以及最蛋疼的优先问题，是初级文章。之所以写本文是因为在网上看到一篇与此相关的文章，里面给出了结果但没有分析原因，而我自己也对此有些不肯定，所以我决定自己尝试一下，并记录下来，以便以后再也不用思考这类问题。函数声明即function name () {}这样的代码。首先，我们要确定以下代码是完全正确的：t1();function t1(){console.log("t1");}即函数可以提前调用然后再声明。为什么可以这样？是因为javascript代码是一段一段预载的（即一组script标签），在一段代码预载完成后，会把函数声明 阅读全文

摘要：本文属于《html5 Canvas画图系列教程》在canvas中可以很方便的用arc方法画出圆形，本来圆形也可以看作是一个宽高相等的椭圆，但canvas中根本没有画椭圆的方法，我们要用其他方法来模拟。我们首先要明确画一个椭圆需要那些参数，基本的几何知识告诉我们，椭圆需要圆心坐标，宽度，高度——或者还有旋转角度，不过这个可以暂时不要，旋转是比较容易的。1,使用lineTo画椭圆你没有看错，lineTo这样一个纯粹用来画直线的方法居然可以用来画椭圆！？但他确实存在，不过写法实在是有些不可思议：function DrawEllipse(Canvas,O,OA,OB){ //画椭圆，例子：var... 阅读全文

摘要：2013.08.28更新:此次更新是修复上一次更新的遗留问题,即"有返回值的函数无法得到正确的返回值",比如getImageData,isPointInPath等,这个问题是因为为了实现链式语法,函数会总是返回this.其实要修复这个问题是很简单的,就是判断函数执行后是否有返回值,有的话就返回这个返回值,没有就继续返回this(大多数情况下都没有).不过由于这个判断的原因,可能会对整体效率有那么一点点的影响;另外,在使用有返回值的函数后,后续就不能继续链式语法了.另外我把原来的用来放函数名的数组变成了一个字符串,因为这样可以少写很多引号.var XtendCanvas = 阅读全文

摘要：上一篇文章讲了canvas的arc方法，这一篇讲和他有关的arcTo方法。arc与arcTo，从名字都能看出来相似。arcTo也是画曲线的方法，而且他画出的曲线也是正圆的一段弧线。但他的参数和arc简直是不共戴天~ctx.arcTo(x1,y1,x2,y2,radius);arcTo的参数中包括两个点，而且这两个点中并没有表示圆心的点，仅仅最后的参数是圆的半径，表示arcTo和圆有那么点关系。网上关于arcTo的文章很少，好不容易找到一篇还是外国的；而且canvas画图木有直观工具，只能靠猜，arcTo害我猜了半天。。为了直观的描述，我采取了一种辅助办法：arcTo画到哪里，我就用lineTo 阅读全文

摘要：在canvas画线条这篇文章中，我讲了画直线的方法，按理这篇画曲线的文章早该发了，但由于canvas画曲线比较特殊，我还没摸透，所以要一步步尝试。canvas里画曲线的难点之一，就在于他连曲线的函数就有4个！分别是arc,arcTo,quadraticCurveTo,bezierCurveTo.我从最简单的arc方法讲起吧。arc的作用是画一个正规的圆弧，可以是一个完整的圆，也可以是一个圆的某一段弧线。arc的语法如下：context.arc(x, y, radius, startAngle, endAngle, anticlockwise)他的参数我解释一下，即arc(圆心x,圆心y,半径, 阅读全文

摘要：一般绘图的方式有两种，即填充和描边，前面的文章已经讲了描边的方法stroke，本文就讲一下Canvas中填充图形的方法。填充即fill(),很直白吧？而且和strokeStyle表示描边样式一样，fillStyle即表示填充样式。ctx.fillStyle = '颜色';默认的填充样式是不透明的黑色提问：未闭合的路径可以填充吗？可以。Canvas会从你当前路径的终点直接连接到起点，然后填充。如图：但你可以发现，最后一段没有描边。记得我们前一篇文章用4条线画了一个正方形，但canvas不会这么差劲，连直接绘制矩形的函数都没有。你可以使用fillRect()直接填充一个矩形：ctx 阅读全文

摘要：接上一篇canvas画线条教程上次我们讲到，canvas有时候会出现1像素的线条模糊不清且好像更宽的情况，如下图：这样的线条显然不是我们想要的。这篇文章的目的就是弄清楚里面的原理，以及解决它。大家都知道屏幕上最小的显示尺寸就是1像素，虽然小于1像素的东西可能显示不出来，但计算机可不管，他会试着画一下。其实像素终究来说也是一个单位，假如我们把画布放大到足够大，足以看清楚每个像素，会是什么情况呢？大概是这个样子：每个像素都有起止范围，如图所示，他们的范围从左起，跨过1像素，到右止。如果我们画1像素线条的时候，遵循像素的起止范围，那么我们肯定能得到一个很标准的细线。如下：但遗憾的是canvas的线条 阅读全文

摘要：如果你还不知道Canvas是什么，可以看看上一篇.在学画画的时候，线条是最基本的了，而线条的连接可以组成任何图形。在Canvas中也是如此。在开始之前我们先拿出画布和画笔：var cvs = document.getElementById('cvs'); //画布var ctx = cvs.getContext('2d'); // 画笔我们画画的时候，落笔点是不固定的，随时都会变。canvas虽然不是通过手来决定落笔点，但也有一个方法,就是moveTo。moveTo的作用相当于把笔尖提离画布，然后移动到指定的点（即坐标）。ctx.moveTo(x,y)此过程中不 阅读全文

摘要：虽然大家都称Canvas为html5的新标签，看起来好像Canvas属于html语言的新知识，但其实Canvas画图是通过javascript来做的。所以，如果你想学习Canvas画图，你必须要有Javascript基础。另外，画图嘛，总有一些图像方面的术语和知识点，所以如果你有过做图或美工经验，学习Canvas会更容易。Canvas，意为画布也。而Html5中的Canvas也真的跟现实生活中的画布非常相似。所以，把他看成一块实实在在的画布可以加快理解。画布用canvas作画，首先，你需要有一块“画布”。如果你的书架里面没有画布，你可以买一卷回来放进去。当然，在网页里面我们不需要花钱买，直接写 阅读全文

摘要：for循环是非常基础的javascript知识，但由于JS太灵活了，所以可能出现一些让初学者崩溃的写法。我决定由浅入深的解释一下for循环，算是给比我还新手的新手解惑吧，少走弯路。一，for循环的基本写法代码如下：//例一for(var i=0;i<10;i++) { alert(i);}这段代码太简单了，我都不好意思拿出手。代码的执行结果是依次弹出1到10，(更正：0-9）。PS：在早期的IE如IE6中，你把10改成10000，就能让用户一直点确定什么也不能干了哈哈——不要说是我出的主意。由于这是一篇基础课程，所以我们回归正题来详细分析一下这段代码吧。for循环的结构都是类似的，任意一 阅读全文

摘要：下面是一个常规的获取兄弟节点的办法。function siblings(elm) { var a = []; var p = elm.parentNode.children; for(var i =0,pl= p.length;i<pl;i++) { if(p[i] !== elm) a.push(p[i]); } return a;}思路：先获取此元素的父节点的所有子节点，因为所有子节点也包括此元素自己，所以要从结果中去掉自己。还有另外一种看起来比较奇特的方法，是jQuery里面获取兄弟节点的源码：function sibling( elem ) ... 阅读全文

摘要：XMosaic.js是一个用来实现马赛克图片切换效果的JS类。刚又加了一种效果。调用方式如下：var msk = XMosaic('jsF',{pager:'pager',delay:3000,countX:5,countY:5,how:9,order:0 });当然也可以不用变量来保存他。不过用变量保存之后就可以用msk.Next()和msk.Prev()来跳到下一张或上一张（类本身没有上下跳转的参数传递），可以很方便的扩展。试试在文章内直接插入示例： 1234例子插入成功，不过真心累，而且有变形，但不管了。更多效果见上一篇文章的示例页了。下面基本是废话。本来 阅读全文

摘要：新鲜出炉的javascript图片切换特效，实现的是马赛克遮罩切换，这个马赛克不影响“人类文明进步”。在flash里，实现遮罩动画很简单，不过JS实现起来就有些困难了。XMosaic.js，与XScroll.js和XScroll2.js一样，都是用来制作单张图片切换特效的javascript类，不过，迄今为止XMosaic.js实现的特效是最炫的，炫到我以后很长一段时间都不用再写图片切换类了。下面是一个iframe，用来装示例页，免得大家点击外链。注意看示例页下面的切换参数功能，可以浏览更多特效。默认特效是最简陋的。XMosaic.js的使用方法请查看示例页源代码。其中html结构与一般图片切 阅读全文

摘要：常用的办法是给数组原生的sort方法传入一个函数，此函数随机返回1或-1，达到随机排列数组元素的目的。arr.sort(function(a,b){ return Math.random()>.5 ? -1 : 1;});这种方法虽直观，但效率并不高，经我测试，打乱10000个元素的数组，所用时间大概在35ms上下（firefox，下同）本人一直具有打破沙锅问到底的优良品质，于是搜索到了一个高效的方法。原文见此if (!Array.prototype.shuffle) { Array.prototype.shuffle = function() { for(var j, x... 阅读全文

摘要：此刻我的心情是无奈。。。前天我打算写一个支持多图片同时滚动的类——就像某些网站下面展示友情链接那样的滚动。开始前我计划了一下我要实现的功能。切换效果——只有滚动可以单张图片切换，也可以多张图片切换同时显示图片的张数与每次滚动的图片张数可以自定义根据图片总数+同时显示张数+单次滚动张数，自动插入页码关于第3点说明一下，就是比如我容器宽900，每个图片宽300，那无疑，我可以同时显示3张图片；但我可以每次向左滚动1张图片（或者2张，3张），也就是说不一定每次显示几张就必须滚动几张。写到一半，一个让我郁闷一天的问题来了：如何计算出页码总数？有几个数字是已知的：图片总数，每次显示图片数，每次滚动张数。 阅读全文

摘要：先说一种最普遍的思路：把图片们用ul之类的包起来，并设置float。然后设置这个ul本身为absolute定位，其父标签用relative定位。通过设置ul的left或top值，实现图片队列的滚动效果特点：只操作一个html元素（即上文的ul），对系统开销小；滚到头会回滚；从大序号滚动到小序号也会回滚；从最后序号滚动到第一个，会“咻”的一下把所有中间的图片也路过一次。另一种思路就是我在XScroll.js里实现的思路，所有图片用绝对定位。具体看那篇文章吧。XScroll.js完成后，我始终觉得他的系统消耗是个问题，因为他实现一个图片切换基本上都是同时操作两张图片。所以我想写一个精简版的，但又不 阅读全文

摘要：原XScroll发布文见此：http://www.cnblogs.com/lixlib/archive/2012/03/21/javascript-tupian-qiehuan-xscroll_js.html2012-4-13：加入了交错切换效果。看示例页第一个例子——现在我可以说XScroll.js支持17种切换效果了吗。。。还是心虚所谓的交错切换，就是当前图片向左移动，下一张图片向右移动，各自移动到一半时，就都往回移动，但此时图片叠加顺序改变，下一张图片将覆盖当前图片。交错切换也支持4个方向。交错切换的实现思路：首先，不可避免的要同时操作两张图片：当前图片与下张图片，分别叫curS与nex 阅读全文

摘要：匿名函数，就是没有名字的函数。如：function (){ alert('a function');}但是，上面的代码会报错。firebug提示：function statement requires a name，也就是：函数必须要有个名字。奇怪的是，如果我用一对()把这个没有名字的函数包起来，就不会报错了。如：(function (){ alert('a function');})(注意包裹函数的()!).虽然这样不会报错，但谁能知道这个函数是否声明成功了呢？是不是因为根本没声明所以才不报错呢？我们这样来测试：让函数自己执行一次：(function (){ 阅读全文