使用jQuery制作商品放大镜效果.

作者：66
Hi，大家好，我是CssRain的站长。爱好前端开发的我先后从事过Java开发，JavaScript，CSS开发等，已经工作两年+了。目前就职于亚信中国(Asiainfo)，担任前端开发和创新工作。忠心希望所有的读者在这里都能够有收获和进步，同时也希望大家多多支持CssRain。这是我的最大心愿。Best Regards。

使用jQuery制作商品放大镜效果.

在一些大型的购物网站 你经常可以看到这个效果，通过放大镜效果，可以把一个小的图片的某一部位放大到清晰可见。

1.原理

首先你必须要有2张图片，一张缩略图和一张高清晰的图片。
然后当鼠标在缩略图里移动时，通过计算鼠标在缩略图里的位置和比例。
最后通过比例就可以得出大图要显示的部分。
所以最简洁的HTML代码结构如下：

2.小图中的半透明层

当鼠标滑入小图片时，我们需要添加一个半透明层用来显示当前鼠标框住的区域。
有3种状态：
(1)鼠标滑入
(2)鼠标滑动
(3)鼠标滑出
滑入时，我们需要给半透明层定位，并马上显示出层。通过给元素绑定mousemove事件。
滑动时，需要给透明层实时定位，在计算定位时，要注意半透明层不超出图片边界。
同时在mousemove时，添加了一个setTimeout，减少资源占用。
滑出后，隐藏半透明层，并把mousemove解除绑定，减少资源占用.
这一步最关键的就是，滑动时中心点和坐标的计算。
演示：http://www.cssrain.cn/demo/fangdajing/demo_01.html

3.显示放大的图

第2步完成后，第3步就相对简单了。
在刚才3种状态上，在添加点内容。
鼠标滑入时，需要添加大图的显示。
鼠标滑动时，需要根据鼠标当前的位置在小图中的比例，然后把比例*大图的宽度高度 得到大图显示的位置。
鼠标滑出后，需要隐藏大图。
这一步最关键的就是，滑动时比例的计算。
演示：http://www.cssrain.cn/demo/fangdajing/demo_02.html

4.发散思维

此效果不仅是显示商品，地图鹰眼效果也可以使用.

下载：http://www.cssrain.cn/demo/fangdajing/fangdajing.rar

Blog Theme Design Review – orange Glow.

作者：珊瑚
大家好, 我是好孩子珊瑚, 现在从事的是前端开发, 以及前端交互设计, 最近沉溺在用户体验和视觉设计中不能自拔. 这篇文字来自于珊瑚我的原创, 欢迎各位老师批评指教哦.
新博客地址: http://corababy.net/blog/

Blog Theme Design Review – orange Glow

是第一次对自己的wp theme做回顾, 不太清楚如何能够更加清楚的分析出优点和不足, 先从最早的一个有bakup的设计开始.

orange glow

{COLOR SCHEMA}

#FD9945|#60555D|#F5E2B8|#E6AA75|#98B88E

{GRID}

# 1 column

# main section:

#1 header: top main navigation and search

#2 blog logo

#3 main content: post

#4 widgets: google friends connect and feed icon

#5 footer

{FEATURES}

#top main navigation, 还算是比较清楚的一份导航, 内容链接("About", "Works"…)和功能性链接("Log in")分在导航条的两端.

#search, 不记得从什么时候开始, 喜欢把search form放在相对明显的位置, 也许是对自己博客的导航没有信心, 也许是担心这个没有category list/tag cloud的小站给到访的客人带来了很多不方便, 所以才那样做的吧.

#others, 亦如平常.

{WANT TO SAY}

#颜色

记得Stephen说, 颜色是设计的重要因素之一, 明快的颜色会使阅读的人们内心闪亮起来, 或者说, 不同的颜色会带给阅读的人截然不同的感受, 好的和不好的心情及体验.

从根本上来讲是同意的, 但颜色的作用应该还有很多.

颜色是设计者性情的一种体现, 沉静, 火爆, 奔放, 桀骜, 还是寂寥. 所以即使阅读者会甄别设计的内容是否值得继续花费时间在上面, 但是, 对颜色第一印象的好感还是能够为接下来的甄别加不少的分.

