12 2011 档案

摘要:返回顶部是经常会见到的效果,代码比较简单,使用2个对象和一个主函数。职责明确方便复用。在性能方面考虑了由于连续触发onscroll事件,频繁调用回调函数而产生的性能问题。可以将回调函数缓存一段时候后执行,即当这段时间内多次触发了onscroll事件,但回调函数只会执行一次。<!DOCTYPE html><html><head><meta charset="gb2312" /><title>结合淡入/淡出/减速运动效果实现的返回顶部功能</title><style>.fixed{ positi 阅读全文
posted @ 2011-12-31 10:05 rentj 阅读(566) 评论(0) 推荐(0) 编辑
摘要:减少DOM数可以加快浏览器的在解析页面过程中DOM Tree和render tree的构建,从而提高页面性能。为此我们可以把页面中那些首屏渲染不可见的部分HTML暂存在TextArea中,等完成渲染后再处理这部分HTML来达到这个目的。 要把TextArea 中暂存的HTML内容添加到页面中,使用元素的outerHTML属性是最简单方便的了,不过在DOM标准中并没有定义outerHTML,支持的浏览器有IE6+,safari, operal和 Chrome,经测试FF4.0- 中还不支持。所以我们就来实现一个可以跨浏览器的outerHTML。outerHTML 就是获取或设置包含元素标签本身在 阅读全文
posted @ 2011-12-28 09:34 rentj 阅读(395) 评论(0) 推荐(0) 编辑
摘要:CSS布局分为常规流,浮动流,和绝对定位。这篇文章是对在常规流中块元素和行内元素的区别所做的一个简单总结。块元素:块元素盒模型有margin box(left/right/top/bottom) ,padding box(left/right/top/bottom), content box(width/height)组成。块元素单独占一行,在文档流中垂直排列。会与垂直方向的兄弟节点的margin发生重叠, 如果和它的后代元素之间不存在pading,border的情况的下,那么块元素垂直方向的margin也会和它的后代元素发生重叠。行内元素:行内元素在一行内水平排列,当内容超出它的包含块时会被 阅读全文
posted @ 2011-12-20 11:33 rentj 阅读(199) 评论(0) 推荐(0) 编辑
摘要:JS只是一门支持面向对象编程的语言,通过OO可以让我们的代码组织更加人性化。可是与传统基与类的面向对编程语言不同它没有类概念并且没成员访问修饰符。这多少会给我们编程工作会带来一些束缚。 其实通俗的讲类就是对象的模板,为了增强JS的OO特性,受mootoos框架启发我们可以使用一个JSON对象来描述这个对象的模板。在这个模板中我们可以模拟实现私有成员,受保护成员,静态成员。 这是一个在JS中模拟的类定义语法,代码中Class是一个自定义函数,它接受两个参数,第一个参数是类名、第二个参数是一个JSON用来一个对象的模板。在这个JSON对象中其中字段 "extend",,&quo 阅读全文
posted @ 2011-12-08 20:42 rentj 阅读(877) 评论(1) 推荐(0) 编辑
摘要:图片减速度滚动,一般用于产品的展示效果。作为前端,互联网上一些常见效果都要尝试去实现,不能因为公司用不到就不做。 阅读全文
posted @ 2011-12-06 13:40 rentj 阅读(476) 评论(0) 推荐(0) 编辑
摘要:电子商务网站经常用到简单模仿一下,用得着的点击"html"选项卡可以复制源码当鼠标移动到缩略小图上时,在它上面显示半透明的放大蒙板并计算其位置,移开时隐藏半透明的放大蒙板 鼠标指针移动到放大蒙板的中心才会开始移动蒙板,半透明蒙版位置计算:鼠标指针当前位置 - 图片的位置 - 蒙版的宽度/2。 根据比例计算出大图的偏移演示代码View Code <!DOCTYPE html><html><head><meta charset="gb2312" /><title>放大镜</title>& 阅读全文
posted @ 2011-12-05 10:37 rentj 阅读(550) 评论(1) 推荐(0) 编辑