基于jQuery淡入淡出可自动切换的幻灯插件

小春    技术, 效果    

新页面查看原文

基于jQuery淡入淡出可自动切换的幻灯插件,原型是前几天写的一个幻灯效果,因为一个小bug卡了两天,然后清空之前写的代码,重新整理思路写出来的. 思维是个很诡异的东西,一旦陷入某个死角,很难逃出. 惟有冷却一些时间,完全抛开旧的思维,才能找到新的出路.
其实就是一个幻灯效果,考虑到使用方便,就封装成一个插件了.
插件特点
1. 参数高度自定义;
2. 可重复调用且与不影响;
3. 插件文件小,压缩后仅1.04k,开发版3.29k.

演示及下载
点此查看DEMO | 点此下载插件

read more

jQuery打造动态渐变按钮

小春    图文, 技术, 效果     JQuery

这是写给web设计者和前端开发者的教程，我们将演示如何使用Photoshop创建按钮的sprite图，然后是如何使用jQurey打造动态渐变效果。
本教程分为以下四步：
第一步：Photoshop
第二步：HTML/CSS
第三步：JavaScript(jQuery)
第四步：CSS修改

最终结果如下：

您可以点击查看演示，也可以点击下载源代码。

read more

JQuery正式发布1.4版本

小春    技术     css, JQuery

文章来源：css9.net
JQuery中文文档API资源：AjaxA.cn

为庆祝jQuery的四周年生日，jQuery官方团队正式发布了jQuery的1.4版本。在这个版本中，jQuery官方团队做了大量的编码、测试和文档工作，相对之前版本自然改进不少，让我们一起来看看有那些新变化吧。

本文分上下两篇，上篇主要总体介绍jQuery 1.4版本的相关使用及更新，下篇通过一些代码示例来展示更新的方法及新添加的方法。

【下载及调用】

像以往一样，官方提供了jQuery的两份拷贝，一份是压缩版本（使用Google Closure Compiler压缩，之前使用的是YUI），另一份是未压缩版本（用来调试和阅读）。

• jQuery压缩版本（23kb，gzip压缩后）
• jQuery未压缩版本（154kb）

通过google服务器加载jQuery，提高加载速度。我们依然可以通过Google的服务器调用压缩后的jQuery 1.4版本文件，如下：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
 type="text/javascript"><!--mce:0--></script>

【新特性及变化】

在jQuery 1.4中，许多常用的jQuery方法被重写，这些改进不仅更易用，也带来了性能的显著提升。

read more

有关阿凡达的所有秘密

小春    图文, 故事, 电影     avatar, 卡梅隆, 阿凡达

译者：海的微笑  美兰天空

原文地址：http://article.yeeyan.org/view/8528/71761

卡梅隆的科幻心结

1977年，22岁的卡车司机詹姆斯•卡梅隆和一个伙计去看《星球大战》。朋友陶醉于电影之中不能自拔；卡梅隆却离开电影院准备打拳击发泄一下。他是个大学辍学生，整天在南加利福尼亚奥兰治县开车运送校餐。但闲暇的时候，他绘制小模型还写科幻小说——发生在遥远星系的故事。现在他面临一个令人泄气的现实：他白日梦中幻想的世界已经被卢卡斯带入生活。《星球大战》应该是他的作品才对。

这事真让他生气，于是他自己买了一些廉价摄影器材，试图还原卢卡斯的拍摄过程。他在客厅中打出刺眼的明亮光线，让摄像机沿一条轨道滚动来演练推拉摄影，这一切都令他的妻子怒不可遏。他数天逡巡于南加州大学图书馆，阅读所有相关特效的书籍。他变得，用他自己的话说，“彻底痴迷。”

他很快意识到自己需要一些资金，于是他说服了一群当地牙医，为他号称卡梅隆版本《星球大战》的制作投资20,000美元。他伙同一个朋友写了名为《世代交替》的剧本，把钱都用在一个12分钟射击片断的拍摄上，凸显外星机器人和一个操作大量骷髅的女人之间的单格拍制打斗场景。（那些骷髅战士就是卡梅隆小心翼翼装配出的模型。）

