2012年9月6日
html5指南--2.操作Document metadata
摘要： 今天的内容是关于如何操作document对象。 1.操作Document Metadata 首先我们来看看相关的属性：characterSet：获取当前document的编码方式，该属性为只读；charset：获取或者设置当前document的编码方式；compatMode：获取当前document的兼容模式；cookie：获取或者设置当前document的cookie对象；defaultCharset：获取浏览器默认的编码方式；defaultView：获取当前当前document的window对象；dir：获取或者设置当前document的文本对齐方式；domain：获取或者设置当前... 阅读全文
posted @ 2012-09-06 14:11 下一站永远 阅读(1580) 评论(0) 推荐(1)
2012年9月5日
html5 canvas--2.猜字母游戏
摘要： 今天我们要用canvas制作一个猜字母的小游戏，先来张效果图。 游戏设计很简单，系统会随机从a-z的26个字母中选择一个保存起来，你键盘输入一个字母，系统会提示你正确字符比你当前输入字母小还是大，直到你输入正确的字母游戏才结束。 下面介绍js代码中需要用到的一些变量及其他们的含义，系统会在开始的时候初始化这些变量。guesses：用户猜字母的次数；message：帮助玩家如何玩游戏的说明；letters：保存26个英文字母的数组；today：当前时间；letterToGuess：系统选中的字母，也就是你需要猜中的字母；higherOrLower：提示用户当前输入的字母比答案大还是小；l... 阅读全文
posted @ 2012-09-05 16:12 下一站永远 阅读(2058) 评论(0) 推荐(0)
2012年9月4日
html5指南--1.html5全局属性（html5 global attributes）
摘要： 今天开始一个全新的关于html5系列课程，是我读《The Definitive Guide to HTML5》的学习笔记。我会把自己觉得里面不错的章节，或者有意义的内容进行整理，以供大家学习。 一个元素可以定义自己的属性，比如a标签定义href属性，这种叫局部属性（local attribute）。相对应的我们可以通过全局属性（global attribute）为所有元素设置共有的行为，当然你也可以为单独元素设置全局属性，只是这样做没有太大的意义。下面我将逐一介绍这些全局属性。 下面的例子在chrome浏览器中运行正常，有些例子firefox不能运行，其他浏览器我没有测试，所以建议大家... 阅读全文
posted @ 2012-09-04 23:06 下一站永远 阅读(2205) 评论(3) 推荐(2)
2012年9月3日
JavaScript 技巧与高级特性
摘要： 原文地址：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闭包 阅读全文
posted @ 2012-09-03 23:03 下一站永远 阅读(236) 评论(0) 推荐(0)
理解 JavaScript 闭包
摘要： 原文地址：http://www.cn-cuckoo.com/2007/08/01/understand-javascript-closures-72.html要成为高级 JavaScript 程序员，就必须理解闭包。本文结合 ECMA 262 规范详解了闭包的内部工作机制，让 JavaScript 编程人员对闭包的理解从“嵌套的函数”深入到“标识符解析、执行环境和作用域链”等等 JavaScript 对象背后的运行机制当中，真正领会到闭包的实质。原文链接：JavaScript Closures可打印版：JavaScript 闭包目录简介对象属性名解析值的赋予值的读取标识符解析、执行环境和作用域 阅读全文
posted @ 2012-09-03 23:02 下一站永远 阅读(352) 评论(0) 推荐(0)
html5 canvas--1.canvas介绍
摘要： 从今天开始，我们将开始一个关于html5 canvas的系列课程。这个系列是我读《HTML5 Canvas：Native Interactivity and Animation for the Web》后的总结，有兴趣的朋友可以去下载英文原版书籍阅读。这本书通过介绍canvas游戏开发的方式，向我们展现canvas强大的功能，我觉得相当不错，通过阅读这本书我学到了canvas很多的知识。其实canvas本身的api并不多，关键是活学活用，学会对api的组合使用制作出令人难以置信的效果。而这本书就是你学习canvas最好的选择，只可惜他暂时还没有中文版，英文不好的朋友只有再等等了。 大家都... 阅读全文
posted @ 2012-09-03 15:14 下一站永远 阅读(3276) 评论(5) 推荐(3)
jquery动画 -- 8.走马灯效果的制作
摘要： 今天要介绍的是走马灯效果的制作，效果图如下，页面中‘Recent Posts’就是走马灯部分。 现在我们介绍如何制作走马灯，首先定义html页面结构。<div id="outer"> <header> ... </header> <article> ... </article> <aside> ... </aside></div> 走马灯部分的html是通过js实现的，这部分html会添加在上面html header对象下面，生成的html结构如下：<div id=&quo 阅读全文
posted @ 2012-09-03 11:39 下一站永远 阅读(6469) 评论(0) 推荐(4)
2012年8月31日
jquery动画 -- 7.会移动的背景，讲解div+css动画原理
摘要： 今天课程介绍的是移动的背景，顺便讲解下div+css动画的原理。首先还是先介绍如何制作移动的背景效果。 html代码比较简单，我就全贴出来了，稍后介绍js的实现。<!DOCTYPE html><html><head> <title></title> <style type="text/css"> header { display: block; width: 660px; height: 380px; margin: auto; backg... 阅读全文
posted @ 2012-08-31 09:28 下一站永远 阅读(5253) 评论(3) 推荐(3)
2012年8月29日
jquery动画 -- 6.制作带鼠标和键盘引导功能的图片浏览器
摘要： 今天我们要介绍的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 阅读全文
posted @ 2012-08-29 23:03 下一站永远 阅读(1620) 评论(5) 推荐(1)
2012年8月24日
jquery动画 -- 5.单页导航动画效果的实现
摘要： 我们本章要介绍的是单页导航动画效果的实现，感觉有点拗口，其实我也不知道这个效果动画到底叫什么名字合适。 其实他实现的功能还是好理解的，就是有一个母页面，母页面会加载一定数目的子页面，母页面上有各个子页面的link。默认母页面显示第一个子页面的内容，当点击母页面上的链接时，显示相应子页面的内容。这里的母页面和子页面是实际存在的不同页面，但是整个动画实现的结果是，所有页面的切换都是在母页面上实现的，url并没有发生变化。要是大家还不知道是怎么回事，那就下载demo看运行效果吧，一看便知。 好了不说废话了，开始我们的教程。第一步是创建母页面的html代码。<div id="outer 阅读全文
posted @ 2012-08-24 15:50 下一站永远 阅读(2610) 评论(4) 推荐(1)
jquery动画 -- 4.升级版遮罩效果的图片走廊--带自动运行效果
摘要： 我将上一章中了插件做了个小小的升级，实现了自动运行效果，完整代码大家见demo。 主要的变化点有：把‘下一条’、‘上一条’的click事件抽象到一个函数showNext中。添加setInterval，添加selector元素的hover事件。好了，我们一个个的看。showNext函数：//显示函数function showNext(flag) { //隐藏导航 $(config.selector).find('a').css('display', 'none'); //创建遮罩 $.tranzify.createOverlay(config); 阅读全文
posted @ 2012-08-24 09:12 下一站永远 阅读(2138) 评论(1) 推荐(1)
2012年8月23日
jquery动画 -- 3.创建一个带遮罩效果的图片走廊
摘要： 今天我们要完成的是一个带有遮罩效果（补间动画）的图片走廊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 阅读全文
posted @ 2012-08-23 14:20 下一站永远 阅读(2208) 评论(10) 推荐(4)
2012年8月21日
jquery动画 -- 2.元素坐标动画效果（创建一个图片走廊）
摘要： 今天文章的内容是关于使用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=" 阅读全文
posted @ 2012-08-21 17:28 下一站永远 阅读(1705) 评论(5) 推荐(2)
2012年8月19日
webstorm配置node.js--webstorm下载配置node失败解决办法
摘要： webstorm下载配置node失败解决办法 阅读全文
posted @ 2012-08-19 11:28 下一站永远 阅读(9092) 评论(20) 推荐(2)
2012年8月17日
jquery插件制作 -- 6.手风琴Panel
摘要： 我们今天要做的是手风琴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> < 阅读全文
posted @ 2012-08-17 10:25 下一站永远 阅读(1887) 评论(2) 推荐(0)
2012年8月16日
jquery插件制作 -- 5.提示框插件
摘要： 今天我们介绍的是提示框插件tooltip的制作，其中还会介绍到自定义选择器插件的开发。 我们首先来介绍自定义选择器的开发，他的代码结构如下：(function ($) { $.expr[':'].customselector = function (object,index,properties,list) { //code };})(jQuery);调用时候的写法：$(a:customselector) 现在我们先解释下函数中所使用到的各个参数。 object：当前dom元素的引用，而不是jquery对象。需要强调的一点，dom元素和jquery对象完全不... 阅读全文
posted @ 2012-08-16 12:52 下一站永远 阅读(1344) 评论(1) 推荐(1)
2012年8月15日
jquery插件制作 -- 4.自增长输入框
摘要： 本章我们将创建一个自增长的输入框插件，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> < 阅读全文
posted @ 2012-08-15 17:21 下一站永远 阅读(924) 评论(0) 推荐(0)
jquery动画 -- 1.加载指示器
摘要： 该系列文章是我阅读《jQuery 1.4 Animation Techniques》后的总结，有兴趣的朋友可以去看原版书籍。 动画效果对于丰富网站的交互体验起到了不可或缺的作用，他可以让你的站点更酷，更吸引人。什么时候使用动画： 1.当显示或隐藏页面、弹出框或内容区域的时候； 2.当一些内容从页面的一个地方移动到其他地方的时候； 3.当页面中的一些内容，应用户的操作而产生状态改变的时候； 4.当一些内容在几种状态间转变的时候； 5.引导用户去执行某些操作，或者引起他们对某些很重要信息注意的时候。什么时候不应使用动画： 1.当某些操作是需要用户频繁重复操作的时候； 2.当设备... 阅读全文
posted @ 2012-08-15 13:57 下一站永远 阅读(2331) 评论(3) 推荐(1)
jquery插件制作 -- 3.表单验证
摘要： 今天的内容是关于表单验证插件的制作。表单验证控件实现的主要功能是，当表单提交的时候检查必填项是否正确填写，同时根据需要验证输入信息是否符合规范。 先下页面代码：<!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> & 阅读全文
posted @ 2012-08-15 11:37 下一站永远 阅读(2219) 评论(5) 推荐(1)
2012年8月14日
jquery插件制作 -- 2.图片走廊:gallery
摘要： 本文主要内容是讲解图片走廊-gallery的实现。 首先创建jquery.gallery.js的插件文件，构建程序骨架。(function ($) { $.fn.gallery = function () { return this.each(function () { var self = $(this); self.click(function () { }); }); }})(jQuery); 创建html文件，使用... 阅读全文
posted @ 2012-08-14 22:16 下一站永远 阅读(2703) 评论(4) 推荐(2)