摘要：
今天的内容是关于如何操作document对象。 1.操作Document Metadata 首先我们来看看相关的属性：characterSet：获取当前document的编码方式，该属性为只读；charset：获取或者设置当前document的编码方式；compatMode：获取当前document的兼容模式；cookie：获取或者设置当前document的cookie对象；defaultCharset：获取浏览器默认的编码方式；defaultView：获取当前当前document的window对象；dir：获取或者设置当前document的文本对齐方式；domain：获取或者设置当前... 阅读全文
摘要：
今天我们要用canvas制作一个猜字母的小游戏，先来张效果图。 游戏设计很简单，系统会随机从a-z的26个字母中选择一个保存起来，你键盘输入一个字母，系统会提示你正确字符比你当前输入字母小还是大，直到你输入正确的字母游戏才结束。 下面介绍js代码中需要用到的一些变量及其他们的含义，系统会在开始的时候初始化这些变量。guesses：用户猜字母的次数；message：帮助玩家如何玩游戏的说明；letters：保存26个英文字母的数组；today：当前时间；letterToGuess：系统选中的字母，也就是你需要猜中的字母；higherOrLower：提示用户当前输入的字母比答案大还是小；l... 阅读全文
摘要：
今天开始一个全新的关于html5系列课程，是我读《The Definitive Guide to HTML5》的学习笔记。我会把自己觉得里面不错的章节，或者有意义的内容进行整理，以供大家学习。 一个元素可以定义自己的属性，比如a标签定义href属性，这种叫局部属性（local attribute）。相对应的我们可以通过全局属性（global attribute）为所有元素设置共有的行为，当然你也可以为单独元素设置全局属性，只是这样做没有太大的意义。下面我将逐一介绍这些全局属性。 下面的例子在chrome浏览器中运行正常，有些例子firefox不能运行，其他浏览器我没有测试，所以建议大家... 阅读全文
摘要：
原文地址：http://www.ibm.com/developerworks/cn/web/wa-lo-dojoajax1/?S_TACT=105AGX52&S_CMP=tec-csdn#code5文章内容：null 与 undefinedif ("" || 0)== 与 ===Arrayargumentsprototype 与继承thisneweval执行上下文和作用域链function对象的创建方式with闭包 阅读全文
摘要：
原文地址：http://www.cn-cuckoo.com/2007/08/01/understand-javascript-closures-72.html要成为高级 JavaScript 程序员，就必须理解闭包。本文结合 ECMA 262 规范详解了闭包的内部工作机制，让 JavaScript 编程人员对闭包的理解从“嵌套的函数”深入到“标识符解析、执行环境和作用域链”等等 JavaScript 对象背后的运行机制当中，真正领会到闭包的实质。原文链接：JavaScript Closures可打印版：JavaScript 闭包目录简介对象属性名解析值的赋予值的读取标识符解析、执行环境和作用域 阅读全文
摘要：
从今天开始，我们将开始一个关于html5 canvas的系列课程。这个系列是我读《HTML5 Canvas：Native Interactivity and Animation for the Web》后的总结，有兴趣的朋友可以去下载英文原版书籍阅读。这本书通过介绍canvas游戏开发的方式，向我们展现canvas强大的功能，我觉得相当不错，通过阅读这本书我学到了canvas很多的知识。其实canvas本身的api并不多，关键是活学活用，学会对api的组合使用制作出令人难以置信的效果。而这本书就是你学习canvas最好的选择，只可惜他暂时还没有中文版，英文不好的朋友只有再等等了。 大家都... 阅读全文
摘要：
今天要介绍的是走马灯效果的制作，效果图如下，页面中‘Recent Posts’就是走马灯部分。 现在我们介绍如何制作走马灯，首先定义html页面结构。<div id="outer"> <header> ... </header> <article> ... </article> <aside> ... </aside></div> 走马灯部分的html是通过js实现的，这部分html会添加在上面html header对象下面，生成的html结构如下：<div id=&quo 阅读全文
摘要：
今天课程介绍的是移动的背景，顺便讲解下div+css动画的原理。首先还是先介绍如何制作移动的背景效果。 html代码比较简单，我就全贴出来了，稍后介绍js的实现。<!DOCTYPE html><html><head> <title></title> <style type="text/css"> header { display: block; width: 660px; height: 380px; margin: auto; backg... 阅读全文
摘要：
今天我们要介绍的jquery动画效果是，当移动鼠标或者按键盘的左右键时，图片走廊中的图片向相应方向转动。 先来看张效果图，教程最后附有demo，大家可以下载。 首先要做的工作是创建html文本。<div id="proximity"> <img src="img/proximity1.jpg" alt="CH-47 Chinook" /> <img src="img/proximity2.jpg" alt="Mi-24W" /> <img src=&qu 阅读全文
摘要：
我们本章要介绍的是单页导航动画效果的实现，感觉有点拗口，其实我也不知道这个效果动画到底叫什么名字合适。 其实他实现的功能还是好理解的，就是有一个母页面，母页面会加载一定数目的子页面，母页面上有各个子页面的link。默认母页面显示第一个子页面的内容，当点击母页面上的链接时，显示相应子页面的内容。这里的母页面和子页面是实际存在的不同页面，但是整个动画实现的结果是，所有页面的切换都是在母页面上实现的，url并没有发生变化。要是大家还不知道是怎么回事，那就下载demo看运行效果吧，一看便知。 好了不说废话了，开始我们的教程。第一步是创建母页面的html代码。<div id="outer 阅读全文
摘要：
我将上一章中了插件做了个小小的升级，实现了自动运行效果，完整代码大家见demo。 主要的变化点有：把‘下一条’、‘上一条’的click事件抽象到一个函数showNext中。添加setInterval，添加selector元素的hover事件。好了，我们一个个的看。showNext函数：//显示函数function showNext(flag) { //隐藏导航 $(config.selector).find('a').css('display', 'none'); //创建遮罩 $.tranzify.createOverlay(config); 阅读全文
摘要：
今天我们要完成的是一个带有遮罩效果（补间动画）的图片走廊jquery插件：jquery.tranzify.js。我们先看下效果： 好了，现在我们开始讲解这个jquery动画插件如何制作，大家可以再文章最后下载demo，查看详细代码。 首先开始准备html页面，代码很简单就是一个id为frame的div，里面包含了一些图片。<div id="frame"> <img id="image1" src="img/amstrad.jpg" alt="Amstrad CPC 472" /> <i 阅读全文
摘要：
今天文章的内容是关于使用jquery的animate方法，修改html元素的position属性，创建一个图片走廊。效果预览图片： 大家可以下载demo看完整效果，下面介绍制作过程。 1.首先创建一个html页面，html结构如下：<div id="slider"> <div id="viewer"> <img id="image1" src="img/amstrad.jpg" alt="Amstrad CPC 472" /> <img id=" 阅读全文
摘要：
webstorm下载配置node失败解决办法 阅读全文
摘要：
我们今天要做的是手风琴panel，jquery.ui里面有个叫做accordtion的插件，我们要实现的效果和他一样。 首先我们还是创建一个html文件，里面包含如下的html结构。<div id="pane-container"> <div class="pane"> <h1>first pane</h1> <p>this script should allow only one pane to be visible at a time.</p> </div> < 阅读全文
摘要：
今天我们介绍的是提示框插件tooltip的制作，其中还会介绍到自定义选择器插件的开发。 我们首先来介绍自定义选择器的开发，他的代码结构如下：(function ($) { $.expr[':'].customselector = function (object,index,properties,list) { //code };})(jQuery);调用时候的写法：$(a:customselector) 现在我们先解释下函数中所使用到的各个参数。 object：当前dom元素的引用，而不是jquery对象。需要强调的一点，dom元素和jquery对象完全不... 阅读全文
摘要：
本章我们将创建一个自增长的输入框插件，jquery.aotogrow.js。首先还是看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> <title></title> < 阅读全文
摘要：
该系列文章是我阅读《jQuery 1.4 Animation Techniques》后的总结，有兴趣的朋友可以去看原版书籍。 动画效果对于丰富网站的交互体验起到了不可或缺的作用，他可以让你的站点更酷，更吸引人。什么时候使用动画： 1.当显示或隐藏页面、弹出框或内容区域的时候； 2.当一些内容从页面的一个地方移动到其他地方的时候； 3.当页面中的一些内容，应用户的操作而产生状态改变的时候； 4.当一些内容在几种状态间转变的时候； 5.引导用户去执行某些操作，或者引起他们对某些很重要信息注意的时候。什么时候不应使用动画： 1.当某些操作是需要用户频繁重复操作的时候； 2.当设备... 阅读全文
摘要：
今天的内容是关于表单验证插件的制作。表单验证控件实现的主要功能是，当表单提交的时候检查必填项是否正确填写，同时根据需要验证输入信息是否符合规范。 先下页面代码：<!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> & 阅读全文
摘要：
本文主要内容是讲解图片走廊-gallery的实现。 首先创建jquery.gallery.js的插件文件，构建程序骨架。(function ($) { $.fn.gallery = function () { return this.each(function () { var self = $(this); self.click(function () { }); }); }})(jQuery); 创建html文件，使用... 阅读全文