YAOHAIXIAO.COM

Focus on front end technoloy

垂直无缝滚动图片(兼容性好)实例教程

垂直无缝滚动图片(兼容性好)实例教程

ScrollNews 无缝循环滚动新闻,程序改编至雅虎中国的scrollVertical.js。修改后,新闻可以横向和纵向的滚动,并且滚动添加了加速和减速的平滑过度效果,让整个滚动新闻的滚动看上去更自然。

XMLHTTPRequest的属性和方法简介

由于现在在公司负责制作标准的静态页面,为了增强客户体验,所以经常要做些AJAX效果,也许你也和我一样在,学习AJAX。而设计AJAX时使用的一个重要的技术(工具)就是XMLHTTPRequest对象了。这里海啸把我学习XMLHTTPRequest对象的一点资料拿出来跟大家一起分享。文中的资料都是海啸在学习时在网上收集的,如果您开过,那就再加深下印象吧!

写给想学 Javascript 朋友的一点经验之谈

今天逛论坛时看到有朋友问,是否有专门教Javascript的学校,这里想想把自己的一点建议和自己3年来的前端Javascript开发的经验跟大家分享下,也给出几本个人认为不错的书来做为大家学习的参考资料。当然只是个人的经验,有什么不对的也请高手见谅和指正。

谈点关于checkbox的事情

今天在开发一个手机短信通讯录的前端界面时,界面中使用了checkbox,来做为各项的选择控件,但是操作时,除了点差子。由于逻辑需要,需要预先选中用户上次选中的那些项目。但是当我使用javascript dom编程时,在IE系列浏览器中,直接在创建checkbox控件的时候无法让他默认选中。

使用面向对象的技术创建高级 Web 应用程序

最近,我面试了一个有五年 Web 应用程序开发经验的软件开发人员。四年半来她一直在从事 JavaScript 相关的工作,她自认为 JavaScript 技能非常好,但在不久之后我就发现实际上她对 JavaScript 知之甚少。话虽这样说,但我确实没有责备她的意思。JavaScript 真的是很有趣。很多人(包括我自己,直到最近!)都认为自己很擅长 JavaScript 语言,因为他们都知道 C/C++/C#,或者有一些以前的编程经验。

Douglas Crockford 谈 Ajax 性能

这是Douglas Crockford在圣诞节前的一个讲座。我觉得对于前端工程师来说算是一个“新年大片”。英文好的建议直接去看原文http://ericmiraglia.com/blog/?p=140感谢Eric Miraglia提供了完整的文字记录。

Crock先用《记忆碎片》这部电影作为引子。我还没看过,一定要找来看看。

JavaScript 程序编码规范

这是一套适用于JavaScript程序的编码规范。它基于Sun的Java程序编码规范。但进行了大幅度的修改, 因为JavaScript不是Java。

软件的长期价值直接源于其编码质量。在它的整个生命周期里,一个程序可能会被许多人阅读或修改。如果一个程序可以清晰的展现出它的结构和特征,那就能减少在以后对其进行修改时出错的可能性。编程规范可以帮助程序员们增加程序的健壮性。

Javascript风格要素(1)

程序设计是困难的,其核心是管理的复杂性。计算机程序是人类做出的最复杂的东西。质量是不可靠的且隐蔽的。好的体系架构是必需给程序足够的结构使其健壮而不会陷入混乱的泥淖,但我们表达一个程序细节的方式是同等重要的。一个程序的本质会被不良的编码所隐藏。只有当一个程序的表达清晰时,我们才能有希望正确的推理出它的效率、安全和正确性。

Javascript风格要素(2)

我们使用习惯用法可以使我们的意图更加的清晰和简洁。

使用==时,当心强制转换

考虑下面函数:

function gw(f) {
 if (d.w.sv.checked == true) {
  zv = 'on';
 } else {
  zv = 'off';
 }
 procframe.location.replace("http://b.www.yahoo.com/module/wtr_tr.php?p=" +
 escape(f.p.value) + "&sv=" + zv);
 return false;
}

如何提升JavaScript的运行速度(DOM篇)

程序设计是困难的,其核心是管理的复杂性。计算机程序是人类做出的最复杂的东西。质量是不可靠的且隐蔽的。好的体系架构是必需给程序足够的结构使其健壮而不会陷入混乱的泥淖,但我们表达一个程序细节的方式是同等重要的。一个程序的本质会被不良的编码所隐藏。只有当一个程序的表达清晰时,我们才能有希望正确的推理出它的效率、安全和正确性。

如何提升JavaScript的运行速度(递归篇)

