活动盒：jQuery滑动盒
标签: jQuery, 网店jQuery
本来就说着要写关于jQuery的文章，分享出来，同时强迫自己学习。一直就折腾着，给itatour设计；还折腾了淘宝店；还有之前去面试之类的（现在，我决定自己单干一段时间了，非常感谢各位热心的同学的帮助和推荐）。对Zippo有兴趣的同学，或者想送礼给有抽烟人士的同学可以看一下我昨天（10/23/2009）开的网店：
淘宝网店 » ZIPPO收藏夹
然后，我们步入正题。doublechou同学在Marguerite Su中已经翻译了两篇了，我也不能落后，应该来交作业。不过，Moving Boxes这篇文章并不适合翻译，所以，来讲讲这代码里面值得我们学习的地方法。当然，CSS和HTML就忽略了，我们把重点放在JS上。先来看一个 Demo :
这个活动盒效果，除了一个jQuery框架之外，就是一个slider.js了。你可以在源文件中找到。而这里面很值得我们学习的有2个方面：
1. 智能判断向方向滑动
不过，似乎查了很多资料，都显示direction是用于marquee的，方向可以是上下左右。而这是不是因为只有两个方向? （似乎这容易被我误导，请自行理解）事实上，就是可以借鉴，全部理解得透彻这事可以慢慢来。
//关于方向 direction true = right, false = left
function change(direction) {
//当不是第一个或最后一个面板时返回false
if((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) { return false; }
//当不是当前滑动面板
if (($("#slider").data("currentlyMoving") == false)) {
$("#slider").data("currentlyMoving", true);
//利用条件运算符 "变量=布尔描述?当相互时执行的值：当不互时执行的值"
var next = direction ? curPanel + 1 : curPanel - 1;
var leftValue = $(".scrollContainer").css("left");
var movement = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;
$(".scrollContainer")
.stop()
.animate({
"left": movement
}, function() {
$("#slider").data("currentlyMoving", false);
});
returnToNormal("#panel_"+curPanel);
growBigger("#panel_"+next);
curPanel = next;
$("#panel_"+(curPanel+1)).unbind();
$("#panel_"+(curPanel+1)).click(function(){ change(true); });
$("#panel_"+(curPanel-1)).unbind();
$("#panel_"+(curPanel-1)).click(function(){ change(false); });
$("#panel_"+curPanel).unbind();
}
}
// 设置当面显示面板，这里设置的是3
growBigger("#panel_3");
var curPanel = 3;
$("#panel_"+(curPanel+1)).click(function(){ change(true); });
$("#panel_"+(curPanel-1)).click(function(){ change(false); });
//当方向图标被点击时向左或向右
$(".right").click(function(){ change(true); });
$(".left").click(function(){ change(false); });
2. 提供键盘支持
这个，在给小众软件（哦也，小众11月就4周年了，也会用上我做的主题）做主题的时候，就用过了。还是用了keycode:13 => enter，是我唯一知道。当然，现在又知道space和right、left键了。这是多好的用户体验呢！请自行理解，因为很简单：
$(window).keydown(function(event){
switch (event.keyCode) {
case 13: //回车
$(".right").click();
break;
case 32: //空格
$(".right").click();
break;
case 37: //左方向键
$(".left").click();
break;
case 39: //右方向键
$(".right").click();
break;
}
});
好吧，文章这么一篇，也折腾完了，多多指教！谢谢。我这人就怕文章错了，即使我可以有时候折腾着来改，但这不能愚弄群众啊，所以，这篇文章也显得这么简单，基本上属于代码分享了。嘿嘿…你，将就着先吧。
2009.10.24 2:15 am
2009.10.24 2:18 am
2009.10.24 2:21 am
2009.10.24 2:33 am
2009.10.24 8:24 am
2009.10.24 9:20 am
2009.10.24 10:49 am
2009.10.24 11:29 am
2009.10.24 12:33 pm
2009.10.24 4:41 pm
2009.10.24 7:20 pm
2009.10.24 9:03 pm
2009.10.24 10:59 pm
2009.10.24 11:16 pm
2009.10.25 1:37 pm
2009.10.25 2:09 pm
2009.10.25 3:01 pm
2009.10.26 11:09 am
2009.10.26 1:39 pm
2009.10.26 10:24 pm