fe / YOHOBUYPC · Commits

Go to a project

Authored by lore-w
Commit 6bec3f9a39d00a48675e8ce019f564fae378a665 1 parent ff0324c9

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

Inline Side-by-side
Showing 5 changed files with 141 additions and 101 deletions
@@ -20,6 +20,17 @@ @@ -20,6 +20,17 @@
20 {{!-- 搜索 --}} 20 {{!-- 搜索 --}}
21 {{#if searchListPage}} 21 {{#if searchListPage}}
22 <script> 22 <script>
23 - seajs.use(['js/product/list', 'js/product/product']); 23 + seajs.use(['js/product/list', 'js/product/product'], function (list, product) {
  24 + product.init(5);
  25 + });
24 </script> 26 </script>
  27 +{{/if}}
  28 +
  29 +{{!-- 列表 --}}
  30 +{{#if productListPage}}
  31 +<script>
  32 + seajs.use(['js/product/list', 'js/product/product'], function (list, product) {
  33 + product.init(4);
  34 + });
  35 +</script>
25 {{/if}} 36 {{/if}}
@@ -12,111 +12,134 @@ var $goodsContainer = $('.goods-container'), @@ -12,111 +12,134 @@ var $goodsContainer = $('.goods-container'),
12 $goodItemWrapper = $goodsContainer.find('.good-item-wrapper'), 12 $goodItemWrapper = $goodsContainer.find('.good-item-wrapper'),
13 $goodInfoMain = $goodsContainer.find('.good-info-main'), 13 $goodInfoMain = $goodsContainer.find('.good-info-main'),
14 $goodSelectColor = $goodsContainer.find('.good-select-color'), 14 $goodSelectColor = $goodsContainer.find('.good-select-color'),
15 - $productListNav = $('.product-list-nav');  
16 -  
17 -var productList = productEvent($goodItem, 5); 15 + $productListNav = $('.product-list-nav'),
  16 + productList;
18 17
19 /** 18 /**
20 - * @description 构造商品颜色列表的html结构  
21 - * @param data 商品颜色的数组，[url: '',src: '']  
22 - * @return json {'colorListStr': '', 'ulNum': ''}  
23 - * */  
24 -function createColorList(data) {  
25 - var colorListStr = '',  
26 - len = data.length,  
27 - row = 4, //每列ul放4个li  
28 - col = Math.ceil(len / row), //需要几**列**ul  
29 - i,  
30 - j,  
31 - index,  
32 - ulNum = 0;  
33 -  
34 - for (i = 0; i < col; i++) {  
35 - colorListStr += '<ul>';  
36 - for (j = 0; j < row; j++) {  
37 - index = i * row + j;  
38 - if (index === len) {  
39 - break;  
40 - }  
41 - colorListStr +=  
42 - '<li>' +  
43 - '<a href="' + data[i * row + j].url + '">' +  
44 - '<img src="' + data[i * row + j].src + '" />' +  
45 - '</a>' +  
46 - '</li>';  
47 -  
48 - if (j === row - 1) {  
49 - colorListStr += '</ul>';  
50 - ulNum++; 19 + * @description 初始化鼠标移入商品列表弹层效果
  20 + * @num 每列存放商品的个数
  21 + */
  22 +exports.init = function(num) {
  23 +
  24 + productList = productEvent($goodItem, num);
  25 +
  26 + /**
  27 + * @description 构造商品颜色列表的html结构
  28 + * @param data 商品颜色的数组，[url: '',src: '']
  29 + * @return json {'colorListStr': '', 'ulNum': ''}
  30 + * */
  31 + function createColorList(data) {
  32 + var colorListStr = '',
  33 + len = data.length,
  34 + row = 4, //每列ul放4个li
  35 + col = Math.ceil(len / row), //需要几**列**ul
  36 + i,
  37 + j,
  38 + index,
  39 + ulNum = 0;
  40 +
  41 + for (i = 0; i < col; i++) {
  42 + colorListStr += '<ul>';
  43 + for (j = 0; j < row; j++) {
  44 + index = i * row + j;
  45 + if (index === len) {
  46 + break;
  47 + }
  48 + colorListStr +=
  49 + '<li>' +
  50 + '<a href="' + data[i * row + j].url + '">' +
  51 + '<img src="' + data[i * row + j].src + '" />' +
  52 + '</a>' +
  53 + '</li>';
  54 +
  55 + if (j === row - 1) {
  56 + colorListStr += '</ul>';
  57 + ulNum++;
  58 + }
51 } 59 }
52 } 60 }
53 - }  
54 - if (ulNum < col) {  
55 - colorListStr += '</ul>';  
56 - }  
57 - return {  
58 - colorListStr: colorListStr,  
59 - ulNum: col  
60 - };  
61 -}  
62 -  
63 -productList.addHandler('MouseEnter', function(event) {  
64 -  
65 - var itemMr = 10, //list的右边距  
66 - itemMb = 35, //list的下边距  
67 - ulStr = '',  
68 - ulNum,  
69 - wrapperWidth,  
70 - diffWidth,  
71 - wrapperX = (event.targetX - 1) * (event.targetWidth + itemMr) - 21,  
72 - wrapperY = (event.targetY - 1) * (event.targetHeight + itemMb) + 25 - 19;  
73 -  
74 - $goodInfoMain.html('');  
75 - $goodSelectColor.html('');  
76 - $goodItemWrapper.css({  
77 - display: 'none'  
78 - });  
79 - $.ajax({  
80 - type: 'GET',  
81 - url: '/product/index/productColor',  
82 - dataType: 'json'  
83 - }).then(function(data) {  
84 -  
85 - ulStr = createColorList(data).colorListStr;  
86 - ulNum = createColorList(data).ulNum;  
87 -  
88 - $goodInfoMain.append(event.targetDuplicate);  
89 - $goodSelectColor.append($(ulStr));  
90 - wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth;  
91 -  
92 - //todo  
93 - diffWidth = event.offsetR - ((15 + 50) * ulNum + 25);  
94 - if (diffWidth <= 0) {  
95 - wrapperX = wrapperX + diffWidth; 61 + if (ulNum < col) {
  62 + colorListStr += '</ul>';
96 } 63 }
  64 + return {
  65 + colorListStr: colorListStr,
  66 + ulNum: col
  67 + };
  68 + }
  69 +
  70 + productList.addHandler('MouseEnter', function(event) {
  71 +
  72 +
  73 +
  74 + var itemMr = 10, //list的右边距
  75 + itemMb = 35, //list的下边距
  76 + ulStr = '',
  77 + ulNum,
  78 + wrapperWidth,
  79 + diffWidth,
  80 + wrapperX,
  81 + wrapperY,
  82 + wrapperPl, //鼠标移入时弹层的左内边距
  83 + wrapperPt, //鼠标移入时弹层的上内边距
  84 + containerPt; //商品列表容器的上内边距
  85 +
  86 + $goodInfoMain.html('');
  87 + $goodSelectColor.html('');
97 $goodItemWrapper.css({ 88 $goodItemWrapper.css({
98 - width: wrapperWidth,  
99 - left: wrapperX,  
100 - top: wrapperY,  
101 - display: 'inline-block' 89 + display: 'none'
102 }); 90 });
  91 + $.ajax({
  92 + type: 'GET',
  93 + url: '/product/index/productColor',
  94 + dataType: 'json'
  95 + }).then(function(data) {
103 96
  97 + ulStr = createColorList(data).colorListStr; //ajax请求的颜色列表
  98 + ulNum = createColorList(data).ulNum;//ajax请求的颜色的数量
  99 +
  100 + $goodInfoMain.append(event.targetDuplicate);
  101 + $goodSelectColor.append($(ulStr));
  102 +
  103 + wrapperPl = $goodItemWrapper.css('paddingLeft');
  104 + wrapperPt = $goodItemWrapper.css('paddingTop');
  105 + containerPt = $goodsContainer.css('paddingTop');
  106 +
  107 + wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth;
  108 +
  109 + wrapperX = (event.targetX - 1) * (event.targetWidth + itemMr) - (parseInt(wrapperPl) + 1);
  110 + wrapperY = (event.targetY - 1) *
  111 + (event.targetHeight + itemMb) + parseInt(containerPt) - (parseInt(wrapperPt) + 1);
  112 +
  113 + //todo
  114 + diffWidth = event.offsetR - ((15 + 50) * ulNum + 25);
  115 +
  116 + if (diffWidth <= 0) {
  117 + wrapperX = wrapperX + diffWidth;
  118 + }
  119 + $goodItemWrapper.css({
  120 + width: wrapperWidth,
  121 + left: wrapperX,
  122 + top: wrapperY,
  123 + display: 'inline-block'
  124 + });
  125 +
  126 + });
104 }); 127 });
105 -});  
106 128
107 -$goodItemWrapper.mouseleave(function() {  
108 - $goodInfoMain.html('');  
109 - $goodSelectColor.html('');  
110 - $goodItemWrapper.css({  
111 - display: 'none' 129 + $goodItemWrapper.mouseleave(function() {
  130 + $goodInfoMain.html('');
  131 + $goodSelectColor.html('');
  132 + $goodItemWrapper.css({
  133 + display: 'none'
  134 + });
112 }); 135 });
113 -});  
114 -  
115 -// 左侧导航  
116 -$productListNav.click(function() {  
117 - if ($(this).hasClass('active')) {  
118 - $(this).removeClass('active');  
119 - } else {  
120 - $(this).addClass('active');  
121 - }  
122 -});  
  136 +
  137 + // 左侧导航
  138 + $productListNav.click(function() {
  139 + if ($(this).hasClass('active')) {
  140 + $(this).removeClass('active');
  141 + } else {
  142 + $(this).addClass('active');
  143 + }
  144 + });
  145 +};
@@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
8 //图片 8 //图片
9 .good-detail-img { 9 .good-detail-img {
10 width: 100%; 10 width: 100%;
11 - height: 300px; 11 + /*height: 300px;*/
12 position: relative; 12 position: relative;
13 13
14 .good-thumb, img.lazy { 14 .good-thumb, img.lazy {
@@ -204,6 +204,11 @@ @@ -204,6 +204,11 @@
204 height: auto; 204 height: auto;
205 padding: 25px 0 0 0; 205 padding: 25px 0 0 0;
206 position: relative; 206 position: relative;
207 - width: 1150px + 10px;//每列增加右边距 207 + width: 970px + 10px;//每列增加右边距
  208 +
  209 + .good-info {
  210 + width: 235px;
  211 +
  212 + }
208 } 213 }
209 } 214 }
@@ -383,7 +383,8 @@ class IndexController extends AbstractAction @@ -383,7 +383,8 @@ class IndexController extends AbstractAction
383 public function listAction() 383 public function listAction()
384 { 384 {
385 $data = array( 385 $data = array(
386 - 'searchListPage' => true, 386 + //'searchListPage' => true,
  387 + 'productListPage' => true, //初始化js
387 388
388 'list' => array( 389 'list' => array(
389 'brandBanner' => array( 390 'brandBanner' => array(