QQ 1640076782
最近在做一个外贸陶瓷企业网站的时候遇到一个问题，客户希望做到这种效果，js实现多张图片当前页放大的效果，找了很多js，都不是很流利，要么就是兼容性很差。最后做了这样的一个，很好，大家可以借鉴一下：
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<meta name=”keywords” content=”js实现多张图片当前页放大,JS特效代码” />
<title>js实现多张图片当前页放大</title>
<link rel=”stylesheet” href=”css/cabel-v1.css” type=”text/css” />
<script src=”js/FancyZoom.js” language=”JavaScript” type=”text/javascript”></script>
<script src=”js/FancyZoomHTML.js” language=”JavaScript” type=”text/javascript”></script>
<style>
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;
}
</style>
</head>
<body onLoad=”setupZoom();”>
<div align=”center”>
s
<div>
<a href=”images/mwsf-2.jpg” title=”Mary Blair artwork in person”><img src=”images/mwsf-2-thumb.jpg” width=”161″ height=”123″ border=”0″ alt=”" id=”img-mwsf-2″ /></a>
<a href=”images/mwsf-14.jpg”><img src=”images/mwsf-14-thumb.jpg” width=”161″ height=”123″ border=”0″ alt=”" id=”img-mwsf-14″ /></a>
<a href=”images/mwsf-5.jpg” title=”Whoah: first Jollibee, then Cha-Am Express, now Jollibee again?”><img src=”images/mwsf-5-thumb.jpg” width=”161″ height=”123″ border=”0″ alt=”" id=”img-mwsf-5″ /></a>
<a href=”images/mwsf-6.jpg” title=”Not recommended.”><img src=”images/mwsf-6-thumb.jpg” width=”161″ height=”123″ border=”0″ alt=”" id=”img-mwsf-6″ /></a>
<a href=”images/mwsf-16.jpg” title=”But I did get this sweet TV PLUG-IN GAME. Neighborhood Smash = Karateka, by the way.”><img src=”images/mwsf-16-thumb.jpg” width=”161″ height=”123″ border=”0″ alt=”" id=”img-mwsf-16″ /></a>
<a href=”images/mwsf-20.jpg” title=”Oh, kids today!”><img src=”images/mwsf-20-thumb.jpg” width=”161″ height=”123″ border=”0″ alt=”" id=”img-mwsf-20″ /></a>
<a href=”images/mwsf-21.jpg” title=”The Metreon gets weirder, as the Microsoft Store is now Tilt’s crane game ghost town.”><img src=”images/mwsf-21-thumb.jpg” width=”161″ height=”123″ border=”0″ alt=”" id=”img-mwsf-21″ /></a>
<a href=”images/mwsf-25.jpg”><img src=”images/mwsf-25-thumb.jpg” width=”161″ height=”123″ border=”0″ alt=”" id=”img-mwsf-25″ /></a>
<a href=”images/mwsf-27.jpg” title=”Patrick Salo gave us cookies, just because he likes our software. Hooray Macworld!”><img src=”images/mwsf-27-thumb.jpg” width=”161″ height=”123″ border=”0″ alt=”" id=”img-mwsf-27″ /></a>
<a href=”images/mwsf-28.jpg”><img src=”images/mwsf-28-thumb.jpg” width=”161″ height=”123″ border=”0″ alt=”" id=”img-mwsf-28″ /></a>
<a href=”images/mwsf-29.jpg” title=”Mary Blair artwork in person = wow.”><img src=”images/mwsf-29-thumb.jpg” width=”161″ height=”123″ border=”0″ alt=”" id=”img-mwsf-29″ /></a>
<a href=”images/mwsf-30.jpg” title=”Secret Moscone Tunnels!”><img src=”images/mwsf-30-thumb.jpg” width=”161″ height=”123″ border=”0″ alt=”" id=”img-mwsf-30″ /></a>
<a href=”images/mwsf-31.jpg” title=”Like playing Half-Life, only with less crates to smash.”><img src=”images/mwsf-31-thumb.jpg” width=”161″ height=”123″ border=”0″ alt=”" id=”img-mwsf-31″ /></a>
<a href=”images/mwsf-24.jpg”><img src=”images/mwsf-24-thumb.jpg” width=”161″ height=”123″ border=”0″ alt=”" id=”img-mwsf-24″ /></a>
<a href=”images/mwsf-4.jpg” title=”Obviously,the highest type of efficiency is that which can Utilize existing material to the best advantage.”><img src=”images/mwsf-4-thumb.jpg” width=”161″ height=”123″ border=”0″ alt=”" id=”img-mwsf-4″ /></a>
<a href=”images/mwsf-9.jpg” title=”#”><img src=”images/mwsf-9-thumb.jpg” width=”161″ height=”123″ border=”0″ alt=”" id=”img-mwsf-9″ /></a>
</div>
</div>
</body>
</html>
xueposter@gmail.com