影响 JavaScript性能的另外一个杀手就是递归,在上一节中提到采用memoization技术可以优化计算数值的递归函数,但memoization 不是万能的,不是所有的递归函数都可以用memoization技术优化,本文介绍了这些情况,并介绍了解决办法,就是将递归转换为迭代,同时需要注意,本文末尾介绍的方案不是最终的方案,还需要和上一节优化循环的方案综合起来才能达到最佳效果。

如何提升JavaScript的运行速度(函数篇)

上周我在《too much happening in a loop》(译文)这篇文章中介绍了JavaScript运行时间过长的第一个原因。相似的情况有时也出现在函数的定义上,函数也可能因为使用不当而过载使用。通常情况是函数内包含了过多的循环(不是在循环中执行了过多的内容),太多的递归,或者只不过是太多不相干但又要一起执行的操作。

如何提升JavaScript的运行速度(循环篇)

根据Nicholas的说法,有四种代码会拖慢脚本的运行,并最终导致脚本失控。分别是次数过多的同步循环、庞大的函数体、不恰当的递归和不合理的DOM调用。这篇着重讲第一个原因。最后给出了一个开发模式,替换传统的循环结构,可以完全避免脚本失控的状况发生。

浏览器根据什么来判定脚本失控?

Web 开发者经常遇到并必须及时处理的问题就是“提示脚本运行时间过长的提示框”(或者称为“失控脚本提示”),这些令人讨厌的对话框会在你的脚本执行时间过长的时候出现。对于Web开发者的基本准则就是,无论什么时候,都不要让用户看到这些对话框,因为这会给人一种代码缺乏结构化的印象,更简单的说,你的代码负担太重了。

ScrollNews 无缝循环滚动新闻

ScrollNews 无缝循环滚动新闻 - base on scrollVertical.js

ScrollNews 无缝循环滚动新闻,程序改编至雅虎中国的scrollVertical.js。修改后,新闻可以横向和纵向的滚动,并且滚动添加了加速和减速的平滑过度效果,让整个滚动新闻的滚动看上去更自然。

YCalendar - 日历控件

YCalendar - 日历控件

YCalendar - 日历控件,这个控件是在《Javascript设计模式》一书中第十三章《享元模式》的 Web日历代码的基础上修改扩展出来的。基本实现了一个简单的日历控件的功能,setYear()方法显示年历,setMonth()方法显示月历。程序还不很完善,仅供大家学设计模式参考之用。当然你也可以完善这个控件作为开发使用,我以后也会完善它的。

YImageHover - 鼠标划过小图显示大图

YImageHover - 鼠标划过小图显示大图

YImageHover - 鼠标划过小图显示大图,一个普通的鼠标划过小图显示大图的程序。调用简单,比较实用,兼容性好。

YAdBox - 固定浮动广告特效

YAdBox - 固定浮动广告特效

YAdBox - 固定浮动广告特效,自己写的一个独立的浮动广告类,基本的功能都有了,很好用的,可以设置自定义显示位置和显示时间,如果你想类似的广告效果,这个应该是一个不错的选择。

YLogger v1.1.0 Beta

YLogger v1.1.0 Beta

YLogger v1.1.0 Beta,这个小程序也是大概是两年前写的,在Messagebox模拟提示框效果后写的,就是为了方便开发AJAX程序的调试用的。在页面中直接加载Logger跟踪框,免去了使用alert()方法在循环时不停点击的烦恼。今天花了点时间也用YaoUI重新写了下,但是还是没有做任何的优化。不过已经可以适应一般的调试提示信息了。当然绝对没有firebug或者firebug lite那么牛,但是也算是自己开发工具的一个初步的尝试吧。

YMessageBox v1.1.0 Beta

YMessageBox v1.1.0 Beta

YMessageBox v1.1.0 Beta,大概是两年前写的一个Messagebox模拟提示框效果,现在用的YaoUI重新写了下,但是没有做任何的优化,不过看上去还不错,在使用Ajax程序时,用这个模拟提示窗口应该比浏览器自带的提示框看上去更亲切。(声明:YAO.Drag完全修改自www.youngpup.netdomdrag.js,由Dynamic Drive编辑和优化过。)

YAlbum 相册

YAlbum 相册

YAlbum 相册,我用我自己写个YaoUI代码库实现一个论相册效果,调用简单,兼容性好,本人强烈推荐的哦!

YLightBox - 论坛相册特效

YLightBox - 论坛相册特效

YLightBox - 论坛相册特效,我用我自己写个YaoUI代码库实现一个论坛的相册效果,这个特效很适合论坛题图板块的图片展示。调用简单,兼容性好。

newsCarousel - 滚动新闻特效

newsCarousel - 滚动新闻特效

newsCarousel - 滚动新闻特效,我用我自己写的YaoUI代码库,模仿的YAHOO.COM新版首页的一个滚动新闻效果,新闻滚动的瞬间加载JSON数据。功能实用,调用简单,兼容性好,希望大家能喜欢。

