商品列表页鼠标移入效果适配、product.js优化适配每列不同的商品数量

@@ -20,6 +20,17 @@
 {{!-- 搜索 --}}
 {{!-- 搜索 --}}
 {{#if searchListPage}}
 {{#if searchListPage}}
     <script>
     <script>
-        seajs.use(['js/product/list', 'js/product/product']);
+        seajs.use(['js/product/list', 'js/product/product'], function (list, product) {
+            product.init(5);
+        });
     </script>
     </script>
 {{/if}}
 {{/if}}
+
+{{!-- 列表 --}}
+{{#if productListPage}}
+<script>
+    seajs.use(['js/product/list', 'js/product/product'], function (list, product) {
+        product.init(4);
+    });
+</script>
+{{/if}}

@@ -12,16 +12,23 @@ var $goodsContainer = $('.goods-container'),
     $goodItemWrapper = $goodsContainer.find('.good-item-wrapper'),
     $goodItemWrapper = $goodsContainer.find('.good-item-wrapper'),
     $goodInfoMain = $goodsContainer.find('.good-info-main'),
     $goodInfoMain = $goodsContainer.find('.good-info-main'),
     $goodSelectColor = $goodsContainer.find('.good-select-color'),
     $goodSelectColor = $goodsContainer.find('.good-select-color'),
-    $productListNav = $('.product-list-nav');
-
-var productList = productEvent($goodItem, 5);
+    $productListNav = $('.product-list-nav'),
+    productList;
 
 
 /**
 /**
+ * @description 初始化鼠标移入商品列表弹层效果
+ * @num 每列存放商品的个数
+ */
+exports.init = function(num) {
+
+    productList = productEvent($goodItem, num);
+
+    /**
      * @description 构造商品颜色列表的html结构
      * @description 构造商品颜色列表的html结构
      * @param data 商品颜色的数组，[url: '',src: '']
      * @param data 商品颜色的数组，[url: '',src: '']
      * @return json {'colorListStr': '', 'ulNum': ''}
      * @return json {'colorListStr': '', 'ulNum': ''}
      * */
      * */
-function createColorList(data) {
+    function createColorList(data) {
         var colorListStr = '',
         var colorListStr = '',
             len = data.length,
             len = data.length,
             row = 4, //每列ul放4个li
             row = 4, //每列ul放4个li
@@ -58,9 +65,11 @@ function createColorList(data) {
             colorListStr: colorListStr,
             colorListStr: colorListStr,
             ulNum: col
             ulNum: col
         };
         };
-}
+    }
+
+    productList.addHandler('MouseEnter', function(event) {
+
 
 
-productList.addHandler('MouseEnter', function(event) {
 
 
         var itemMr = 10, //list的右边距
         var itemMr = 10, //list的右边距
             itemMb = 35, //list的下边距
             itemMb = 35, //list的下边距
@@ -68,8 +77,11 @@ productList.addHandler('MouseEnter', function(event) {
             ulNum,
             ulNum,
             wrapperWidth,
             wrapperWidth,
             diffWidth,
             diffWidth,
-        wrapperX = (event.targetX - 1) * (event.targetWidth + itemMr) - 21,
-        wrapperY = (event.targetY - 1) * (event.targetHeight + itemMb) + 25 - 19;
+            wrapperX,
+            wrapperY,
+            wrapperPl, //鼠标移入时弹层的左内边距
+            wrapperPt, //鼠标移入时弹层的上内边距
+            containerPt; //商品列表容器的上内边距
 
 
         $goodInfoMain.html('');
         $goodInfoMain.html('');
         $goodSelectColor.html('');
         $goodSelectColor.html('');
@@ -82,15 +94,25 @@ productList.addHandler('MouseEnter', function(event) {
             dataType: 'json'
             dataType: 'json'
         }).then(function(data) {
         }).then(function(data) {
 
 
-        ulStr = createColorList(data).colorListStr;
-        ulNum = createColorList(data).ulNum;
+            ulStr = createColorList(data).colorListStr; //ajax请求的颜色列表
+            ulNum = createColorList(data).ulNum;//ajax请求的颜色的数量
 
 
             $goodInfoMain.append(event.targetDuplicate);
             $goodInfoMain.append(event.targetDuplicate);
             $goodSelectColor.append($(ulStr));
             $goodSelectColor.append($(ulStr));
+
+            wrapperPl = $goodItemWrapper.css('paddingLeft');
+            wrapperPt = $goodItemWrapper.css('paddingTop');
+            containerPt = $goodsContainer.css('paddingTop');
+
             wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth;
             wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth;
 
 
+            wrapperX = (event.targetX - 1) * (event.targetWidth + itemMr) - (parseInt(wrapperPl) + 1);
+            wrapperY = (event.targetY - 1) *
+            (event.targetHeight + itemMb) + parseInt(containerPt) - (parseInt(wrapperPt) + 1);
+
             //todo
             //todo
             diffWidth = event.offsetR - ((15 + 50) * ulNum + 25);
             diffWidth = event.offsetR - ((15 + 50) * ulNum + 25);
+
             if (diffWidth <= 0) {
             if (diffWidth <= 0) {
                 wrapperX = wrapperX + diffWidth;
                 wrapperX = wrapperX + diffWidth;
             }
             }
@@ -102,21 +124,22 @@ productList.addHandler('MouseEnter', function(event) {
             });
             });
 
 
         });
         });
-});
+    });
 
 
-$goodItemWrapper.mouseleave(function() {
+    $goodItemWrapper.mouseleave(function() {
         $goodInfoMain.html('');
         $goodInfoMain.html('');
         $goodSelectColor.html('');
         $goodSelectColor.html('');
         $goodItemWrapper.css({
         $goodItemWrapper.css({
             display: 'none'
             display: 'none'
         });
         });
-});
+    });
 
 
-// 左侧导航
-$productListNav.click(function() {
+    // 左侧导航
+    $productListNav.click(function() {
         if ($(this).hasClass('active')) {
         if ($(this).hasClass('active')) {
             $(this).removeClass('active');
             $(this).removeClass('active');
         } else {
         } else {
             $(this).addClass('active');
             $(this).addClass('active');
         }
         }
-});
+    });
+};

@@ -8,7 +8,7 @@
     //图片
     //图片
     .good-detail-img {
     .good-detail-img {
         width: 100%;
         width: 100%;
-        height: 300px;
+        /*height: 300px;*/
         position: relative;
         position: relative;
 
 
         .good-thumb, img.lazy {
         .good-thumb, img.lazy {

@@ -204,6 +204,11 @@
         height: auto;
         height: auto;
         padding: 25px 0 0 0;
         padding: 25px 0 0 0;
         position: relative;
         position: relative;
-        width: 1150px + 10px;//每列增加右边距
+        width: 970px + 10px;//每列增加右边距
+
+        .good-info {
+            width: 235px;
+
+        }
     }
     }
 }
 }

@@ -383,7 +383,8 @@ class IndexController extends AbstractAction
     public function listAction()
     public function listAction()
     {
     {
         $data = array(
         $data = array(
-            'searchListPage' => true,
+            //'searchListPage' => true,
+            'productListPage' => true, //初始化js
 
 
             'list' => array(
             'list' => array(
                 'brandBanner' => array(
                 'brandBanner' => array(