欢迎来到我爱模板网，请记住我们的域名5imoban.net。本站资源大部分免费下载。如需定制，可联系站长QQ543031222。如果您觉得本站不错，请推荐给您的好友！

各位热心的网友们，欢迎给本站留言！您的任何建议和意见本站都会认真查看，仔细采纳！

当前位置：模板网首页 > 特效插件 > 图像特效 > js鼠标点击和鼠标滚轮正文

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

作者：网页模板

大小：0.148MB

点击次数：

发布时间：2014-02-21 12:34

分享到：

特效介绍

鼠标点击小图片后可以放大图片，支持鼠标滚动缩放图片，支持全屏浏览该图。不支持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')里面的图片地址指向放大后的图片。