必优博客

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

上期在[jQuery插件Step Carousel Viewer实现Javascript图片滑动旋转效果]一文中使用jQuery插件Step Carousel Viewer实现图片特效，这里介绍另外一个jQuery插件jQuery Image Flyout弹出图片特效，实现当用户点击图片时javascript动态弹出放大图片，然后点击大图片动态收缩关闭图片，可实现预加载提示效果，jQuery插件jQuery Image Flyout弹出图片功能非常强大，使用却非常简单，javascript弹出放大图片效果图如下：

使用说明
需要使用jQuery库文件(目前版本1.3)和jQuery Image Flyout库文件(目前版本1.1)

可选JS库文件：增强图片显示特效可使用jQuery插件Easing Plugin库文件

素材准备
可自定义CSS样式，控制jQuery插件jQuery Image Flyout提示小图片显示效果。

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

1. <script src="jquery.js" type="text/javascript"></script>
2. <script src="jquery.flyout.js" type="text/javascript"></script>
3. <script src="jquery.easing.js" type="text/javascript"></script>

二，HTML部分(DIV层内所用图片链接)

1. <div>jQuery插件flyout弹出图片</div>
2. <div id="biuuu">
3. <a href="iphone.jpg" title="jquery.flyout"><img src="iphone_small.jpg" alt="iphone" /></a>
4. </div>

效果图如下：

三，Javascript部分(jQuery插件jQuery Image Flyout弹出图片调用)

1. <script type="text/javascript">
2. <!--
3. $(function() {
4. $('#biuuu a').flyout();
5. -->
6. </script>

实例中将ID为biuuu的DIV内所有链接元素<a>增加javascript弹出放大图片功能，其中链接href部分为表示弹出的大图片路径。使用jQuery插件jQuery Image Flyout弹出图片，实现javascript弹出放大图片功能只需要一行代码即可实现。

四，用户自定义设置
结合jQuery插件Easing Plugin，可增强javascript图片放大和缩小过程中图片显示的效果。
一，自定义预加载提示图片
$('#biuuu a').flyout({loadingSrc:'thumb-loading.gif',outEase:'easeInCirc',inEase:'easeOutBounce'});
loadingSrc表示预加载提示图片路径
outEase表示弹出图片放大过程使用的jQuery插件Easing Plugin特效，如：easeInCirc
inEase表示弹出图片缩小过程使用的jQuery插件Easing Plugin特效，如：easeOutBounce

二，自定义弹出图片后图片显示样式
$('#biuuu a').flyout({loadingSrc:'thumb-loading.gif',outEase:'easeOutQuad',inEase:'easeInBack',loader:'loader2',widthMargin:300,heightMargin:300});
loader表示弹出图片后调用的CSS样式
widthMargin表示弹出图片后显示的margin宽度
heightMargin表示弹出图片后显示的margin高度

结合实例可知jQuery插件jQuery Image Flyout弹出图片可自定义定制丰富的图片效果，使用非常简单，值得推荐。

点击下载jQuery插件jQuery Image Flyout弹出图片实现javascript弹出放大图片功能 DEMO