摘要:
无缝连续滚动JS,工作中经常会用到整理出来需要用的时候可以直接拿来用。代码很简单主要就是修改元素的scrollLeft值。需要注意的是获取元素overflow:hidden中内容的真实宽高时,需要先克隆元素并内容设置样式setyle.cssText="position;absolute; visibility:visible;display:block;" 。 然后再使用元素的offsetWidth/offsetWidth属性才可以获取到元素的真实宽高。否则被隐藏部分的宽高无法获取到。点击这里查看显示效果代码:<!DOCTYPE html ><html&g 阅读全文
摘要:
从github上下载的jquery文件是没有经过压缩和合并的,根据jquery README.md中提供的说明在window构建jquery,进行到最后一步运行grunt时会直接编辑器中打开grunt.js,不能够完成构建,需要先在命令行执行:DOSKEYgrunt=grunt.cmd$*。下面详细的构建步骤:0 安装github,下载地址:http://windows.github.com/1 安装 NodeJS,下载地址:http://nodejs.org/#download2 安装grunt :npm install -g grunt,安装完成后在命令行执行grunt -version 阅读全文
摘要:
有的人说css hack不好要拒绝使用它,为了兼容低版本浏览器器的css解析BUG,不得不把代码写的很绕,直接增加了维护成本。也有的人遇到不兼容上来就用hack,代码多了网站的兼容性变得越来越脆弱,经常出现些莫名其妙的问题而不知道是什么原因。或者稍微改动下代码就会出问题。 我认为可以先针对标准浏览器编码,对于一些老的浏览器由于对标准支持而不够产生的CSS解析bug,最后再使用hack集中处理。这样做写出的代码可以很直观容易维护。但是hack 仅是针对BUG使用,如果因为自己的代码缺陷引起的兼容性问题,应该先修正自己的代码。 下面是一个模块的代码截图,最后也可以把项目中其他所有处理ie6,... 阅读全文
摘要:
在FIREBUG控制台中输入 jQuery() 返回 []jQuery.fn = jQuery.prototype = { constructor: jQuery, init: function( selector, context, rootjQuery ) { var match, elem, ret, doc; // Handle $(""), $(null), or $(undefined) if ( !selector ) { return this; }代码执行到这里返回,[]表示数组字面量,返回对象按说应该显示 [object Object]; 经过反复调试发 阅读全文
摘要:
网上收集整理的一些比较好建议 id和class的命名在保持语义性的同时尽可能的短. 不推荐的写法:#navigation {} .atr {} 推荐的写法 : #nav {} .author {} 可以缩写单词,但缩写后务必能让人明白其含义。比如author缩写成atr就非常费解。 参考链接: http://www.36ria.com/5249属性书写顺序,首先定义显示属性 推荐的写法 :.selector{float:left;width:300px;height:200px; font-size:14px;color:#f36;} 不推荐的写法:.selector{font-siz... 阅读全文
摘要:
一些css书写规范建议将浏览器私有实现的CSS3属性写在前面标准属性写在后面如:{/*一些前缀私有属性*/ -webkit-border-radius:30px10px; border-radius:30px10px; }现在一些CSS3的属性还是草案,等到成为正式标准可能会有更改。这也是浏览器为什么采用私有属性方式实现的原因。但是如果私有属性和最后的标准属性不一致就会有兼容问题如:之前网页有CSS {/*一些前缀私有属性*/ -webkit-border-radius:30px10px; //标准之前草案的表现 border-radius:30px10px; //无效} 到了bo... 阅读全文
摘要:
项目中有多个前端人员协同开发时,你们团队如何分工如何协作的?以前一直使用VSS的"锁定-修改-解锁模型",后来发现svn的"拷贝-修改-合并"模型很不错,可以多人并行编辑同一个文件。具体到前端模块化开发可以多人同时签出同一个文件,然后并行开发不同模块,模块经测试通过后提交到版本库。提交时进行手动或自动的合并操作,下次修改前先从版本库获取最新内容,再做后续修改。HTML/CSS是可视话比较强的东西, 开发人员开发过程中只能看到自己开发的模块部分对于开发体验来说不太好。通过合并大家可以实时看到协作的成果,看到完整的部分。 比如有一个ps设计稿index.ht 阅读全文
摘要:
http://msdn.microsoft.com/zh-cn/magazine/cc507641.aspxhttp://ajaxpatterns.org/Unique_URLsHistory API, hashchange, iframe唯一 URL 模式URL 是 Web 的基础。用户可以将中意的 URL 保存下来以供将来参考、可以按照 URL 所指开始新的内容体验,此外还可以使用 URL 回到先前的状态。在 AJAX 和 SPI 模型中,应用程序可以在单个 URL 中完成许多任务。这将使 Web 体验的核心支柱面临彻底的改变,即:应用程序的离散状态是由不同的 URL 来标识的。浏览器会在 阅读全文
摘要:
功能强大的模板引擎大都需要对模板进行语法解析,会有性能问题。通过把一个大的模板引擎根据不同呈现需求分隔成多个互相独立模板控件,可以降低处理复杂度提供处理性能,可以根据需求灵活组合这些模板控件得到一个可以定制的模板功能库。一个模板控件规定了它的模板语法和js api,这是一个repeater控件的JS实现:<!DOCTYPE html><html><head><meta charset="gb2312" /><title>JavaScript Repeater控件</title></head> 阅读全文
摘要:
Pinterest/瀑布流布局一 加载页面时,先页面中对已有元素进行定位。使用对象保存每一列的列高度和列索引如:var column = {index:0, height:0};使用列数组存放来这些对象。如:var columns = [column1,column2....];使用cloumns.sort(function(x,y){return x.height - y.height}); 可以找出最短/最长高度的列的索引。元素left= 列索引* 列宽 ; 元素top = 最短一列的高度;二 鼠标滚动到最短一列的底部时动态加载数据。if(文档scrollTop + 视口高度 > 容 阅读全文