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

最新推荐文章于 2017-12-24 19:06:00 发布

liaoyukun111

最新推荐文章于 2017-12-24 19:06:00 发布

阅读量2.1k

点赞数

分类专栏： C# 文章标签： jquery插件 javascript border jquery css function

C# 专栏收录该内容

32 篇文章

订阅专栏

介绍使用jQuery插件Magnify实现图片放大镜效果的方法。只需引入所需库文件，并通过简单的代码即可实现鼠标悬停时的小图放大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

有时候制作图片放大功能时需要实现图片的放大镜效果，当鼠标移动在小图片区域时实现大图片的放大效果，jQuery插件Magnify放大镜可实现javascript图片放大功能，使用比较简单，效果图如下：
jQuery插件Magnify放大镜实现javas<wbr>cript图片放大功能 - 高天流云 - 一叶飘舟
使用说明
需要使用jQuery库文件和JQueryMagnify库文件(目前版本1.0.2)

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

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

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

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

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

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

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

<scripttype="text/javascript">
$(document).ready(function(){
$("#d1").magnify();
});
</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图片放大功能就是这么简单，供参考。