js鼠标点击和鼠标滚轮滚动缩放图片zoom插件

鼠标点击小图片后可以放大图片，支持鼠标滚动缩放图片，支持全屏浏览该图。不支持IE6

1、在头部引入下面的代码：

<link rel="stylesheet" type="text/css" href="css/css.css">
<script type="text/javascript">
var  IMGDIR = 'images';
</script>
<script src="common.js" type="text/javascript"></script>

2、在body适当位置添加下面的代码

<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<ul>
    <li>
        <span style="position: absolute; display: none;" id="img1" onmouseover="showMenu({'ctrlid':this.id,'pos':'13'})">
        <img src="images/1.jpg" border="0"></span><!--点击后显示的图片-->
        <a href="javascript:;"><img onclick="zoom(this, 'images/10.jpg')" src="images/1.jpg" id="img1_1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" border="0"></a><!--默认显示的图片-->
    </li>
    <li>
        <span style="position: absolute; display: none;" id="img2" onmouseover="showMenu({'ctrlid':this.id,'pos':'13'})">
        <img src="images/2.jpg" border="0"></span>
        <a href="javascript:;"><img onclick="zoom(this, 'images/20.jpg')" src="images/2.jpg" id="img2_1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" border="0"></a>
    </li>
</ul>

如果想扩展图片，则复制li里面的代码即可。src地址指向放大前的图片，zoom(this, 'images/20.jpg')里面的图片地址指向放大后的图片。