CSS+JS打造的很酷的动感缩放图片展示效果丨芯晴网页特效丨CsrCode.CN
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS+JS打造的很酷的动感缩放图片展示效果丨芯晴网页特效丨CsrCode.CN</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
body {
margin: 30px;
padding: 0;
border: 0;
color: #000000;
font-family: helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
text-align: center;
}
img {
border: 0;
}
#main .photoblock-many {
margin: 0 10px 10px -4px;
clear: both;
width: 100%;
text-align: center;
font-size: 10px;
color: #888888;
}
.alink a, alink a:hover {
margin: 100px auto;
text-align: center;
display: block;
position: absolute;
top: 200px;
left: 20px;
height: 30px;
width: 100px;
}
</style>
<script src="http://www.csrcode.cn/imagesforcode/201208/FancyZoom.js" language="javascript" type="text/javascript"></script>
<script src="http://www.csrcode.cn/imagesforcode/201208/FancyZoomHTML.js" language="javascript" type="text/javascript"></script>
</head>
<!--把<body>改为-->
<body onLoad="setupZoom();">
<!--把下面代码加到<body>与</body>之间-->
<div class="photoblock-many">
<a href="http://www.csrcode.cn/images/1.jpg"><img src="http://www.csrcode.cn/images/m01.jpg" width="161" height="123" border="0" alt="" class="photo"></a>
<a href="http://www.csrcode.cn/images/2.jpg"><img src="http://www.csrcode.cn/images/m02.jpg" width="161" height="123" border="0" alt="" class="photo"></a>
<a href="http://www.csrcode.cn/images/3.jpg"><img src="http://www.csrcode.cn/images/m03.jpg" width="161" height="123" border="0" alt="" class="photo"></a>
<a href="http://www.csrcode.cn/images/4.jpg"><img src="http://www.csrcode.cn/images/m04.jpg" width="161" height="123" border="0" alt="" class="photo"></a>
<a href="http://www.csrcode.cn/images/5.jpg"><img src="http://www.csrcode.cn/images/m05.jpg" width="161" height="123" border="0" alt="" class="photo"></a>
<br>
<a href="http://www.csrcode.cn/images/6.jpg"><img src="http://www.csrcode.cn/images/m06.jpg" width="161" height="123" border="0" alt="" class="photo"></a>
<a href="http://www.csrcode.cn/images/7.jpg"><img src="http://www.csrcode.cn/images/m07.jpg" width="161" height="123" border="0" alt="" class="photo"></a>
<a href="http://www.csrcode.cn/images/8.jpg"><img src="http://www.csrcode.cn/images/m08.jpg" width="161" height="123" border="0" alt="" class="photo"></a>
<a href="http://www.csrcode.cn/images/9.jpg"><img src="http://www.csrcode.cn/images/m09.jpg" width="161" height="123" border="0" alt="" class="photo"></a>
<a href="http://www.csrcode.cn/images/10.jpg"><img src="http://www.csrcode.cn/images/m10.jpg" width="161" height="123" border="0" alt="" class="photo"></a>
</div>
</body>
</html>
<br><br>所需js文件：<a href="http://www.csrcode.cn/imagesforcode/201208/FancyZoom.js">FancyZoom.js</a>、<a href="http://www.csrcode.cn/imagesforcode/201208/FancyZoomHTML.js">FancyZoomHTML.js</a><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS+JS打造的很酷的动感缩放图片展示效果丨芯晴网页特效丨CsrCode.CN</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
body {
margin: 30px;
padding: 0;
border: 0;
color: #000000;
font-family: helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
text-align: center;
}
img {
border: 0;
}
#main .photoblock-many {
margin: 0 10px 10px -4px;
clear: both;
width: 100%;
text-align: center;
font-size: 10px;
color: #888888;
}
.alink a, alink a:hover {
margin: 100px auto;
text-align: center;
display: block;
position: absolute;
top: 200px;
left: 20px;
height: 30px;
width: 100px;
}
</style>
<script src="http://www.csrcode.cn/imagesforcode/201208/FancyZoom.js" language="javascript" type="text/javascript"></script>
<script src="http://www.csrcode.cn/imagesforcode/201208/FancyZoomHTML.js" language="javascript" type="text/javascript"></script>
</head>
<!--把<body>改为-->
<body onLoad="setupZoom();">
<!--把下面代码加到<body>与</body>之间-->
<div class="photoblock-many">
<a href="http://www.csrcode.cn/images/1.jpg"><img src="http://www.csrcode.cn/images/m01.jpg" width="161" height="123" border="0" alt="" class="photo"></a>
<a href="http://www.csrcode.cn/images/2.jpg"><img src="http://www.csrcode.cn/images/m02.jpg" width="161" height="123" border="0" alt="" class="photo"></a>
<a href="http://www.csrcode.cn/images/3.jpg"><img src="http://www.csrcode.cn/images/m03.jpg" width="161" height="123" border="0" alt="" class="photo"></a>
<a href="http://www.csrcode.cn/images/4.jpg"><img src="http://www.csrcode.cn/images/m04.jpg" width="161" height="123" border="0" alt="" class="photo"></a>
<a href="http://www.csrcode.cn/images/5.jpg"><img src="http://www.csrcode.cn/images/m05.jpg" width="161" height="123" border="0" alt="" class="photo"></a>
<br>
<a href="http://www.csrcode.cn/images/6.jpg"><img src="http://www.csrcode.cn/images/m06.jpg" width="161" height="123" border="0" alt="" class="photo"></a>
<a href="http://www.csrcode.cn/images/7.jpg"><img src="http://www.csrcode.cn/images/m07.jpg" width="161" height="123" border="0" alt="" class="photo"></a>
<a href="http://www.csrcode.cn/images/8.jpg"><img src="http://www.csrcode.cn/images/m08.jpg" width="161" height="123" border="0" alt="" class="photo"></a>
<a href="http://www.csrcode.cn/images/9.jpg"><img src="http://www.csrcode.cn/images/m09.jpg" width="161" height="123" border="0" alt="" class="photo"></a>
<a href="http://www.csrcode.cn/images/10.jpg"><img src="http://www.csrcode.cn/images/m10.jpg" width="161" height="123" border="0" alt="" class="photo"></a>
</div>
</body>
</html>
<br><br>所需js文件：<a href="http://www.csrcode.cn/imagesforcode/201208/FancyZoom.js">FancyZoom.js</a>、<a href="http://www.csrcode.cn/imagesforcode/201208/FancyZoomHTML.js">FancyZoomHTML.js</a><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
网页特效：www.CsrCode.cn 快播电影：www.33567.cn丨www.7caidy.com