b

YTabs!划过显示图片的列表新闻

YTabs!划过显示图片的列表新闻

YTabs!划过显示图片的列表新闻,我整理的一组很经典的图片头条新闻效果。图片过度时,可以选择滚动切换,也可以选择透明的渐显过度。这一组效果都很实用,兼容性好,调用超方便。

YTabs!图片头条新闻集锦

YTabs!图片头条新闻集锦

YTabs!图片头条新闻集锦,我整理的一组很经典的图片头条新闻效果。图片过度时,可以选择滚动切换,也可以选择透明的渐显过度。这一组效果都很实用,兼容性好,调用超方便。

YTabs!多标签自动横向滚动新闻导航

YTabs!多标签自动横向滚动新闻导航

YTabs!多标签自动横向滚动新闻导航,一个很经典的标签导航效果,点击标签新闻滚动,可以设置自动滚动或手动滚动。ytabs.js中的moveElement方法来处理滚动效果。ytabs.js中还包含了YAO和tabView两个类,YAO是我根据YUI还有一些其他资源整理的一个常用方法类,采用单体模式。而tabView则是完全由我自己,也是这个AjaxTab效果的核心程序。

YTabs!多标签滚动 & Ajax标签导航

YTabs!多标签滚动 & Ajax标签导航

YTabs!多标签滚动 & Ajax标签导航,一个很经典的标签导航效果,可以支持加载HTML和JSON格式的数据。同时我添加了标签滚动效果,ytabs.js中的Carousel类来处理滚动效果,由于时间和能力有限,Carousel类的功能还不是很完善,也希望大家一起来从实它。ytabs.js中还包含了YAO和tabView两个类,YAO是我根据YUI还有一些其他资源整理的一个常用方法类,采用单体模式。而tabView则是完全由我自己,也是这个AjaxTab效果的核心程序。

YTabs!英文字母索引菜单

YTabs!英文字母索引菜单

YTabs!英文字母索引菜单,一个很经典的导航菜单效果,我使用我的YTabs实现了。兼容性好,调用方便。ytabs.js中包含了YAO和tabView两个类,YAO是我根据YUI还有一些其他资源整理的一个常用方法类,采用单体模式。而tabView则是完全由我自己,也是这个图片新闻效果的核心程序。

YTabs!侧边栏导航菜单

YTabs!侧边栏导航菜单

YTabs!侧边栏导航菜单,一个很经典的侧边栏菜单效果,我使用我的YTabs实现了。兼容性好,调用方便。ytabs.js中包含了YAO和tabView两个类,YAO是我根据YUI还有一些其他资源整理的一个常用方法类,采用单体模式。而tabView则是完全由我自己,也是这个图片新闻效果的核心程序。

YTabs!YAHOO皮肤多嵌套标签导航

YTabs!YAHOO皮肤多嵌套标签导航

YTabs!YAHOO皮肤多嵌套标签导航,YAHOO.COM一个很经典的标签导航效果,我使用我的YTabs实现了。兼容性好,调用方便。ytabs.js中包含了YAO和tabView两个类,YAO是我根据YUI还有一些其他资源整理的一个常用方法类,采用单体模式。而tabView则是完全由我自己,也是这个图片新闻效果的核心程序。

YTabs!MSN皮肤图片自切换标题新闻

YTabs!MSN皮肤图片自切换标题新闻

YTabs!MSN皮肤图片自切换标题新闻,一个很经典的图片新闻效果,皮肤是采用的MSN.COM.CN首页的皮肤。兼容性好,调用方便。ytabs.js中包含了YAO和tabView两个类,YAO是我根据YUI还有一些其他资源整理的一个常用方法类,采用单体模式。而tabView则是完全由我自己,也是这个图片新闻效果的核心程序。

YTabs!Zebra Table (隔行换色)& 标签导航

YTabs!Zebra Table (隔行换色)& 标签导航

YTabs!Zebra Table (隔行换色)& 标签导航,我自己编写一个Zebra方法。可以一次对多个元素进行隔行换色和鼠标经过变色的处理。调用简单,样式和JS分离,修改颜色时,只需要修改CSS就好。我也建议大家在编写Javascript程序的时候,将CSS和Javascript分离,这样更容易维护。

YTabs!Ajax标签导航

YTabs!Ajax标签导航

YTabs!Ajax标签导航,一个很经典的标签导航效果,可以支持加载HTML和JSON格式的数据。兼容性好,调用方便。ytabs.js中包含了YAO和tabView两个类,YAO是我根据YUI还有一些其他资源整理的一个常用方法类,采用单体模式。而tabView则是完全由我自己,也是这个AjaxTab效果的核心程序。

版权所有 © 2008-2010 yaohaixiao.com, 保留一切权利。    ICP备案:鄂ICP备08000339号