(Jquery功能篇) jquery 插件fancybox查看图片原图

来源：互联网发布：mathcad软件编辑：程序博客网时间：2024/05/01 18:34

效果截图：

fancybox相关介绍：

1.可以支持图片、html文本、flash动画、iframe以及ajax的支持2.可以自定义播放器的CSS样式3.可以以组的形式进行播放4.如果将鼠标滚动插件（mouse wheel plugin）包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片5.Fancybox播放器支持投影，更有立体的感觉

项目实例

加载相关资源文件：

<!--相关资源文件 (js核心文件) --><script type="text/javascript" src="js/jquery-1.9.1.js"></script><script type="text/javascript" src="js/jquery.fancybox.js"></script><script type="text/javascript" src="js/jquery.fancybox.pack.js"></script><!--相关样式文件(css文件)  --><link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />

相关js 和css 代码

<!--相关css文件  --><style type="text/css"> body {max-width: 700px;margin: 0 auto;}</style><!--相关javascript代码  --><script type="text/javascript">$(document).ready(function() {$('.fancybox').fancybox({//配置关闭选项 closeClick :true});});</script>

源文件和相关代码

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>Jquery的fancybox控件</title><!--相关资源文件 (js核心文件) --><script type="text/javascript" src="js/jquery-1.9.1.js"></script><script type="text/javascript" src="js/jquery.fancybox.js"></script><script type="text/javascript" src="js/jquery.fancybox.pack.js"></script><!--相关样式文件(css文件)  --><link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" /> <!--相关css文件  --><style type="text/css"> body {max-width: 700px;margin: 0 auto;}</style><!--相关javascript代码  --><script type="text/javascript">$(document).ready(function() {$('.fancybox').fancybox({//配置关闭选项 closeClick :true});});</script>  </head>    <body>      <h3>简单的图片缩放功能演示</h3><p><a class="fancybox" href="css/img/b1.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="css/img/1_s.jpg" alt="" /></a> <a class="fancybox" href="css/img/2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="css/img/2_s.jpg" alt="" /></a> <a class="fancybox" href="css/img/3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="css/img/3_s.jpg" alt="" /></a> <a class="fancybox" href="css/img/4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="css/img/4_s.jpg" alt="" /></a></p>              </body></html>