颜色可以创造一致性. 所有的链接是蓝色, 所有的文字是深灰色, 所有的日期是浅灰色, 所有的错误信息室红色… 这个是不是所谓的用户使用惯性呢?

#细节

自己理解的细节是那些不会被察觉, 但是当它们和用户相遇的时候, 用户为之会心一笑的闪光点.

比如, mouse hover的颜色改变, 亮度变化, 以及细致的渲染.

比如, title的小装饰.

比如, image的淡色边框.

比如, 圆角.

我想, 在设计这个theme的时候还是个懒惰的人吧, 没有等到考虑加入细节就匆忙的launch, 其实会在后来的几份设计中发觉, 细节成为那样不可或缺和重要的一员.

有些超出了review的范围, 讲了些不着边际的话, 那么, 继续加油.

原文地址: http://corababy.net/tech/2009/07/29/blog-theme-design-review-1-orange-glow/ 请大家多多指点 :]

有名函数表达式(译).

作者：stefyang
大家好，我是cssrain的新的联合作者之一。在南开学了7年的数学，在腾讯做了近两年的web开发工程师，现在处于自由职业的阶段。在腾讯主要从事lamp方面的开发，对php框架开发和mysql的优化有少许的心得，但是个人一直非常钟情于前段开发，尤其是js方面。我是那种什么事情都喜欢追根溯源的人，所以相信会给大家带来一些源码分析的作品。当然我也是一个google reader的重度的使用者，所以我也会定期给大家带来一些国外经典技术博文的翻译。希望我的文章对大家能有所帮助，也希望在这里能够认识更多的对web开发感兴趣的童鞋。
我的QQ是549805380，邮箱是yangliang AT vip.qq.com.

有名函数表达式

简介 ：
在互联网上很难找到一篇对有名函数表达式讲述的比较全面的文章。这也可能是为什么对此问题有那么多的误解的原因。在这篇文章中，我将试图从理论和实践两个方面总结这些精彩的javascript结构，他的精华、鸡肋和糟粕。
简而言之，有名函数表达式只对一件工作有用，在调试器和性能测试器中描述函数的名称。当然还有可能在递归调用中使用函数名称，但是你将很快看到在当下他通常不大实用。如果你不担心调试的问题，那么你就不用担心了，甚至不去使用有名函数表达式。否则，继续读下去，你将看到你可能已经遇到的跨浏览器问题和一些解决这些问题的方法。
下面我们先来介绍一下什么是函数表达式，和现代的调试器如何处理他们呢。你也可以随时跳转到最后的解决方案，那里将说明如何安全的使用这些结构.
全文地址：http://www.cssrain.cn/demo/named function expression/Named function expressions demystified.htm

改进的提示插件-jQuery.hiAlerts.1.0.

作者：不羁虫
从事IT3年左右，专业前端工作2年左右，熟悉前端体验，Web标准（大侠很多，不敢自言精通），对jQuery的认识不到一年，jq很符合前端开发的习惯，努力学习中，也正是因为jquery认识了cssrain，这里的文章和插件都很不错，非常骄傲国内能有这样熬的交流的地方。
个人开发习惯：Firefox+Firebug+Fireworks+Editplus
博客：http://hi.baidu.com/bujichong（当记事本和收藏夹用，可观性不强…）
邮箱：bujichong@163.com
qq:347408820（欢迎同行加我交流）

改进的提示插件-jQuery.hiAlerts.1.0.

由于工作上需要，在jquery.Alerts基础上改进的一个插件，现在有提示框，确认框，输入框，弹出提示层，顶部浮动提示层5个效果，我重命名他为hiAlerts，hi表示招呼的意思，这个可能还要修改添加一些效果，所以暂定为1.0版吧
演示：http://www.cssrain.cn/demo/jquery.hiAlerts.1.0/demo.html
下载：http://www.cssrain.cn/demo/jquery.hiAlerts.1.0/jquery.hiAlerts.1.0.rar

基于jQuery UI的图片截取功能.

作者：karry
Hi,大家好，我是Karry，playGoogle(玩转谷歌)的博主。07年从武汉毕业后到上海工作，先后从事过.Net开发、前端开发。现在在巨人网络(GA)任JavaScript工程师一职。专注于JavaScript编写和用户体验改善。相信细节决定成败，欢迎志同道合的朋友一起交流。
msn: karry[at]live.cn。
blog: http://www.playgoogle.com

