transition是css3中新添加的特性，在W3C标准中是这样描述 的：“css的transition允许css的属性值在一定的时间内从 一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑的以动画效果改变css的属性值。”有了transition一切动画都变得如此简单。

在今天的小贴士,我们将向您展示如何让你的菜单添加一个整洁的悬浮效果。

查看demo

Tags: css3css3 transitiontransition 菜单菜单 动画动画

有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。，就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。

大家首先来看一个DEMO：

Tags: inline-block空白inline-block空白

Backbone 视图的使用相当方便 — 它不会影响任何的 HTML 或 CSS 代码，并且可以与任意 Javascript 模板引擎兼容。 基本的做法就是，将界面组织到逻辑视图，之后是模型，当模型数据发生改变，视图立刻自动更新，这一切都不需要重绘页面。 我们再也不必钻进 JSON 对象中，查找 DOM 元素，手动更新 HTML 了，通过绑定视图的 render 函数到模型的 "change" 事件 — 模型数据会即时的显示在 UI 中。

前期准备模板

Tags: backbonebackbone

模型 是所有 Javascript 应用程序的核心，包括交互数据及相关的大量逻辑： 转换、验证、计算属性和访问控制。你可以用特定的方法扩展 Backbone.Model ， 模型 也提供了一组基本的管理变化的功能。

extendBackbone.Model.extend(properties, [classProperties])
要创建自己的 模型 类，你可以扩展 Backbone.Model 并提供实例 属性 ， 以及可选的可以直接注册到构造函数的 类属性 (classProperties)。

extend 可以正确的设置原型链，因此通过 extend 创建的子类 (subclasses) 也可以被深度扩展。

Tags: backbonebackbone

backbone.js，是开发web app的框架。凭借它，我们可以使用javascript编写复杂交互的web app，因为backbone提供了强大的对模型、视图和交互的抽象。 以前，我们开发web app，比较依赖比如jQuery.js、underscore.js：

• 将所有交互看作对dom节点的操作，虽然也可通过事件（event）解藕复杂的交互，但是无法脱离dom模型，包括事件的传递，都是沿着dom树进行的；
• 即使是有起到模型作用的对象，一般也通过jQuery附着在dom树上

Tags: backbonebackbone

transition是css3中新添加的特性，在W3C标准中是这样描述 的：“css的transition允许css的属性值在一定的时间内从 一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑的以动画效果改变css的属性值。”

请用现代浏览器查看demo，否者后果自负

一、效果直击

CSS3下的圆形遮罩效果demo

因为是使用纯洁的CSS3实现，因此，IE6~8浏览器又一次光荣获得“打酱油”的称号！

将后台程序(如php)发送过来的json数据转化为javascript的数组或者对象的方法十分简单，代码如下：

然而想将一个javascript对象转化为json格式的字符串却并不那么简单，特别是对象的属性值递归包含一个对象时(如 var obj={a:[2,3],b:{m:[3,4],n:2} } ),那么有没有什么方法将obj转化为json格式的字符串呢？

一、使用 opacity + Alpha Filter


看起来手挺简单的吧？嗯。挺简单的… 希望你能很方便实现这个方案！其实见到这个的时候，我们的第一想法当然是 background + opacity，在不支持 opacity 的 IE 使用 filter 的 alpha 滤镜来实现。然后，我们得到这样的效果：

Tags: 半透明半透明

这是一个效果图

前端实现页面垂直居中的几种思路：

一、利用 position 和负边距

利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明：

Tags: 垂直居中垂直居中

最近在做一个自定义表单的项目，由于各种原因，需使用前台javascript模板，上网google了一下，javascript模板方面的介绍不是很多，不像extjs等框架已经有很成熟的模板系统了，最近微软也发布了一个基于jquery的模板插件（http://github.com/nje/jquery-tmpl），基本用法类似，这些模板都定义了自己专用的模板语言。同事介绍了一个mustache.js的模板类，与大家分享下。

据作者写道Twitter也使用了这个模板类，国内腾讯也有自己的js模板类，请看QQ群空间源码。

Web 开发者需要经常更新他们的知识，学习新的技术，如果他们还想继续在 Web 开发领域混并混得还不错的话。下面将为你展示 7 项新的Web开发技术，作为一个Web开发人员，你需要了解、熟悉并学会的技术。

CSS3 media queries

目前，大量的智能手机设备的涌现，同时各种不同尺寸屏幕的设备，如平板电脑之类的出现，对Web开发带来了前所未有的挑战，如何让 Web 页面能适应各种尺寸的屏幕让很多 Web 开发人员相当的纠结。幸运的是 CSS3 规范可帮我们轻松的解决此事，你可以根据不同尺寸的屏幕定义不同的 CSS 样式。

原文地址：http://www.alfajango.com/blog/exploring-jquery-live-and-die/

作者和大多数的开发人员都知道jQuery的.live()函数，知道它是做什么用的，但是不知道它是怎么样工作的，使用起来也不得心应手，甚至也没听说过.die()(去掉bind事件)。即使你能熟悉这些，但你能意识到.die() 的问题所在吗？

什么是 .live()？

函数的.live()类似.bind(),除此之外,它允许你绑定事件DOM元素现在和动态生成出来的dom节点,你可以绑定的事件不存在的元素。

Tags: die()die() live()live() bind()bind()

腾讯新闻、新浪新闻有一个常见功能，就是当鼠标选中一段文字时会浮现一个小图片，点击这个图片可以把选中内容发送到微博，原理很简单，先获得鼠标选 中文字，然后调用博客中提供的页面，把文字作为参数传过去就OK了。【有个小问题就是，选中的文字有特殊字符会报错，需要过滤一下】

分三步走：

1、文字的选中

区分document.selection和window.getSelection();

 原文地址：http://www.hujuntao.com/archives/ie6-position-fixed.html

CSS实现固定浮动层效果，类似于QQ空间顶部的工具条。标准浏览器、IE7+只需在CSS里面设置position:fixed;top:0;就可以了。不论你怎么滚动页面，工具条都会固定在头部。那么IE6怎么实现呢？
众所周知IE6 position不支持fixed属性，下面介绍两种纯CSS模拟实现position:fixed效果。

第一种：HTML、BODY高度100%方案

看了群的聊天记录，一直有人问IE6下png图片怎么透明，其实有关png透明的文章网上有很多，方法也有很多，这里就小小的总结一下：

1、使用GIF代替

.pngImg { background:url(image.png); _background:url(image.gif);}

缺点：PNG格式比起GIF来表现色彩更丰富，特别是表现渐变以及背景透明的渐变要比GIF格式出色很多，所以降低了效果

JavaScript实现多维数组、对象数组排序，其实用的就是原生的sort()方法，用于对数组的元素进行排序。

sort() 方法用于对数组的元素进行排序。语法如下：

 返回值为对数组的引用。请注意，数组在原数组上进行排序，不生成副本。

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。