Toggle navigation
Toggle navigation
This project
Loading...
Sign in
fe
/
YOHOBUYPC
·
Commits
Go to a project
GitLab
Go to group
Project
Activity
Files
Commits
Pipelines
0
Builds
0
Graphs
Milestones
Issues
0
Merge Requests
2
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
455859380e2b417c68110e41d7b98717fe5c3b7b
1 parent
d2adaba9
商品列表鼠标移入效果增加边界判断
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
43 additions
and
11 deletions
web-static/js/common/product-event.js
web-static/js/product/product.js
web-static/js/common/product-event.js
View file @
4558593
...
...
@@ -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'
:
...
...
web-static/js/product/product.js
View file @
4558593
...
...
@@ -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'
});
});
...
...
Please
register
or
login
to post a comment