原计划是利用这段剪辑赢得摄影棚，然后拍出全长影片。但在好莱坞兜售了好几个月后，卡梅隆空手而归，不得已将叫板卢卡斯的野心暂时搁置。

只好付诸努力做一些有价值的事了：在B级片之王罗杰•科曼手下打工。卡梅隆受雇为电影《世纪争霸战》打造微缩太空飞船，他用自己的方式日渐上位，后来成为科曼旗下的虚拟视觉效果专家之一。1981年，他登上导演宝座，监督制作了一部劣质恐怖片，食人鱼II：繁殖 。
　　
一天晚上，开完《食人鱼》编辑会之后，卡梅隆发着高烧睡着了，梦见自己看见一个机器人张牙舞爪走向一个惊恐的女人。场面定格于此。其后一年间，卡梅隆以这个梦中场景为基础完成了一个剧本，讲述一个机器人刺客穿越时光及时杀死未来叛军领袖的母亲。

这一次，他不再需要牙医投资。故事编得相当令人信服，他能够说服一家小电影融资公司出资由他执导此片。当1984年影片上映时，《终结者》一举奠定了阿诺德•施瓦辛格的巨星地位，而詹姆斯•卡梅隆，这位曾经的卡车司机，则摇身一变成为一名顶级大导演。
　　
在接下来的十年中，卡梅隆执导了一系列惊人之作，包括《异形》，《深渊》,《终结者2：末日审判》，还有《真实的谎言》。这些影片全球票房收入达11亿美元，为卡梅隆带来了足够影响力，使他重燃自己关于打造星际史诗的梦想火花。于是1995年，他写了一部长达82页的剧本，讲述当地球沦落为暗淡荒原之后一名瘫痪士兵去一个遥远的星球执行任务。那个被称作潘多拉的外星世界由纳美人（Na’vi）组成，这种狂暴类人族皮肤是蓝色的，长着猫脸，拖着爬行动物一样的尾巴，身高10英尺。潘朵拉星球的大气层对人体有毒害，所以科学家们将纳美族进行了基因工程改造，打造出新物种阿凡达——具有人类意识、并且可以完全受远程控制的生物体。卡麦隆认为电影《阿凡达》将是他的再度问鼎之作。这也是继完成轮船撞冰山的小历险再加上浪漫制作之后他的头一部影片。

《泰坦尼克号》，当然，后来成为有史以来收获最丰的电影。它赢得了包括最佳影片、最佳导演在内的11个奥斯卡奖项。卡梅隆如今可以随心所欲得拍摄电影。那么他做了什么呢？

他人间蒸发了。

自那时起12年卡梅隆都不肯再发行一部好莱坞电影。他录制了一些水下纪录片并搞了一些制作，但很大程度上他远离公众视线之外。期间大多数时候，他很少提及《阿凡达》，也不怎么透露他的拍片计划。

read more

James Cameron’s New 3-D Epic Could Change Film Forever

小春    图文, 故事, 电影     avatar, 卡梅隆, 阿凡达

By Joshua Davis   November 17, 2009  | 11:32 pm  |  Wired Dec 2009

原文地址：http://www.wired.com/magazine/2009/11/ff_avatar_cameron/

In 1977, a 22-year-old truck driver named James Cameron went to see Star Wars with a pal. His friend enjoyed the movie; Cameron walked out of the theater ready to punch something. He was a college dropout and spent his days delivering school lunches in Southern California’s Orange County. But in his free time, he painted tiny models and wrote science fiction — stories set in galaxies far, far away. Now he was facing a deflating reality: He had been daydreaming about the kind of world that Lucas had just brought to life. Star Wars was the film he should have made.

It got him so angry he bought himself some cheap movie equipment and started trying to figure out how Lucas had done it. He infuriated his wife by setting up blindingly bright lights in the living room and rolling a camera along a track to practice dolly shots. He spent days scouring the USC library, reading everything he could about special effects. He became, in his own words, “completely obsessed.”

