WEB前端开发

首先您可以看一下《JavaScript本地存储实践（html5的localStorage和ie的userData）》
sessionStorage和上文中提到的localStorage非常相识，方法也几乎一样：

非常通俗易懂的接口:

• sessionStorage.getItem(key):获取指定key本地存储的值
• sessionStorage.setItem(key,value)：将value存储到key字段
• sessionStorage.removeItem(key):删除指定key本地存储的值
• sessionStorage.length是sessionStorage的项目数

直接上demo：http://www.css88.com/demo/sessionStorage/

sessionStorage与 localStorage 的异同

sessionStorage 和 localStorage 就一个不同的地方， sessionStorage数据的存储仅特定于某个会话中，也就是说数据只保持到浏览器关闭，当浏览器关闭后重新打开这个页面时，之前的存储已经被清除。而 localStorage 是一个持久化的存储，它并不局限于会话。

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码：

var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}

sessionStorage 和 localStorage的clear()函数的用于清空同源的本地存储数据，比如localStorage.clear()，它将删除所有同源的本地存储的localStorage数据，而对于Session Storage，它只清空当前会话存储的数据。

关闭页面会导致 sessionStorage 的数据被清除，但刷新或重新打开新页面数据还是存在，如果需要存储的只是少量的临时数据。我们可以使用sessionStorage 。或者做页面间的小交互。

sessionStorage 和 localStorage具有相同的方法storage事件，在存储事件的处理函数中是不能取消这个存储动作的。存储事件只是浏览器在数据变化发生之后给你的一个通知。当setItem(),removeItem()或者clear() 方法被调用，并且数据真的发生了改变时，storage事件就会被触发。注意这里的的条件是数据真的发生了变化。也就是说，如果当前的存储区域是空的，你再去调用clear()是不会触发事件的。或者你通过setItem()来设置一个与现有值相同的值，事件也是不会触发的。当存储区域发生改变时就会被触发，这其中包含许多有用的属性：

• storageArea: 表示存储类型（Session或Local）
• key:发生改变项的key
• oldValue: key的原值
• newValue: key的新值
• url*: key改变发生的URL

* 注意: url 属性早期的规范中为uri属性。有些浏览器发布较早，没有包含这一变更。为兼容性考虑，使用url属性前，你应该先检查它是否存在，如果没有url属性，则应该使用uri属性
如果调用clear()方法，那么key、oldValue和newValue都会被设置为null。
PS.在firefox和chrome中存储和读取都是正常的, 但是对storage事件的触发似乎有点问题, 自身页面进行setItem后没有触发window的storage事件, 但是同时访问A.html和B.html, 在A页面中进行 setItem能触发B页面中window的storage事件, 同样的在B页面中进行setItem能触发A页面中window的storage事件. 在IE9中, 页面自身的设值能触发当前页面的storage事件,同样当前页面的设值能触发同一”起源”下其他页面window的storage事件,这看起来似乎更让人想的通些.

直接上demo,同事打开这两个页面（代码一模一样）：

http://www.css88.com/demo/sessionStorage/index2.html 

http://www.css88.com/demo/sessionStorage/index3.html 

感谢：Mr.Prime在storage事件上给予的帮助，另外推荐一下他写的关于storage的博文：http://www.cnblogs.com/AndyWithPassion/archive/2011/07/04/html5_localstorage.html

同事啄米鸟前段时间分装的一个方法，见：http://blog.dmtuan.com/?p=486，改了一下做成jQuery插件：

大家在做相册列表的时候可能会遇到这样的情况，用户上传的图片大小不一，长宽不一，然而需求的列表却是固定宽高的如图：

此脚本拟达到以下需求

1. 当图片高或宽超过父容器时截取中间部分显示。
2. 当图片宽高小于父容器时，居中显示。
3. 插件中”width”和”height”两个参数可以设定图片实际输出的宽度。
4. 可以通过样式设置图片的偏移位置，例如.themes2 li a img{ margin-top: -5px; margin-left: -5px}；
5. 第3点和第4点结合可以尽可能的解决一个问题，就是解决图片边缘模糊是造成视觉上的不爽。

demo页面：http://www.css88.com/demo/VMiddleImg/

W3C提供了一个文本的TextRectangle 对象，这个对象是对文本区域的一个解释。这里的文本区域只针对inline 元素，比如：

这类标签元素，例如这样的一个页面表现：

id为temp中有个span元素，那么我们可以通过getClientRects方法取得这样3个TextRectangle对象（红框）：

TextRectangle的组成为键值对，主要有包括：

