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

java哥阅读：602 2021-04-01 10:19:37 评论：0

效果截图：

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>

标签:jquery

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。