基于jQuery UI的图片截取(圈人)功能

现在的SNS网站相册都拥有圈人的功能，也就是在图片上指定的地方画一个框，然后指定该框里是谁。这和裁剪图片的原理是一样的。也就是拖拽功能和resize功能合理的配合。由于jQuery UI 里这两个功能都有比较好的实现，而且效率很不错，所以，我就用jQuery UI 整合实现了一个。

1.准备工作

该功能既然基于jQuery UI 功能，当然需要引入相关的js组件。 在这里使用的是
jQuery-1.3.3 、
jQuery UI 1.7.1中的ui.core.js、ui.dragdrop.js、ui.resize.js

2.DOM结构与样式的编写

上图所示，虚线框和8个小的拖拽按钮如何实现？我采用的是绝对定位的方式。虚线由于有一点动画效果，我用一个小的gif图片来实现的，这里要注意的是，由于使用的是jQuery UI 的组件来实现，在resize 组件中，resize拖拽的按钮的DOM结构已经固定写在了JS里面，所以，只能在依照其规则来写。具体的DOM结构如下：

其中，< span>标签表示的是四条虚线。后面的8个div表示的是8个拖拽按钮。全部采用绝对定位，这样在改变大小了之后，能够确保样式正确。其中< div class="frame">标签是为了解决IE里面绝对bottom无法正常显示加的hack。
另外，由于拖拽和resize都要求不能超过图片的范围，所以，我将图片和marker标签使用的DOM放在同一个父容器下，父容器的高度和宽度根据图片的大小自动适应，所以，父容器要采用浮动定位或者绝对定位，具体需要考虑整体的需求。另外，Dom是JS生成的。

3.js的编写

js我还是按照以往的风格，写成了一个类以方便调用和扩展。其中关键的是jQuery UI 中的两个组件（drag、resize）的调用，的代码如下：

var _this = this;
this.$marker.draggable({
containment:"parent",
drag:function(){
_this._resize();
if($.isFunction(_this.opts.drag)){
_this.opts.drag.call(_this);
}
},
stop:function(){
_this._resize();
if($.isFunction(_this.opts.dragStop)){
_this.opts.dragStop.call(_this);
}
}
});
this.$marker.resizable({
handles:"n,e,s,w,se,sw,ne,nw",
minHeight:30,
minWidth:30,
resize:function(event,ui) {
_this._resize();
if($.isFunction(_this.opts.resize)){
_this.opts.resize.call(_this);
}
},
stop:function(){
_this._resize();
if($.isFunction(_this.opts.risizeStop)){
_this.opts.risizeStop.call(_this);
}
}
});

其中containment:"parent",是为了控制其多拽范围。也就是只能在父容器中拖拽。 handles:"n,e,s,w,se,sw,ne,nw"是对其拖拽方向的控制，这里表示可以在8个方向上任意拖拽。我写了4个回调函数：drag,resize,dragStop, resizeStrop分别在拖拽中、大小缩放时、拖拽结束时、大小缩放结束时调用。通常可以用来实时获取当前截取框的位置。
我有一个公开的方法：getPosition() 获取当前位置。获取是一个对象，分别是左上角点的坐标和右下角点的坐标。
测试地址：http://www.playgoogle.com/demo/imageMarker/default.html
PS: 我只写了前端部分的代码，如果要完成圈人或者截图的功能，是需要后台来支持的。前台把当前框选的位置和大小传给后台，后台再来处理剩下的事。

JavaScript中的闭包(译).

作者：stefyang
大家好，我是cssrain的新的联合作者之一。在南开学了7年的数学，在腾讯做了近两年的web开发工程师，现在处于自由职业的阶段。在腾讯主要从事lamp方面的开发，对php框架开发和mysql的优化有少许的心得，但是个人一直非常钟情于前段开发，尤其是js方面。我是那种什么事情都喜欢追根溯源的人，所以相信会给大家带来一些源码分析的作品。当然我也是一个google reader的重度的使用者，所以我也会定期给大家带来一些国外经典技术博文的翻译。希望我的文章对大家能有所帮助，也希望在这里能够认识更多的对web开发感兴趣的童鞋。
我的QQ是549805380，邮箱是yangliang AT vip.qq.com.