注：以下岗位招聘长期有效

职位1：前端开发工程师(全职)

工作地点：北京

工作内容：

1． 新浪汽车频道各产品线页面开发及交互效果实现、易用性改进及页面性能优化。

2.   web前端新技术的研究和创新。

职位要求：

1.  本科及本科以上学历。

2． 精通(X)HTML+CSS，能编写结构良好各浏览器兼容的CSS，语义化的符合W3C标准的HTML。

3． 熟练掌握javascript以及常用javascript框架，如：jQuery。

4． 熟练使用PS, FW等切图工具。

5． 对用户体验，SEO有了解；逻辑分析能力强，较强的学习能力，善于沟通，有良好的团队合作精神。

6． 有后端(如:php)开发经验者优先考虑。

=====================华丽的分割线===============

职位2：页面重构工程师(全职)

工作地点：北京

工作内容：

1． 负责新浪汽车频道相关web产品的标准化实现、易用性改进，协助各栏目页面的性能优化。
2 ．Web标准新技术的研究和创新。

职位要求：

1.  本科及本科以上学历。

2． 精通(X)HTML+CSS，能编写结构良好各浏览器兼容的CSS，语义化的符合W3C标准的HTML

3．熟练使用PS, FW等切图工具。

4．对用户体验，SEO有了解；逻辑分析能力强，较强的学习能力，善于沟通，有良好的团队合作精神。

薪酬：5-8k，具体视本人能力而定

不论你是应届毕业生还是工作好多年的老鸟，只要你有足够的实践能力，欢迎加入我们！

简历投递： ，邮件标题请注明“应聘前端开发或应聘页面重构”，每天都会看查看邮件，只要你是人才，我们是不会错过的！

jQuery  doTimeout插件是延迟执行代码的插件，主要包括延迟，阻止重复执行，支持jQuery的链式调用。

插件主页：http://benalman.com/projects/jquery-dotimeout-plugin/

照着写了几个例子：http://www.css88.com/demo/dotimeout/

关于这个大家可以看两篇文章小志的《使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果》和小鱼的《背景半透明最佳实践》，这里就不展开了，这里提供一个小志的CSS背景颜色属性值转换工具，并在他的基础上做了少许的修改，还有就是被小志严重鄙视的去掉了提示！嘎嘎！

关于工具：

实现各个浏览器中具备良好的透明特性的效果，IE中使用私有滤镜filter，高端浏览器使用CSS3中的rgba属性。

输入十六进制的颜色值以及透明度，自动在IE的过渡滤镜以及CSS3中的rgba属性之间进行十六进制与十进制的换算。

说明：

1.样式名选项，例如：.rgba，填样式名选项后会自动导出IE9的兼容方案，不填样式名直接输出样式属性，请自己写IE9的hack

单独把 IE9 的 filter 变成透明度为 0 即可。高级浏览器大部分支持 :root 伪类，但不支持 filter 属性，而 IE 只有 IE9 支持，所以我们可以这样写。代码如下：

