移动鼠标实现图片的缩放
效果图：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0047)http://solardreamstudios.com/_img/learn/css/pg/ -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Modified Hoverbox Image Gallery</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content=noindex,nofollow name=robots>
<STYLE type=text/css>* {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY {
PADDING-RIGHT: 30px; PADDING-LEFT: 30px; BACKGROUND: #fff; PADDING-BOTTOM: 30px; MARGIN: 0px; COLOR: #666; PADDING-TOP: 30px; TEXT-ALIGN: center
}
H1 {
FONT: bold 16px Arial, Helvetica, sans-serif
}
P {
MARGIN: 15px 0px; FONT: 11px Arial, Helvetica, sans-serif
}
A {
FONT-WEIGHT: bold; COLOR: #900; TEXT-DECORATION: none
}
A:hover {
BACKGROUND: #900; COLOR: #fff
}
HR {
CLEAR: both; MARGIN: 24px 0px; _margin: 0
}
#page-container {
MARGIN: 0px auto; WIDTH: 350px; TEXT-ALIGN: left
}
.pg {
LIST-STYLE-IMAGE: none; WIDTH: 350px; LIST-STYLE-TYPE: none
}
.pg:unknown {
CLEAR: both; DISPLAY: block; VISIBILITY: hidden; HEIGHT: 0px; content: "."
}
.pg LI {
DISPLAY: inline; LIST-STYLE-IMAGE: none; LIST-STYLE-TYPE: none
}
.pg LI A {
BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #ccc 1px solid; DISPLAY: block; PADDING-LEFT: 4px; FLOAT: left; PADDING-BOTTOM: 4px; MARGIN: 2px; BORDER-LEFT: #ccc 1px solid; WIDTH: 100px; PADDING-TOP: 4px; BORDER-BOTTOM: #ccc 1px solid; POSITION: relative; HEIGHT: 75px
}
.pg LI A:hover {
FONT-SIZE: 100%; Z-INDEX: 2
}
.pg LI A IMG {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; WIDTH: 100px; BORDER-BOTTOM: 0px; POSITION: absolute; HEIGHT: 75px
}
.pg LI A:hover IMG {
Z-INDEX: 1; LEFT: -50px; WIDTH: 200px; TOP: -37px; HEIGHT: 150px
}
.pg LI A:active IMG {
Z-INDEX: 1; LEFT: -50px; WIDTH: 200px; TOP: -37px; HEIGHT: 150px
}
.pg LI A:focus IMG {
Z-INDEX: 1; LEFT: -50px; WIDTH: 200px; TOP: -37px; HEIGHT: 150px
}
</STYLE>
<META content="MSHTML 6.00.6000.16481" name=GENERATOR></HEAD>
<BODY>
<DIV id=page-container>
<H1>鼠标移动事件</H1>
<P>将你的鼠标移动到图片上，你就能看见大的图片。。。。 </P>
<HR>
<UL class=pg>
<LI><A href="Modified%20Hoverbox%20Image%20Gallery_files/flowers.jpg"><IMG
alt="" src="Modified%20Hoverbox%20Image%20Gallery_files/flowers.jpg"></A>
<LI><A href="Modified%20Hoverbox%20Image%20Gallery_files/flowers.jpg"><IMG
alt="" src="Modified%20Hoverbox%20Image%20Gallery_files/flowers.jpg"></A>
<LI><A href="Modified%20Hoverbox%20Image%20Gallery_files/flowers.jpg"><IMG
alt="" src="Modified%20Hoverbox%20Image%20Gallery_files/flowers.jpg"></A>
<LI><A href="Modified%20Hoverbox%20Image%20Gallery_files/flowers.jpg"><IMG
alt="" src="Modified%20Hoverbox%20Image%20Gallery_files/flowers.jpg"></A>
<LI><A href="Modified%20Hoverbox%20Image%20Gallery_files/flowers.jpg"><IMG
alt="" src="Modified%20Hoverbox%20Image%20Gallery_files/flowers.jpg"></A>
</LI></UL>
<HR>
<P> </P>
</DIV></BODY></HTML>