He quickly realized that he was going to need some money, so he persuaded a group of local dentists to invest $20,000 in what he billed as his version of Star Wars. He and a friend wrote a script called Xenogenesis and used the money to shoot a 12-minute segment that featured a stop-motion fight scene between an alien robot and a woman operating a massive exoskeleton. (The combatants were models that Cameron had meticulously assembled.)

The plan was to use the clip to get a studio to back a full-length feature film. But after peddling it around Hollywood for months, Cameron came up empty and temporarily shelved his ambition to trump Lucas.

The effort did yield something worthwhile: a job with B-movie king Roger Corman. Hired to build miniature spaceships for the film Battle Beyond the Stars, Cameron worked his way up to become one of Corman’s visual effects specialists. In 1981, he made it to the director’s chair, overseeing a schlocky horror picture, Piranha II: The Spawning.

One night, after a Piranha editing session, Cameron went to sleep with a fever and dreamed that he saw a robot clawing its way toward a cowering woman. The image stuck. Within a year, Cameron used it as the basis for a script about a cyborg assassin sent back in time to kill the mother of a future rebel leader.

This time, he wouldn’t need any dentists. The story was so compelling, he was able to persuade a small film financing company to let him direct the picture. When it was released in 1984, The Terminator established Arnold Schwarzenegger as a huge star, and James Cameron, onetime truck driver, suddenly became a top-tier director.

Over the next 10 years, Cameron helmed a series of daring films, including Aliens, The Abyss, Terminator 2: Judgment Day, and True Lies. Generating $1.1 billion in worldwide box office revenue, they gave Cameron the kind of clout he needed to revisit his dream of making an interstellar epic. So in 1995, he wrote an 82-page treatment about a paralyzed soldier’s virtual quest on a faraway planet after Earth becomes a bleak wasteland. The alien world, called Pandora, is populated by the Na’vi, fierce 10-foot-tall blue humanoids with catlike faces and reptilian tails. Pandora’s atmosphere is so toxic to humans that scientists grow genetically engineered versions of the Na’vi, so-called avatars that can be linked to a human’s consciousness, allowing complete remote control of the creature’s body. Cameron thought that this project — titled Avatar — could be his next blockbuster. That is, the one after he finished a little adventure-romance about a ship that hits an iceberg.

Titanic, of course, went on to become the highest-grossing movie of all time. It won 11 Oscars, including best picture and best director. Cameron could now make any film he wanted. So what did he do?

He disappeared.

Cameron would not release another Hollywood film for 12 years. He made a few underwater documentaries and did some producing, but he was largely out of the public eye. For most of that time, he rarely mentioned Avatar and said little about his directing plans.

But now, finally, he’s back. On December 18, Avatar arrives in theaters. This time, Cameron, who turned 55 this year, didn’t need to build half an ocean liner on the Mexican coast as he did with Titanic, so why did it take one of the most powerful men in Hollywood so long to come out with a single film? In part, the answer is that it’s not easy to out-Lucas George Lucas. Cameron needed to invent a suite of moviemaking technologies, push theaters nationwide to retool, and imagine every detail of an alien world. But there’s more to it than that. To really understand why Avatar took so long to reach the screen, we need to look back at the making of Titanic.

read more

揭秘HTML5和CSS3

小春    技术     css, html, 前端

互联网的发展总是在不断地催生新技术的产生，而HTML5和CSS3是最近一直被讨论的热门话题，对于每个互联网开发者尤其是前端开发者而言，都充满了好奇与渴望。那么HTML5和CSS3究竟有哪些让我们眼前一亮的东西呢？我在WebRebuild北京交流会和珍珠奶茶帮上给大家分享了《揭秘 HTML5和CSS3》，PPT在这里：
http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8

HTML5

HTML 5草案的前身名为Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发布。 HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。那么我们来看一下HTML5的技术概览有哪些：

HTML5新增和移除的元素