:root .rgba{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=’#00000000′, EndColorStr=’#00000000′); }
2.颜色值选项：十六进制是从【0】到【9】以及【a】到【f】组合而成的，再来一次吧！\n如果是十六进制的缩写，是前后相邻的字母可简写成为一个，例如【#FF000FF】可转为【#F0F】\n请检查你的颜色值是否为【三位】或者符合【十六进制的组合方式】。

3.透明度现象：透明度的值在【0】到【1】之间。

工具地址：http://www.css88.com/demo/hex_color/

杭州泛城科技有限公司(FUNCITY Inc.)创立于2006年8月，是一家面WebGame研发公司。公司曾获得2009年度中国最具投资价值公司，2010中国网络游戏新锐企业，是中国最大的网页游戏公司之一。公司最近的战略方向转移到移动互联网，因此需要多位优秀的前端人才一起开拓这个朝阳领域。优秀的前端开发工程师，是美术设计师和后端开发工程师的桥梁，是优秀用户体验的建筑师，是html5等前沿技术的探路者。 如果你能面对这个挑战，快来申请吧！

我们正在寻找：

•     jQuery, HTML5和CSS3，越犀利越好
•     有多个浏览器兼容性的调试经验
•     和你的同事一起学习进步
•     能够融入一个生死与共的团队
•     对编写优美、简洁的、实用的代码有着火一样的激情
•     对优雅的用户界面，可用性有自己的见解
•     积极主动，无限激情
•     在杭州工作

你将在这里：

•     设计和实现多平台的（包括移动设备）前端界面
•     直接和设计师紧密交流，确保每个页面元素和用户交互都符合设计初衷
•     学习和使用最前沿的前端技术
•     和我们的工程师一起开发新理念的产品
•     得到优越的职业发展机会和丰厚的经济收益

薪资范围：10w-20w/年

公司网站：http://www.funcity.cc/

游戏平台：http://www.lezi.com/

简历发至：hr@lezi.com,标题注明“应聘前端开发工程师

今天在做页面的时候无意中发现静态页面中小图标和文本对的很齐的，在线上的页面却小图标和文本没有对齐。同事啄木鸟找出的原因是静态页面和线上的页面的html DOCTYPE不一样，静态页面为html5，线上的页面xhtml 1.0；一直以为xhtml和html5表现上是一样的，只是DOCTYPE不一样！

经过同事啄木鸟多番测试终于找出了差异的问题所在，那就是行内元素的vertical-align:middle样式。详细看demo1 (DOCTYPE为HTML 5)和demo2 (DOCTYPE为XHTML 1.0)。

注：

1. 以上demo只测试了firefox 7和chrome，ie各个版本没有测试；
2. DOCTYPE为xhtml 1.1和DOCTYPE为html5的表现一致；
3. DOCTYPE为xhtml 1.0和DOCTYPE为html 4的表现一致；

jQuery的animate方法对颜色无法做动画效果，例如有个test元素：

<div id="test" style="border: 3px solid #CDCDCD; width: 500px; height: 500px; background-color: #FFFFFF"> 测试元素</div>

我们写一行这样的代码：

$("#test").animate({"backgroundColor":"#FF3300","height":200},5000);

我们可以看到test元素高度会缓慢的变小，而该元素的背景颜色却毫无变化，假设你去对边框做颜色变化的动画效果，也是无法实现的。

再看一下API：http://www.css88.com/jqapi/#p=animate

所有用于动画的属性必须是数字的（除了如下所示）；这些属性如果不是数字的将不能使用基本的jQuery功能。（举个例子，

, 

或者

可以执行动画，但是

不能。）属性值被当作一个像素单位的数字,除非另有说明。单位

 和 

需要指定使用。就是说color，background-color，border-left-color等等这些颜色属性是不能执行动画效果的。

jQuery ui中Effects有一个Color Animation效果（见：http://jqueryui.com/demos/animate/）这里分明能改变文本颜色和背景颜色，看了一下jquery.effects.core.js这个源码，并且抽出源码，改了一个jQuery Color Animations颜色动画插件，对’backgroundColor’, ‘borderBottomColor’, ‘borderLeftColor’, ‘borderRightColor’, ‘borderTopColor’, ‘color’, ‘outlineColor’这几个属性做了动画支持。

见demo页面：http://www.css88.com/demo/Color_Animations/

更多阅读：

http://jquery.offput.ca/highlightFade/

http://www.bitstorm.org/jquery/color-animation/

帮公司招兵买马了！大家都知道我们搜道网是做美女网站。。。你懂的！

搜道网隶属浙江搜道网络技术有限公司，是中国真实美女最多的社交网站！公司坐落在杭州北部软件园，目前拥有办公面积1200平方米，两年来公司定位于”整合全国美女资源，做中国真实美女最多的社交网站，提供基于位置的社交服务。” 2010年完成了杭州、青岛、合肥三个城市的复制，有5万美女参加搜道美女时钟街拍，成为搜道美女会员。2011年4月份以来已经有北京、南京、成都、重庆、郑州、石家庄、开封、苏州、潍坊、长沙等全国30个城市加盟搜道，启动搜道美女时钟街拍，每天都有无数的美女汇集搜道美女时钟频道。公司网站：http://www.sodao.com/

招聘以下岗位：

前端开发工程师

简历发至：admin[a]css88.com,标题注明“应聘前端开发工程师”

简历请附您的作品或网址。

.net工程师

任职要求：

1.精通C#语言，熟悉.NET框架，熟练/精通使用/VS.Net 2005/2008开发环境；

2.精通B/S结构，能熟练使用Web开发相关的HTML，CSS，JQuery框架；

3.熟悉SQLServer2005/2008，能熟练编写SQL语句、存储过程、触发器等；

4.要求有2年以上.NET开发工作经验；

5.熟悉.NET MVC开发模式者优先；

简历发至：job[a]sodao.com,标题注明“应聘.net工程师”

====================华丽的分割线====================

简历发至：job[a]sodao.com或admin[a]css88.com,标题注明“应聘网页设计师”

请附您的作品设计和页面制作作品或者网址。