商品列表鼠标移入效果增加边界判断

@@ -60,7 +60,8 @@ module.exports = function($o, rowWidth) {
     var pMouseHover = new ProductEvent();
 
     var targetWidth = $o.eq(0).width(),
-        targetHeight = $o.eq(0).height();
+        targetHeight = $o.eq(0).height(),
+        winW = $(window).width();
 
     function handleEvent(event) {
         var $target,
@@ -68,7 +69,9 @@ module.exports = function($o, rowWidth) {
             targetY = 0,
             rowW = rowWidth,
             activeIndex = 0,
-            $targetDuplicate = '';
+            $targetDuplicate = '',
+            offsetL = 0,
+            offsetR = 0;
 
 
         switch (event.type) {
@@ -79,6 +82,11 @@ module.exports = function($o, rowWidth) {
                 activeIndex = $target.index() + 1;
                 targetX = (activeIndex % rowW) === 0 ? rowW : activeIndex % rowW;
                 targetY = Math.ceil(activeIndex / rowW);
+                offsetL = $target.offset().left;
+                offsetR = winW - (offsetL + targetWidth);
+
+
+                console.log($target.offset().left);
 
                 pMouseHover.fire({
                     type: 'MouseEnter',
@@ -89,7 +97,9 @@ module.exports = function($o, rowWidth) {
                     targetY: targetY,
                     rowWidth: rowW,
                     activeIndex: activeIndex,
-                    targetDuplicate: $targetDuplicate
+                    targetDuplicate: $targetDuplicate,
+                    offsetL: offsetL,
+                    offsetR: offsetR
                 });
                 break;
             case 'mouseleave':

@@ -15,7 +15,11 @@ var $goodsContainer = $('.goods-container'),
 
 var MouseOver = productEvent($goodItem, 5);
 
-// 构造html
+/**
+ * @description 构造商品颜色列表的html结构
+ * @param data 商品颜色的数组，[url: '',src: '']
+ * @return json {'colorListStr': '', 'ulNum': ''}
+ * */
 function createColorList(data) {
     var colorListStr = '',
         len = data.length,
@@ -49,13 +53,20 @@ function createColorList(data) {
     if (ulNum < col) {
         colorListStr += '</ul>';
     }
-    return colorListStr;
+    return {
+        colorListStr: colorListStr,
+        ulNum: col
+    };
 }
 
 MouseOver.addHandler('MouseEnter', function(event) {
 
     var itemMr = 10, //list的右边距
         itemMb = 35, //list的下边距
+        ulStr = '',
+        ulNum,
+        wrapperWidth,
+        diffWidth,
         wrapperX = (event.targetX - 1) * (event.targetWidth + itemMr) - 21,
         wrapperY = (event.targetY - 1) * (event.targetHeight + itemMb) + 25 - 19;
 
@@ -70,14 +81,25 @@ MouseOver.addHandler('MouseEnter', function(event) {
         dataType: 'json'
     }).then(function(data) {
 
+        ulStr = createColorList(data).colorListStr;
+        ulNum = createColorList(data).ulNum;
+
         $goodInfoMain.append(event.targetDuplicate);
-        $goodSelectColor.append($(createColorList(data)));
-    });
+        $goodSelectColor.append($(ulStr));
+        wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth;
+
+        //
+        diffWidth = event.offsetR - ((15 + 50) * ulNum + 25);
+        if (diffWidth <= 0) {
+            wrapperX = wrapperX + diffWidth;
+        }
+        $goodItemWrapper.css({
+            width: wrapperWidth,
+            left: wrapperX,
+            top: wrapperY,
+            display: 'inline-block'
+        });
 
-    $goodItemWrapper.css({
-        left: wrapperX,
-        top: wrapperY,
-        display: 'inline-block'
     });
 });