jQuery插件Magnify放大镜实现javascript图片放大功能

jQuery插件Magnify放大镜实现javascript图片放大功能

博客所有文章均属原创作品，如有转载，请注明作者：biuuu，来源： http://www.biuuu.com/?p=459

有时候制作图片放大功能时需要实现图片的放大镜效果，当鼠标移动在小图片区域时实现大图片的放大效果，jQuery插件Magnify放大镜可实现javascript图片放大功能，使用比较简单，效果图如下：

使用说明
需要使用jQuery库文件和JQueryMagnify库文件(目前版本1.0.2)

素材准备
图片素材，同一张图片分别有一张小图和一张大图，小图片展示，大图实现图片放大效果调用。

实例代码
一，包含文件部分

1. <script type="text/javascript"src="jquery.js"></script>
2. <script type="text/javascript"src="jquery.magnify-1.0.2.js"></script>

二，HTML部分(小图片和大图片链接)

1. <a href="biuuu.jpg"id="d1" >
2. <img src="biuuu_small.jpg"border="0">
3. </a>

注意：链接部分href是大图biuuu.jpg，需显示部分是小图biuuu_small.jpg。

三，Javascript部分(jQuery插件JQuery Magnify放大镜调用)

1. <scripttype="text/javascript">
2. $(document).ready(function(){
3. $("#d1").magnify();
4. });
5. </script>

上面实例可知，jQuery插件Magnify放大镜实现javascript图片放大功能使用非常方便，只需要调用ID为dl的图片链接元素，写一行代码即实现javascript图片放大功能。

四，用户自定义放大镜配置部分(具体可能看Magnify放大镜js文件)
showEvent: 'click', 显示放大镜效果时需要触发事件click
hideEvent: 'click', 隐藏放大镜效果时需要触发事件click
lensWidth: 60, 鼠标在小图片中移动的提示镜头宽度
lensHeight: 60,鼠标在小图片中移动的提示镜头高度
preload: false,是否预先加载
stagePlacement: 'left', 放大图片后显示在小图片的方向
loadingImage: 'biuuu.gif',加载图片时的提示动态小图片
lensCss: { backgroundColor: '#cc0000',鼠标在小图片中移动的提示镜头CSS样式
border: '0px',放大图片的边框效果
opacity: 0.5 },不透明度
stageCss: { border: '4px solid #33cc33' }镜台边框CSS样式

使用用户自定义放大镜配置可定制多样的放大镜效果，如示例：
一，实现点击小图片才显示/隐藏放大效果
$("#d1").magnify({showEvent:'click',hideEvent: 'click'});

二，自定义鼠标在小图片中移动的提示镜头宽度和高度
$("#d1").magnify({lensWidth:60,lensHeight: 60});

其它用户可自行扩展，使用jQuery插件Magnify放大镜实现javascript图片放大功能就是这么简单，供参考。