您的位置:首页 > Web前端 > JQuery

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

2009-09-30 13:09 1016 查看
jQuery插件Magnify放大镜实现javascript图片放大功能

博客所有文章均属原创作品,如有转载,请注明作者:biuuu,来源:http://www.biuuu.com/?p=459
有时候制作图片放大功能时需要实现图片的放大镜效果,当鼠标移动在小图片区域时实现大图片的放大效果,jQuery插件Magnify放大镜可实现javascript图片放大功能,使用比较简单,效果图如下:



使用说明
需要使用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图片放大功能就是这么简单,供参考。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: