Toggle navigation
Toggle navigation
This project
Loading...
Sign in
chenchao
/
YOHOBUYPC
·
Commits
Go to a project
GitLab
Go to dashboard
Project
Activity
Files
Commits
Pipelines
0
Builds
0
Graphs
Milestones
Issues
0
Merge Requests
0
Members
Labels
Wiki
Forks
Network
Create a new issue
Download as
Email Patches
Plain Diff
Browse Files
Authored by
lore-w
9 years ago
Commit
6bec3f9a39d00a48675e8ce019f564fae378a665
1 parent
ff0324c9
商品列表页鼠标移入效果适配、product.js优化适配每列不同的商品数量
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
141 additions
and
101 deletions
template/www.yohobuy.com/partials/layout/use.phtml
web-static/js/product/product.js
web-static/sass/product/_good.scss
web-static/sass/product/_list.scss
yohobuy/www.yohobuy.com/application/modules/Product/controllers/Index.php
template/www.yohobuy.com/partials/layout/use.phtml
View file @
6bec3f9
...
...
@@ -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
...
...
web-static/js/product/product.js
View file @
6bec3f9
...
...
@@ -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
...
...
web-static/sass/product/_good.scss
View file @
6bec3f9
...
...
@@ -8,7 +8,7 @@
//图片
.good-detail-img
{
width
:
100%
;
height
:
300px
;
/*height: 300px;*/
position
:
relative
;
.good-thumb
,
img
.lazy
{
...
...
web-static/sass/product/_list.scss
View file @
6bec3f9
...
...
@@ -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
...
...
yohobuy/www.yohobuy.com/application/modules/Product/controllers/Index.php
View file @
6bec3f9
...
...
@@ -383,7 +383,8 @@ class IndexController extends AbstractAction
public
function
listAction
()
{
$data
=
array
(
'searchListPage'
=>
true
,
//'searchListPage' => true,
'productListPage'
=>
true
,
//初始化js
'list'
=>
array
(
'brandBanner'
=>
array
(
...
...
Please
register
or
login
to post a comment