商品信息滑动门效果--tc35.org

2016-07-07 16:50 来源：www.chinab4c.com 作者：ecshop专家

感谢buyeah 意见和 命名（商品信息实现滑动门效果）。
现在ecmall的商品详细页里面的商品评论、销售记录需要点击才可以看到单独的信息，而且是要重新请求服务器的。有不方便之处，所以将他改成了当鼠标放上去后就可以切换的。

将下面的代码加到/themes/store/default/goodsinfo.html里即可实现滑动显示商品评论、销售记录等。
另外，下面的show()这个方法可以替换成slideDown("fast")、slideDown("slow")或者fadeIn("fast")、fadeIn("slow")以及一些其它的jquery动画。
我演示的地址放的是fadeIn("fast")这个效果。另外需要注意的是我只是在鼠标到达的时候实现了滑动效果，这链接仍然可以点击，不过点击过其它的链接后滑动效果就没法显示了。
好了，enjoy吧。

在线测试地址：
http://tt.tc35.org/mall/index.php?app=goods&id=19(朋友提供的空间速度很快，要买空间的可以联系。)
http://tc35.org/test/index.php?app=goods&id=19
  1. <script type="text/javascript">
  2. function hidediv()
  3. {
  4. $('.option_box').add('.module_currency').hide();
  5. }
  6. function stopanti()
  7. {
  8. $('.option_box').add('.module_currency').stop('clearQueue ','gotoEnd');
  9. }
  10. $(function(){
  11. $('.option_box').after('<div class="clear"></div>');
  12. $('.module_currency').css({"margin-top":"10px"});
  13. $('.user_menu li').mouseover(function(){
  14. $('.user_menu li a').removeClass('active');
  15. $('.user_menu li a').addClass('normal');
  16. $(this)
  17. .children('a').removeClass('normal')
  18. .addClass('active');
  19. switch($('.user_menu li').index($(this)[0])){
  20. case 0:
  21. //hidediv();
  22. stopanti();
  23. $('.option_box').add('.module_currency'). show();
  24. break;
  25. case 1:
  26. hidediv();
  27. stopanti();
  28. $('.module_currency').eq(0). show();
  29. break;
  30. case 2:
  31. hidediv();
  32. stopanti();
  33. $('.module_currency').eq(1). show();
  34. break;
  35. case 3:
  36. hidediv();
  37. stopanti();
  38. $('.module_currency').eq(2).show();
  39. break;
  40. }
  41. });
  42. });
  43. </script>
复制代码

回答：
鼠标移到这个地方就会切换。

顶了!已经用上!!!

好东西，我支持你！

支持