网站总算是开发完成了，现在运行也比较稳定，今后打算写写一些技术文章，好好总结一下。

看看效果图：

再看看HTML代码：

 

产品分类HTML

 

常规的做法是每个节点如<a href="/product-11.aspx" name="11">驱动IC</a>这样的节点应该出现mouseover或mouseout之类的代码。这样做不好的一点是会产生大量重复的代码，而且还需要做每个相应的下拉菜单层，更增加了文件大小，网站打开速度自然比较慢。而且分类是动态生成的更不可能这样做。

我的思路是：

1，只做一个浮动层，即“发布供应”“发布求购”下拉层。

2，鼠标移动的时候JS动态计算在哪一个产品分类上，然后传该分类的参数给层（动态生成层HTML代码）。

 

主要核心代码如下：

 

//显示产品发布下拉菜单
var currClass;
;(function () {
  var showMenu = function(event) {
    var el = Event.element(event);
    if (el.tagName != 'A') return;
    var upel = $(el).up(1).id;

    if(upel == 'lbic' || upel == 'lbnoic') {
      currClass =el.innerHTML;
      var tipbox = $('lb_menu');

      var dimensions = Element.getDimensions(tipbox);
      var element_width = dimensions.width;
      var element_height = dimensions.height;
      
      var pos = Position.cumulativeOffset(el);
      var posX = pos[0];
      var posY = pos[1] + 13;
      
      if ((element_width + posX) >= getWindowWidth()) posX -= element_width;
      if ((element_height + posY) >= getWindowHeight()) posY -= element_height + 13;
      
      UIstr(el, tipbox);
      tipbox.setStyle({ top: posY + 'px', left: posX + 'px'});    
      tipbox.show();
    }
  };
  
  var hideMenu = function(event) {
    var lb_menu = $('lb_menu');
    if (lb_menu) lb_menu.hide();
  };

  Event.observe(document, 'mouseover', showMenu, false);
  Event.observe(document, 'mouseout', hideMenu, false);
})();

 

这里功能是鼠标移动，动态注册分类节点JS事件，并执行显示或隐藏下拉层。其它相关JS如下：

 

生成下拉UI

 

上面代码看起来就明白，就是生成下拉层HTML代码及下拉层的JS事件。

 

Event.observe(document, 'mouseover', showMenu, false);
Event.observe(document, 'mouseout', hideMenu, false);

 大家注意到上面的分类节点事件，当离开分类时会隐藏下拉层，所以下拉层需要有mouseover事件

<ul id="lb_menu" class="menu" style=" display: none" onMouseOver="$(this).show()"></ul>

 

就这样做完了，不知大家明白了没有^^

 

做个小广告^^

姓 名：彭辉       
年 龄：25      
工作经验：3年      
求职意向：行业门户平台/基本BS架构应用系统开发
工作地点：北京  

目前在职，想换个新的环境，有意QQ联系，哪位大哥推荐也行啊^^
QQ：775851086

近期作品
买卖IC网
www.mmic.net.cn
整部技术架构均本人独立设计并完成开发。

 

文章待续。。。