一個簡單的效果，滑鼠移到圖片上就可以顯示查看該圖片的大圖，完全用css寫的，置中用到負邊距置中方式。
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>無標題文檔</title><br /><mce:style type="text/css"><!--<br /> * {<br /> margin:0;<br /> padding:0;<br /> }<br /> img {border:0;}<br /> #main_body {<br /> width:730px;<br /> margin:100px auto 0;<br /> padding:10px 0 30px 10px;<br /> border:#CCCCCC 1px solid;<br /> background-color:#E6E6E6;<br /> font-size:12px;<br /> }<br /> #main_body ul {<br /> height:210px;<br /> }<br /> #main_body li {<br /> float:left;<br /> height:210px;<br /> width:24.5%;<br /> overflow:visible;<br /> list-style:none;<br /> list-style-position:outside;<br /> }<br /> #main_body a span img {<br /> margin:0 auto;<br /> width:100%;<br /> }<br /> .main a:link span, .main a:visited span {<br /> width:160px;<br /> height:160px;<br /> border:1px solid #ccc;<br /> padding:1px;<br /> overflow:hidden;<br /> display:block;<br /> }<br /> .main a:link, .main a:visited {<br /> margin:0 auto;<br /> height:210px;<br /> width:166px;<br /> display:block;<br /> }<br /> .main a:hover, .main a:active {<br /> width:232px;<br /> height:300px;<br /> position:relative;<br /> overflow:hidden;<br /> left:50%;<br /> margin-left:-100px;<br /> margin-top:-64px;<br /> z-index:100px;<br /> cursor:pointer;<br /> }<br /> .main a:hover span, .main a:active span{<br /> width:220px;<br /> height:220px;<br /> display:block;<br /> overflow:hidden;<br /> background:#fff;<br /> padding:2px;<br /> border:2px solid #e6e2e3;<br /> }<br /> .main a.last:hover, .main a.last:active {<br /> width:232px;<br /> height:300px;<br /> position:relative;<br /> overflow:hidden;<br /> left:50%;<br /> margin-left:-123px;<br /> z-index:100px;<br /> cursor:pointer;<br /> }<br /> .main a b {<br /> width:160px;<br /> margin:6px auto 2px;<br /> display:block;<br /> overflow:hidden;<br /> text-align:center;<br /> height:36px;<br /> line-height:18px;<br /> font-weight:normal;<br /> }<br /> .main a em {<br /> width:160px;<br /> margin:0 auto;<br /> line-height:18px;<br /> font-weight:bold;<br /> color:#FF6600;<br /> display:block;<br /> text-align:center;<br /> }</p><p>--></mce:style><style type="text/css" mce_bogus="1"> * {<br /> margin:0;<br /> padding:0;<br /> }<br /> img {border:0;}<br /> #main_body {<br /> width:730px;<br /> margin:100px auto 0;<br /> padding:10px 0 30px 10px;<br /> border:#CCCCCC 1px solid;<br /> background-color:#E6E6E6;<br /> font-size:12px;<br /> }<br /> #main_body ul {<br /> height:210px;<br /> }<br /> #main_body li {<br /> float:left;<br /> height:210px;<br /> width:24.5%;<br /> overflow:visible;<br /> list-style:none;<br /> list-style-position:outside;<br /> }<br /> #main_body a span img {<br /> margin:0 auto;<br /> width:100%;<br /> }<br /> .main a:link span, .main a:visited span {<br /> width:160px;<br /> height:160px;<br /> border:1px solid #ccc;<br /> padding:1px;<br /> overflow:hidden;<br /> display:block;<br /> }<br /> .main a:link, .main a:visited {<br /> margin:0 auto;<br /> height:210px;<br /> width:166px;<br /> display:block;<br /> }<br /> .main a:hover, .main a:active {<br /> width:232px;<br /> height:300px;<br /> position:relative;<br /> overflow:hidden;<br /> left:50%;<br /> margin-left:-100px;<br /> margin-top:-64px;<br /> z-index:100px;<br /> cursor:pointer;<br /> }<br /> .main a:hover span, .main a:active span{<br /> width:220px;<br /> height:220px;<br /> display:block;<br /> overflow:hidden;<br /> background:#fff;<br /> padding:2px;<br /> border:2px solid #e6e2e3;<br /> }<br /> .main a.last:hover, .main a.last:active {<br /> width:232px;<br /> height:300px;<br /> position:relative;<br /> overflow:hidden;<br /> left:50%;<br /> margin-left:-123px;<br /> z-index:100px;<br /> cursor:pointer;<br /> }<br /> .main a b {<br /> width:160px;<br /> margin:6px auto 2px;<br /> display:block;<br /> overflow:hidden;<br /> text-align:center;<br /> height:36px;<br /> line-height:18px;<br /> font-weight:normal;<br /> }<br /> .main a em {<br /> width:160px;<br /> margin:0 auto;<br /> line-height:18px;<br /> font-weight:bold;<br /> color:#FF6600;<br /> display:block;<br /> text-align:center;<br /> }</p><p> </style><br /></head><br /><body><br /><div id="main_body" class="main"><br /><ul><br /> <li><a href="#" mce_href="#" target="_blank"><span><img src="http://img08.taobaocdn.com/bao/uploaded/i8/T13t0eXdgtK0KKdRA2_044834.jpg_b.jpg" mce_src="http://img08.taobaocdn.com/bao/uploaded/i8/T13t0eXdgtK0KKdRA2_044834.jpg_b.jpg" /></span><b>【男人密碼】★【七匹狼】高檔男士休閑西服單件 00834203</b><i>￥：268.0</i></a></li><br /> <li><a href="#" mce_href="#" target="_blank"><span><img src="http://img08.taobaocdn.com/bao/uploaded/i8/T13t0eXdgtK0KKdRA2_044834.jpg_b.jpg" mce_src="http://img08.taobaocdn.com/bao/uploaded/i8/T13t0eXdgtK0KKdRA2_044834.jpg_b.jpg" /></span><b>【男人密碼】★【七匹狼】高檔男士休閑西服單件 00834203</b><i>￥：268.0</i></a></li><br /> <li><a href="#" mce_href="#" target="_blank"><span><img src="http://img08.taobaocdn.com/bao/uploaded/i8/T13t0eXdgtK0KKdRA2_044834.jpg_b.jpg" mce_src="http://img08.taobaocdn.com/bao/uploaded/i8/T13t0eXdgtK0KKdRA2_044834.jpg_b.jpg" /></span><b>【男人密碼】★【七匹狼】高檔男士休閑西服單件 00834203</b><i>￥：268.0</i></a></li><br /> <li><a href="#" mce_href="#" target="_blank" class="last"><span><img src="http://img08.taobaocdn.com/bao/uploaded/i8/T13t0eXdgtK0KKdRA2_044834.jpg_b.jpg" mce_src="http://img08.taobaocdn.com/bao/uploaded/i8/T13t0eXdgtK0KKdRA2_044834.jpg_b.jpg" /></span><b>【男人密碼】★【七匹狼】高檔男士休閑西服單件 00834203</b><i>￥：268.0</i></a></li><br /></ul><br /><div><br /></body><br /></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
