这个javascript图片缩放工具是我07年三月份从当当网（dangdang.com）看到的，当时是去搜索一个周星驰的《赌侠》DVD的海报，看到了它们使用的这个图片查看工具不错，简单实用，就花了点时间拿了下来，与大家分享！
截图：
功能：实现图片的放大（zoom in），缩小（zoom out），鼠标移动图片，及恢复适合尺寸
当图片比较大时，加载可能会比较慢，这时你可以加上图片预加载的功能！顺便加个loading的显示效果，这样更完美了！
适合使用在图片浏览页面：如产品图片，商品图片，图片网站等等...
程序演示页面:pic-zoom-tool.htm
使用方法介绍：
把要显示的图片地址写到<input type="hidden" id="hid_largepictureurl" value="aspxhome.jpg"/>
中的value值，当然你也可以动态调用数据库的数据或表单传递过来的图片地址如：
<input type="hidden" id="hid_largepictureurl" value="<%=request("img")%>"/>
pic-zoom-tool.htm代码：
<html>
<head>
<title>当当网的图片缩放查看工具源代码下载 - 中国asp之家 - http://www.aspxhome.com</title>
<link href="product_exp.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="product_exp.js"></script>
</head>
<body >
<input type="hidden" id="hid_largepictureurl" value="aspxhome.jpg"/>
<p align=center><b>提取至当当网的js图片缩放查看工具</b><br> 来源：<a href="http://www.aspxhome.com/">中国asp之家</a> </p><table class="vpTable" align=center>
<tr>
<td align="center">
<iframe src="PicBox.htm" frameborder="0" name="ifm_show_prd" id="ifm_show_prd"></iframe>
</td>
</tr>
<tr>
<td align="center">
<img src="picture_zoom+.gif" onclick="doZoomIn()" width="69" height="21" style="cursor:pointer;" /><img src="picture_zoom.gif" onclick="doReset()" width="96" height="21" style="cursor:pointer;" /><img src="picture_zoom-.gif" onclick="doZoomOut()" width="69" height="21" style="cursor:pointer;" />
</td>
</tr>
</table>
<div id="dvTPUrls"></div>
<table class="vpCloseTable" align="center"><tr><td align="center"><span class="spnClose" onclick="window.close()">[ 关闭本页 ]</span></td></tr></table>
</body>
</html>
内嵌页面picbox.htm代码：
<html>
<head>
<title>图片缩放查看工具 - 中国asp之家 - http://www.aspxhome.com</title>
<style type="text/css">
body
{
margin:0px;
overflow:hidden;
background-color:#FFFFFF;
}
img
{
cursor:pointer;
}
</style>
<script type="text/javascript" src="ifm_show_prd.js"></script>
</head>
<body>
<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle">
<img onload="suitImage(this,680,360)" id="objImg" />
</td>
</tr>
</table>
</body>
</html>
站长工具
相关文章
请稍等，评论加载中...