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

╰+哭是因爲堅強的太久メ 2024-04-18 14:30 65阅读 0赞

效果截图：

![Center][]

fancybox相关介绍：

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

项目实例

加载相关资源文件：

<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>
    	
    	<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />

相关js 和css 代码

<style type="text/css"> 
    		body {
    			max-width: 700px;
    			margin: 0 auto;
    		}
    	</style>
    	
    	<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>	
    	
    	<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>
    	
    	<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" /> 
    	
    	<style type="text/css"> 
    		body {
    			max-width: 700px;
    			margin: 0 auto;
    		}
    	</style>
    	
    	<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>

[Center]: https://img-blog.csdn.net/20130819094344343?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvdXpoaXdlbmdhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center