一个简单的功能，鼠标放在图片上在该图片的上层显示放大后的图片，浮出的效果
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
$(
"ul.thumb li"
).hover(
function
() {
$(
this
).css({
'z-index'
:
'10'
});
var
_width = $(
this
).find(
"img"
).width() * 1.5,
_height = $(
this
).find(
"img"
).height() * 1.5,
_top = _height / 2,
_left = _width / 2;
$(
this
).find(
'img'
).addClass(
"hover"
).stop()
.animate({
marginTop:
'-'
+ _top +
'px'
,
marginLeft:
'-'
+ _left +
'px'
,
top:
'50%'
,
left:
'50%'
,
width: _width +
'px'
,
height: _height +
'px'
,
padding:
'10px'
}, 200);
} ,
function
() {
$(
this
).css({
'z-index'
:
'0'
});
$(
this
).find(
'img'
).removeClass(
"hover"
).stop()
.animate({
marginTop:
'0'
,
marginLeft:
'0'
,
top:
'0'
,
left:
'0'
,
width:
'100%'
,
height:
'165px'
,
padding:
'5px'
}, 400);
});
|
本文转自 爱笑嘚蛋蛋 51CTO博客，原文链接：http://blog.51cto.com/dd118/1976800，如需转载请自行联系原作者