JavaScript中的闭包

在JavaScript中，简单的说，一个闭包可以描述成一个被保留的作用域。至少这是我理解的闭包的含义。实际上闭包的好处在于它保留了外部执行环境的作用域。这种行为可以被用于很多不同的方式，并且已经成为一个应对很多Javascript缺陷的有效的补救方法；最常见的就是“循环问题”。
当你在循环体内创建了一个函数，并且希望一个变量的当前值在新的函数内部能一直保持；即使在你的新函数调用前，循环环境已经改变了这个变量的值，你也希望新的函数内部可以保留这个变量的值。下面就是个例子。

var myElements = [ /* DOM Collection */ ];
for (var i = 0; i < 100; ++i) {
myElements[i].onclick = function() {
alert( 'You clicked on: ' + i );
};
}

当myElements[0].onclick被触发时，i的值将是99，这意味无论你点击那个元素，你都会得到“You clicked on: 99″。
这个我呢提可以通过创建一个函数并且在每一个循环的迭代中都调用这个函数来解决。当传入i时，调用函数将形成一个崭新的执行环境，在这个执行环境中i的值被保存，并可以可以在哪个环境内部通过任何的方式使用，这些方式包括返回一个函数。

function getHandler(n) {
return function() {
alert( 'You clicked on: ' + n );
};
}
for (var i = 0; i < 100; ++i) {
myElements[i].onclick = getHandler(i);
}

现在这个程序就能正常的工作了！一个可以使用的通用捷径就是同时创建和调用函数。这里可以使用 “自身调用的匿名函数”。

for (var i = 0; i < 100; ++i) {
myElements[i].onclick = (function(n) {
return function() {
alert( 'You clicked on: ' + n );
};
})(i);
}

因为他非常简明，所以更加通用一些，他看上去非常的酷！但是前一种方法可能更快一些，因为你仅仅创建了getHandler函数一次，而不是每次迭代事都创建。
注意：虽然不重载继承的作用域中的变量是个好的习惯，但是当你给函数传入i的时候，没有必要使用不同的标示符（n）。

另一种常见的闭包的使用就是Yahoo（或者可以说是CrockFords）的模块模式

var someCoolModule = (function() {
var privateVariable = 12345;
return {
doSomething: function() {
alert( privateVariable );
},
doSomethingElse: function() {
// ...
}
}
})();

在“Function（）{}”周围的第一对括号不是必须的，但是使用它可以更明显的说明函数被立即调用了，因此显然可知，表达式不必要返回那个函数，而是返回那个函数的值。
通过使用模块模式，我们可以创建类似有和公有的变量或者方法。既然返回的函数继承了其父函数的作用域，他可以访问那个执行环境中的所有变量。
闭包还有一种应用场合就是当函数在每次调用的时候都使用相同的资源，这样在每次调用的时候都创建相同的资源，这样就会使效率非常的低。

