jQuery fancybox使用

准备工作：

先到fancybox的官方网站下载相应的fancybox插件，网址是http://www.fancybox.net / ，其实这个非常简单，可能情况是程序员一般是比较懒的动物，然后将最常用的弹出层效果抽取出来，fancybox插件中用到的组件图片放在 fancybox文件夹中，css文件就是style.css，所以fancybox是非常灵活的，完全可以自己定制样式。

HTML structure: 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="imagetoolbar" content="no"/>
<title>FancyBox 1.3.4 | Demonstration</title>
<script type="text/javascript"
　　　　src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>'); </script>
<script type="text/javascript"
　　　　src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript"
　　　　src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css"
　　　　　　 href="./fancybox/jquery.fancybox-1.3.4.css" media="screen"/>
<link rel="stylesheet" href="style.css"/>
<script type="text/javascript"> $(document).ready(function() {
/** Examples - various **/
$("#various1").fancybox({'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
</head>
<body>
<div id="content">
<ul>
<li>
<a id="various1" href="#inline1"
　　　　　　　title="Lorem ipsum dolor sit amet">Inline</a>
</li>
</ul>
<div style="display: none;">
<div id="inline1"
style="width: 400px; height: 100px; overflow: auto;">
Mr-sniper say hello kitty to everyone.
</div>
</div>
</div>
</body>
</html>

 

CSS code:

html,body,div,ul {
margin: 0;
padding: 0;
}

body {
color: #262626;
background: #f4f4f4;
font: normal 12px/ 18px Verdana, sans-serif;
}

#content {
width: 400px;
margin: 40px auto 0 auto;
padding: 0 60px 30px 60px;
border: solid 1px #cbcbcb;
background: #fafafa;
-moz-box-shadow: 0px 0px 10px #cbcbcb;
-webkit-box-shadow: 0px 0px 10px #cbcbcb;
}

a {
outline: none;
}

ul {
margin-bottom: 24px;
padding-left: 30px;
}

常用的函数:

$.fancybox.showActivity    显示加载动画

$.fancybox.hideActivity      隐藏加载动画

$.fancybox.next               展示下一个图

$.fancybox.prev               展示上一个图

$.fancybox.close              关闭fancybox

常用的参数:

titlePosition                     标题的位置，只能被设置成inside和outside

transitionIn, transitionOut 窗口显示的方式，可以设置为'elastic', 'fade' or 'none' 'fade'

centerOnScroll                 当设置成ture的时候，fancybox窗口在滚动网页滚动的时候保持居中

更多参数设置可以参考官方网站：http://fancybox.net/api

 qq:313247313
 Email:rafx.z@hotmail.com
 新浪微博:Mr-sniper
posted @ 2011-06-09 20:28  Mr-sniper  阅读(804)  评论(0)  编辑  收藏  举报