fe / YOHOBUYWAP · 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 @@
{{!-- 搜索 --}}
{{#if searchListPage}}
<script>
seajs.use(['js/product/list', 'js/product/product']);
seajs.use(['js/product/list', 'js/product/product'], function (list, product) {
product.init(5);
});
</script>
{{/if}}
{{!-- 列表 --}}
{{#if productListPage}}
<script>
seajs.use(['js/product/list', 'js/product/product'], function (list, product) {
product.init(4);
});
</script>
{{/if}}
\ No newline at end of file
... ...
... ... @@ -12,111 +12,134 @@ var $goodsContainer = $('.goods-container'),
$goodItemWrapper = $goodsContainer.find('.good-item-wrapper'),
$goodInfoMain = $goodsContainer.find('.good-info-main'),
$goodSelectColor = $goodsContainer.find('.good-select-color'),
$productListNav = $('.product-list-nav');
var productList = productEvent($goodItem, 5);
$productListNav = $('.product-list-nav'),
productList;
/**
* @description 构造商品颜色列表的html结构
* @param data 商品颜色的数组，[url: '',src: '']
* @return json {'colorListStr': '', 'ulNum': ''}
* */
function createColorList(data) {
var colorListStr = '',
len = data.length,
row = 4, //每列ul放4个li
col = Math.ceil(len / row), //需要几**列**ul
i,
j,
index,
ulNum = 0;
for (i = 0; i < col; i++) {
colorListStr += '<ul>';
for (j = 0; j < row; j++) {
index = i * row + j;
if (index === len) {
break;
}
colorListStr +=
'<li>' +
'<a href="' + data[i * row + j].url + '">' +
'<img src="' + data[i * row + j].src + '" />' +
'</a>' +
'</li>';
if (j === row - 1) {
colorListStr += '</ul>';
ulNum++;
* @description 初始化鼠标移入商品列表弹层效果
* @num 每列存放商品的个数
*/
exports.init = function(num) {
productList = productEvent($goodItem, num);
/**
* @description 构造商品颜色列表的html结构
* @param data 商品颜色的数组，[url: '',src: '']
* @return json {'colorListStr': '', 'ulNum': ''}
* */
function createColorList(data) {
var colorListStr = '',
len = data.length,
row = 4, //每列ul放4个li
col = Math.ceil(len / row), //需要几**列**ul
i,
j,
index,
ulNum = 0;
for (i = 0; i < col; i++) {
colorListStr += '<ul>';
for (j = 0; j < row; j++) {
index = i * row + j;
if (index === len) {
break;
}
colorListStr +=
'<li>' +
'<a href="' + data[i * row + j].url + '">' +
'<img src="' + data[i * row + j].src + '" />' +
'</a>' +
'</li>';
if (j === row - 1) {
colorListStr += '</ul>';
ulNum++;
}
}
}
}
if (ulNum < col) {
colorListStr += '</ul>';
}
return {
colorListStr: colorListStr,
ulNum: col
};
}
productList.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;
$goodInfoMain.html('');
$goodSelectColor.html('');
$goodItemWrapper.css({
display: 'none'
});
$.ajax({
type: 'GET',
url: '/product/index/productColor',
dataType: 'json'
}).then(function(data) {
ulStr = createColorList(data).colorListStr;
ulNum = createColorList(data).ulNum;
$goodInfoMain.append(event.targetDuplicate);
$goodSelectColor.append($(ulStr));
wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth;
//todo
diffWidth = event.offsetR - ((15 + 50) * ulNum + 25);
if (diffWidth <= 0) {
wrapperX = wrapperX + diffWidth;
if (ulNum < col) {
colorListStr += '</ul>';
}
return {
colorListStr: colorListStr,
ulNum: col
};
}
productList.addHandler('MouseEnter', function(event) {
var itemMr = 10, //list的右边距
itemMb = 35, //list的下边距
ulStr = '',
ulNum,
wrapperWidth,
diffWidth,
wrapperX,
wrapperY,
wrapperPl, //鼠标移入时弹层的左内边距
wrapperPt, //鼠标移入时弹层的上内边距
containerPt; //商品列表容器的上内边距
$goodInfoMain.html('');
$goodSelectColor.html('');
$goodItemWrapper.css({
width: wrapperWidth,
left: wrapperX,
top: wrapperY,
display: 'inline-block'
display: 'none'
});
$.ajax({
type: 'GET',
url: '/product/index/productColor',
dataType: 'json'
}).then(function(data) {
ulStr = createColorList(data).colorListStr; //ajax请求的颜色列表
ulNum = createColorList(data).ulNum;//ajax请求的颜色的数量
$goodInfoMain.append(event.targetDuplicate);
$goodSelectColor.append($(ulStr));
wrapperPl = $goodItemWrapper.css('paddingLeft');
wrapperPt = $goodItemWrapper.css('paddingTop');
containerPt = $goodsContainer.css('paddingTop');
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
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.mouseleave(function() {
$goodInfoMain.html('');
$goodSelectColor.html('');
$goodItemWrapper.css({
display: 'none'
$goodItemWrapper.mouseleave(function() {
$goodInfoMain.html('');
$goodSelectColor.html('');
$goodItemWrapper.css({
display: 'none'
});
});
});
// 左侧导航
$productListNav.click(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
\ No newline at end of file
// 左侧导航
$productListNav.click(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
};
\ No newline at end of file
... ...
... ... @@ -8,7 +8,7 @@
//图片
.good-detail-img {
width: 100%;
height: 300px;
/*height: 300px;*/
position: relative;
.good-thumb, img.lazy {
... ...
... ... @@ -204,6 +204,11 @@
height: auto;
padding: 25px 0 0 0;
position: relative;
width: 1150px + 10px;//每列增加右边距
width: 970px + 10px;//每列增加右边距
.good-info {
width: 235px;
}
}
}
\ No newline at end of file
... ...
... ... @@ -383,7 +383,8 @@ class IndexController extends AbstractAction
public function listAction()
{
$data = array(
'searchListPage' => true,
//'searchListPage' => true,
'productListPage' => true, //初始化js
'list' => array(
'brandBanner' => array(
... ...