HTML5新增了很多多媒体和交互性元素如video, audio，在HTML4当中如果要嵌入一个视频或是音频的话需要引入一大段的代码，还有兼容各个浏览器，而HTML5只需要通过引入一个标签就可以，就像img标签一样方便。在页面布局和内容实现方面HTML5新增了很多结构化标签元素以及块级及语义元素，如果你要用HTML表示一个文件的上传进度条，在 HTML5中你可以用progress这个元素来表示，它有一个value属性描述了已经完成了多少任务，还有一个属性max描述了这个任务一共需要多少，还可以通过DOM接口得到这个进度条的position属性(只读)，也就是任务完成的百分比。Youtube在HTML5技术上已经做了一个尝试，http://www.youtube.com/html5(需要翻墙) 是用HTML5做的一个DEMO，从整个页面源代码来看，非常简洁。当然HTML5也对一些元素新增了一些属性，如input和textarea的placeholder属性，相当于输入框的输入提示，script有一个async属性会影响脚本的加载和执行。对于所有的HTML共有的属性我们通常把它称作是“全局属性”，如class, id, tabindex, title，HTML5也新增了一些全局属性，如contenteditable, contextmenu, hidden等属性。HTML5还增加了对于微数据的支持，如HTML5新增的item, itempro, subject等属性。

当然HTML5也移除了一些表示页面展现的元素，如font, center, strike等，这些本应该是CSS来做的，所以还是很好理解的，也移除了一些影响网站可访问性的元素如frame, frameset, noframe以及一些不常用的元素如acronym，而采用abbr来表示缩写。HTML5还移除了一些影响客户端兼容性的HTML熟悉，如link的rev属性，td的scope属性；HTML5也移除了一些表示页面展现的属性如一些元素的align,bgcolor属性。

HTML5对表单的支持

HTML5 提供了强大的控件类型如url, email, date, tel等，强大的约束属性，如required表示必填，文件上传的accept属性，以及一些表单重复元素模型的支持，HTML5在提交表单的时候还可以设置提交的方式为XML提交方式，这样服务器端接收到的数据将是XML格式，HTML5的表单被定义为“Web Forms 2.0”，目前opera9.5+对Web Forms 2.0的支持较为完美。

点此查看Web Forms 2.0 DEMO，需要Opera9.5+

HTML5 DOM变化

HTML5在DOM LEVEL 2 HTML方面很多都是继承自HTMLDocument的接口，当然HTML5在DOM上也有一些值得注意的新成员，如：支持 getElementsByClassName，可以根据class类名选择元素，getSelection()将会返回当前选中的对象，在选择器上面有两个方法querySelector和querySelectorAll可以根据 css选择符来获取要查询的元素，相当于YUI3中的Y.one和Y.all。

read more

JQuery toggle使用分析

小春    技术     JQuery

今天针对这个JQuery里面的toggle聊几句，文章中涉及到了一些问题望牛牛们能帮忙解惑一下。
今天重点一个toggle(fn,fn,….)函数,主要是用来切换某个事件的轮换操作。
比如：对一个按钮的点击事件和一个DIV的背景，点击一次按钮，将DIV的背景显示为蓝色，点击第二次的时候要将DIV的
背景色改为黑色。
我们定义的HTML代码如下：

定义的最初的样式如下： 

read more

学车

小春    未分类     汽车

         有一天，下班坐在公司的班车上，由于前方路段车多拥堵，车辆行驶缓慢，于是我就在想学车这个事情。从二零零七年一直到现在了，当时想和同事一起去学的，但同事都学完了，我这还没有开始呢。不行，零九年一定要把车学了。又咨询了一下同事石，她帮我介绍了一个人。那个人姓陈，此处可以称呼其为陈先生。之后又与陈先生联系了一下，说可以帮我约车，这样在约车这个环节上就不用太操心。约定周末去报名，报名时会问到是通过什么样的方式得知东方时尚驾校的，这个时候就说是陈先生介绍的就可以了。当然大家都会知道，学校是会给陈一些奖励的，哈哈哈。

         二零零九年十一月七日周末，将准备好的九张一寸照片还有身份证携带好，去了东方时尚驾校的报名中心，说陈先生推荐前来报名学车，交完了学车费用，安排了定于十一月十四日，十五日两个全天的法培课程，领取学交规的书和一些驾校班车、驾校简介的一些小册子就出来，至此报名工作就结束了，学车的过程就从此时开始了。报完名还要和陈先生说一下，以通知他报名结束，今后工作中就要操心帮我约车了，呵呵呵。

         二零零九年十一月十四日，十五日两天，一共十六节课，培训老师做了关于交通法规的培训课程，还把考试中常见一些问题做了补充，当然主要知识还是在书里，讲得最多的还是法规，结课时把考试中主要考试的内容在书里标注了一下，复习的题大约有一千多的量，主要是由选择题和判断题构成。考试中选择题为四十个，判断题为六十个，九十分及格。一个班有二百多位学员，前一百号定于十一月十九日上午八点开考，后一百号定于十一月十九日上午九点开考。

