2010年11月19日 by 张 鑫旭 阅读 535992 次, 今日 119 次
常常会有这样子的页面,内容很丰富,页面很长,图片较多。比如说光棍节很疯狂的淘宝商城页面。或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类。
这些页面图片数量多,而且比较大,少说百来K,多则上兆。要是页面载入就一次性加载完毕。乖乖,估计黄花都变成黄花菜了。所以,我们得做点什么,避免这种糟糕的状况发生。目前很流行的做法就是滚动动态加载,显示屏幕之外的图片默认是不加载的,随着页面的滚动,这个要显示图片的区域进入了浏览器可是窗口范围,则触发图片的加载显示。这种做法的好处是,一是页面加载速度快(浏览器转啊转的圈圈或是进度条很快就玩完了),二是节约了流量,因为不可能每个用户浏览页面时从头滚到尾的。
本文就是讲解如何通过jQuery实现这类滚动动态加载的实现。提供源代码下载,提供demo页面以及必要的截图展示。希望能对您的学习有所帮助。
阅读全文…
标签: jQuery, scrollLoading, 图片, 延迟加载, 插件, 滚动, 滚动加载, 透明gif图片
发布在 jQuery相关 | 150 条评论 »
2010年11月18日 by 张 鑫旭 阅读 49492 次, 今日 2 次
写文章的时候经常用到一些CSS方面的专业词汇。但是毕竟芳华年少不在,脑袋有点秀逗了,很多名词都记不住,这种感觉比厕所便秘还难受。比如今天居然记不起来公司公认脸蛋最pp的同事的名字,没想到我会记不住美女的名字。我觉得我觉得背后一阵萧瑟的秋风吹起,自己俨然成了漫画里面的程序猿。
某天闲逛到nimbupani,发现有专门展示CSS术语的文章,哇咔咔,感觉好像咬到一口正宗的高邮咸鸭蛋一样,不过人家的是英文,所以我还要本地化润饰处理,然后,就可以留给自己备忘的哈,的说。
阅读全文…
标签: css3, CSS伪类, css相关, 像素, 选择器, 颜色
发布在 CSS相关 | 2 条评论 »
2010年11月17日 by 张 鑫旭 阅读 84351 次, 今日 5 次
不知道数年前,公司的前辈出于什么原因选择了MooTools库(貌似在国内不是很热),用Google趋势一搜这5个js库jQuery, mootools, YUI, dojo,extjs,结果如下图:
可怜的MooTools库垫底,但是,研究研究此库还是学到不少东西的,其OO思想,就如同JavaScript高级程序设计书中所展示的一样,基础不佳者往往很难驾驭,学习门槛高限制了其蓬勃发展啊,你看人家jQuery,即使JavaScript很初级的人也能整出点小花样,这种感觉就是——即使我很菜,我也能泡到美女,你说人家能不招人喜欢吗?
阅读全文…
标签: Ajax, API, jQuery, Mbox, MooTools, 回调函数, 弹框, 插件, 锚点
发布在 JS相关 | 17 条评论 »
2010年11月11日 by 张 鑫旭 阅读 170373 次, 今日 5 次
关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了,现在似乎在国内一些商业网站上也屡见此效果,例如淘宝网的搜索结果页的排序水平条,在默认状态下,滚动条跟随页面滚动,随着页面向下滚动,当此水平条接触浏览器的上边缘时,水平条独立出来,不跟随滚动条滚动了。类似的效果在新浪微博上也有,页面滚动,新动态提示开始要淡出浏览器窗口的时候,其浮动于浏览器窗口的最上沿显示,此效果实现原理其实很简单,本文就将展示其在jQuery和MooTools下的实现。提供代码以及demo效果展示,希望能对您的学习有所帮助。
阅读全文…
标签: absolute, fixed, jQuery, js相关, MooTools, window, 滚动
发布在 JS实例 | 28 条评论 »
2010年11月9日 by 张 鑫旭 阅读 61415 次, 今日 2 次
HTML5可以说是Flash目前最大的潜在的对手,HTML5是否会终结Flash时代是个争议颇多的话题。本文作者通过10个实例展示了目前Flash可以做但是HTML5却无能为力的例子,借此说明Flash离死亡还尚早。到底Flash是垂死挣扎,还是会在困境中前行,这还需要你自己睿智的判断了。
本文实例可以说展示了Flash一些新的且比较强大的应用。无论你是Flash开发者,设计师,还是web方面的工程师,此为对于了解HTML5和Flash的一些特性,功能等还是很有帮助的。翻译能力有限,有些句子的意思自己确实拿不准,所以,要是要翻译不准确的地方,还望见谅,欢迎指正。希望本文能对您的学习有所帮助。
阅读全文…
标签: 3d, audio, flash, HTML5, video, 全屏, 播放器
发布在 外文翻译 | 13 条评论 »
2010年11月4日 by 张 鑫旭 阅读 82862 次, 今日 10 次
本文更多的是技术展示,展示如何对图像进行像素化处理,可方块像素化,圆形像素化。简洁明了,提供demo,截图,以及代码展示,希望能对您的学习有所帮助。
阅读全文…
标签: HTML5, 像素, 图像处理, 图片
发布在 Canvas相关 | 4 条评论 »
2010年11月3日 by 张 鑫旭 阅读 646546 次, 今日 12 次
对于浮动局部的局限性,想必同行们都知道,就是每个列表元素的高度必须要一致,否则就会像是俄罗斯方块一样,“锯齿相错”,例如一个左浮动列表布局,如果第一行有个列表高度高于其他列表,那就在第二行,第一个元素会沿着最高元素的右侧对齐。
浮动本身就是个魔鬼,所以,使用浮动布局还需要修复其带来的副作用——高度塌陷的问题,也就是常提到的“清除浮动”了。
另外,IE6下,重复的列表元素会出现莫名的bug,例如出现不知哪来的文字。
而基于display:inline-block的列表布局可以避免这些问题,本文就将一步一步地展示基于display:inline-block的列表布局的可用性以及价值所在。本文内容较多,讲解详细,配以丰富飞截图,必要的demo页面。还是视频展示,希望能对您的学习有所帮助。
阅读全文…
标签: chrome, float, font-size, inline box模型, inline-block, letter-spacing, opera, 列表, 布局, 浮动
发布在 CSS相关 | 111 条评论 »
2010年10月28日 by 张 鑫旭 阅读 461884 次, 今日 5 次
display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说sorry了,这一事实也是大大制约了display:table-cell属性在实际项目中的应用。
我们都知道,单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等,所以display:table-cell还是有不少潜在的使用价值的,虽说IE6/7不支持此属性,但是幸运的是,IE6/7一些乱糟糟的属性与渲染,我们可以其他方法实现同样或是类似的效果。
本文就将介绍使用display:table-cell属性让大小不固定元素垂直对齐,两栏自适应布局,多栏等高布局,以及不太擅长的列表布局等。提供必要的截图以及demo实例页面展示,和一些简单的源代码展示。时间仓促,文字可能略显粗糙,总之,希望能对您的学习有所帮助。
阅读全文…
标签: float, hack, inline-block, table-cell, 布局, 浮动, 等高布局, 自适应
发布在 CSS相关 | 43 条评论 »
2010年10月26日 by 张 鑫旭 阅读 113389 次, 今日 7 次
老早就有个想法,要把文本域(正规叫法为“多行文本输入框”,我个人喜欢称之为“文本域”)相关的一些操作啊效果啊什么的全部集中到一起,然后以后使用的时候就不要再去分别写啦。酝酿的差不多了,就抽了两个晚上把这个几乎集textarea文本域相关的一些交互全部集中到了一个js文件中,我将其命名为jquery.textField.js。
这是一个关于多行文本框的还算蛮强大的插件,其功能包括:文字还可以(需要)输入或是超出的提示,文字个数合法与否与按钮可用与否的关联,失去焦点获得焦点多行文本框的样式变化,支持默认的文字提示在隐藏与显示,历史记录,Ajax自动保存等。本文提供截图效果展示,提供demo展示,一些源代码展示,同时对各个API参数进行的简单的介绍。希望能对您的学习提供帮助。
阅读全文…
标签: Ajax, API, jQuery, plugin, textarea, textField, 字符限制, 按钮, 插件, 焦点, 自动保存
发布在 jQuery相关 | 11 条评论 »
2010年10月21日 by 张 鑫旭 阅读 151883 次, 今日 10 次
才华横溢的Stoyan Stefanov,在他写的由O’Reilly初版的新书《JavaScript Patterns》(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会是件很美妙的事情。具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多。
此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档、执行同行评审以及运行JSLint。这些习惯和最佳做法可以帮助你写出更好的,更易于理解和维护的代码,这些代码在几个月或是几年之后再回过头看看也是会觉得很自豪的。
具体内容这里不多说,总之,我相信无论你是新手还是有一定经验的JavaScript开发人员,都会对您的认识和学习提供帮助的。
阅读全文…
标签: javascript, 作用域, 函数, 原型, 变量, 命名, 对象, 循环, 扩展性, 注释, 空格, 类型转换, 缩进, 翻译, 规范
发布在 外文翻译 | 12 条评论 »