function doSomething() {
var regex = /[^\[](.+?)\.$/;
/* Do other stuff ... */
}

既然正则表达式在函数调用中并不改变，我们可以把它放在别处；有什么比把它隐藏在未公开的私有作用域中更好的呢？

var doSomething = (function(){
var regex = /[^\[](.+?)\.$/;
return function() {
/* Do someting with "regex"... */
};
})();

如果有一些其他的有用闭包的应用，希望可以分享出来。。。
原文地址： http://james.padolsey.com/javascript/closures-in-javascript/

如何避免switch-case组合(译).

作者：66
Hi，大家好，我是CssRain的站长。爱好前端开发的我先后从事过Java开发，JavaScript，CSS开发等，已经工作两年+了。目前就职于亚信中国(Asiainfo)，担任前端开发和创新工作。忠心希望所有的读者在这里都能够有收获和进步，同时也希望大家多多支持CssRain。这是我的最大心愿。Best Regards。

如何避免switch-case组合

我很年轻，还没有做过很长的编程。所以我对使用switch-case 语法没有什么很深刻的印象，至少在我的记忆中是这样。或许你认为这是一件坏事情。你甚至会怀疑我为什么不使用它们。我真的不知道为什么，似乎我天生就不喜欢使用它，如下所示：

switch (something) {
case 1:
doX();
break;
case 2:
doY();
break;
case 3:
doN();
break;
// And so on...
}

显然，虚构此代码的作者不够了解使用其他JavaScript方法来构建此功能。其实有很多种方式更适合这种情况，而不是一个丑陋的switch. 有许多许多更轻松，更优雅的方式来实现这种功能。
switch-case组合肯定是非常有用的，当你有一个变量并且依靠它的值的不同来做不同的事情。使用多个if-else不太恰当，所以人们通常使用switch-case来代替多个if-else.我敢肯定你也是.
上面的例子依赖于 something 判断 ，然后根据条件运行doX ， doY或doN 。在JavaScript中，同样的逻辑可以表示一个简单的查找表的形式————对象，如下所示：

var cases = {
1: doX,
2: doY,
3: doN
};
if (cases[something]) {
cases[something]();
}

这不仅简洁，而且也可以重复使用和修改条件。所有条件都是对象的一部分，因此，如果您需要改变某些条件那就非常简单了。
所以，我想说的是：请不要使用switch-case，除非绝对必要的。 为什么？ 因为有更好的替代品，比它更简单！
关于“ switch-case”的语法，请浏览：http://en.wikipedia.org/wiki/Switch_statement
如果想阅读原文，请点击这里：http://james.padolsey.com/javascript/how-to-avoid-switch-case-syndrome/
提示:译文跟原文有出入，请看原文。

使用jQuery UI制作滑动条效果.

作者：66
Hi，大家好，我是CssRain的站长。爱好前端开发的我先后从事过Java开发，JavaScript，CSS开发等，已经工作两年+了。目前就职于亚信中国(Asiainfo)，担任前端开发和创新工作。忠心希望所有的读者在这里都能够有收获和进步，同时也希望大家多多支持CssRain。这是我的最大心愿。Best Regards。

使用jQuery UI制作滑动条效果

前段时间在佐佐的博客上看到这个效果：http://byzuo.com/blog/dragscroll.
当时他是用纯JS写的，中间有点BUG。今天我不去帮它改进了，而是使用jQuery UI来完成这个效果。
效果的最终截图：

1.什么是jQuery UI

简单的说jQuery UI也是jQuery插件，只不过专指由jQuery官方维护的UI方向的插件。
jQuery UI 拥有如下特点：
1，容易使用
2，极强的配置性
3，多主题
你可以去 http://jqueryui.com/download 下载jQuery UI的所有内容。

2.小试牛刀

今天的效果是一个slider效果，根据jQuery UI官方的例子说明，我们需要总计3个JS文件：
(1)jQuery.js
(2)ui.core.js
(3)ui.slider.js
同时需要一个CSS文件:
(1)jquery-ui-1.7.2.custom.css
我们在网页中把它们全部引入，然后给一个div元素应用插件，代码如下：
$(function() {
$(".drag_cont_btn").slider();
});
OK,此时你已经完成了jQuery UI插件的调用，来看看我们的成果吧。
http://www.cssrain.cn/demo/drag_scroll/demo1.html

3.添加HTML代码

在这一步中，你要注意:怎么要嵌套XHTML才能使代码更为简单。良好的XHTML嵌套方式对代码的编写有非常大的帮助。
你可以使用Firefox的firebug来查看我的网页结构。
http://www.cssrain.cn/demo/drag_scroll/demo2.html

4.创建Slider

在上一步中，slider并没有跟图片列表关联起来。这一步我们来完成它。
通过查看jQuery UI slider的API，我们可以找到2个非常有用的参数：
(1)max:滑动块的宽度的最大值
(2)slide:滑动时的回调函数
通过设置max，我们可以给滑动块一个范围。通过使用slide这个回调函数，我们可以控制图片列表滚动。
关键代码：
// slider将要用到的参数:
// (1)max:最大值
// (2)slide:滑动时动态改变容器的left.
var sliderOpts = {
max: width – parseInt($dragCont.css("width")),
slide: function(e, ui) {
$contain.css("left", "-" + ui.value + "px");
}
};
//创建slider
$button.slider(sliderOpts);
具体例子：
http://www.cssrain.cn/demo/drag_scroll/demo3.html

5.隐藏不必要的部分

只所以把这步放到这里说，主要是想让大家知道下 这个 动画的实际原理。隐藏不必要的部分相信大家都明白怎么做。使用CSS的overflow:hidden即可。加到哪个元素上，这个不要我说了吧。
具体例子：
http://www.cssrain.cn/demo/drag_scroll/demo4.html

6.多行列表

通过前面几步的学习，制作一个多行的列表岂不是小菜一碟了。
改进步骤如下：
(1)相应元素的高度增加1倍。
(2)JS 计算元素宽度时，除以2。
具体例子：
http://www.cssrain.cn/demo/drag_scroll/demo5.html

7.竖向列表？

前面我们已经把单行，多行列表的slider效果做完了，如果现在要你做一个竖向的slider效果，你能做出来吗？
本文代码下载：
http://www.cssrain.cn/demo/drag_scroll/drag_scroll.rar

生活中的体验(1).

作者：66
Hi，大家好，我是CssRain的站长。爱好前端开发的我先后从事过Java开发，JavaScript，CSS开发等，已经工作两年+了。目前就职于亚信中国(Asiainfo)，担任前端开发和创新工作。忠心希望所有的读者在这里都能够有收获和进步，同时也希望大家多多支持CssRain。这是我的最大心愿。Best Regards。

最近老是出差，所以博客也没什么更新。下面是一些我自己遇到事情，而后产生的一些想法。

1，动车组自动售票机

今天在排队买票时，突然一个女子跑到我们这条队伍旁边，问谁要票不，她和她朋友总共买了两张，但2张发车时间不对。听了这句话后，我产生了一个想法：
一般来说售票分为两种情况，1次性买一张票 和 1次性买多张票。
当买1张票时，不会出现上面的情况。
当买多张票时，有可能由于客户操作失误，导致买的票不是同一时刻。
所以这里我觉得有必要改善一下：当客户一次性买多张票时，应该提示客户：“你好，你买的车票发车时间不是同一时刻，确定购买吗？” 这样应该可以避免上面情况的再次出现。

2，电梯

有一次跟同事坐电梯下楼时，然后同事不小心按错了楼层。本来是去11层，结果按了10层。不得不在10楼停下，然后再去11层。
后来每次坐上公司办公楼的电梯，我就一直在想，为什么电梯的按钮不能取消呢？
这里去郑州出差，去了分公司后，还真的发现电梯按钮按错了后，可以取消掉。不过有一次，我突然发现由此引发的另一个问题。
有一次进一个电梯，电梯2边都有按钮，然后进来的人比较多，然后有的人在这边按楼层，有的人再另一个面板上按楼层。发现这边的人按了后，结果被另外一边的人 给取消了。
所以我又萌生了一个想法：
（1），要么只给电梯安装一个面板。
（2），要么给按钮添加一个时间设置，比如按钮被按了后，1秒内不能被取消。

总之生活中关于类似的东西无处不在，不知道大家在生活过程中会注意这些东西不，但我总之认为有想法总比没想法好。

什么才是真正的设计?

PS：由于文章不知道为什么提示有关键字，所以只能放到google文档中。

What the real design is?

我在想, 什么才是真正的设计?

不是单纯的指平面设计, 而是将用户体验, 可用性, 和视觉权衡之后的一种极致的美好. 向这个目标迈进的步伐是绝对艰难和漫长的.

逐渐的明白, 曾经所谓的成为设计师的梦想其实是相当相当的不成熟和狭窄. 我以为设计师就是可以做出漂亮美好的事物, 但是, 很多情况下, 好看不好用终究会换来短暂的寿命. 我还以为设计师就是可以天马行空, 但是, 仅仅天马行空其实是远远不够的, 天马行空又如何? 让50岁的大叔玩QQ宠物么? 我一直以为设计师就是可以没有固定的工作模式和流程, 但是, 把所有的事情没有秩序的糅杂在一起, 能够换来的只能是一次又一次的重新来过.

从头脑发热, 到急功近利, 再到如今平静和不紧不慢, 我想, 自己可以比从前更加理智的看待"设计"这件事. 全部内容…