read more

hasLayout

小春    技术     css, hasLayout

　　要想更好的理解 css， 尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清除的概念。大多IE下的显示错误，就是源于 haslayout。
　　什么是 haslayout ？
　　haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）
　　当一个元素有一个布局时，它负责对自己和可能的子孙元素进行尺寸计算和定位。简单来说，这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。因此，一些元素默认会有一个布局。当我们说一个元素“拥有layout”或“得到layout”，或者说一个元素“has layout” 的时候，我们的意思是指它的微软专有属性 hasLayout 被设为了 true。一个“layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout的元素。如果某个HTML元素拥有 haslayout 属性，那么这个元素的 haslayout 的值一定只有 true，haslayout为只读属性 一旦被触发，就不可逆转。通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout，在 IE Developer Toolbar 下，拥有 haslayout的元素，通常显示为“haslayout = -1”。

read more

业余羽毛球的等级，对号入座!

小春    图文, 故事     羽毛球

业余零级：没有打过羽毛球
业余一级：经常在马路边广场上等露天地方打球，对风向没有要求！不要求场地和球网，对球拍没有要求。并时常在这种地方被人家打得满地找球。
业余二级：经常在马路边广场上等露天地方打球，对风向要求不高！不要求场地和球网，对球拍没有要求，时常打得别人满地找球！认为自己的羽毛球打的不错或很好，经常向人炫耀！不收看羽毛球赛！
业余三级：喜欢到地上画线的露天地打球，要求有球网，但不知道球网多高！刮风的时候不打球！认为自己的羽毛球打得很好，总是向人炫耀！偶尔收看球赛，觉得很热闹，很好看！
业余四级：喜欢到室内的羽毛球场打球，知道打羽毛球很贵，知道球拍的正确握法。有自己的球拍。知道球拍可以买一支而不是买一付，知道球拍的线断了可以再拉！经常收看电视转播的球赛！知道自己羽毛球打得不好！
业余五级：不到室外打球。经常在上课或上班时想关于羽毛球的事，用QQ联系球友。喜欢杀球。开始关注器材问题，对球拍和拉线有自己的要求！同时对衣服鞋子等装备产生需求！只知道别人打得好，不知道自己那里打得不好！关注电视转播的每场比赛并录制成带！有机会打球决不放过。能随口说出n多球员的名字和使用器材。希望自己的孩子将来成为专业队员。开始进入迷恋阶段！
业余六级：开始关注自己的技术细节，要求自己动作更细腻，失误更少！开始使用假动作。能够准确判断对手的实力和缺点，能够精准分析自己赢球或输球的原因。开始接触专业选手并与之过招！知道自己所在地区（市级）的高手！有自己不喜欢的球员。知道那个月有什么样的公开赛可以看！
业余七级：经常和专业选手过招，并偶尔赢上一局。获得过所在市级业余羽毛球赛的前五名！对于器材只要求球，拍，线。但对于场地要求很高，能够感觉到体育馆内的风向！只观看重大比赛，并能指出国际级选手的优缺点！
业余八级：获得过省级业余羽毛球赛前五名。经常和专业选手过招，一般的专业队员不是其对手！对于羽毛球界非常熟悉，知道全国有哪些是高手，能够叫出每个省的教练的名字。对于奥运冠军的签名不屑一顾！