以下是 jQuery精美浮动层效果js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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 - fancy image zooming tool</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="fancy.css" media="screen" />
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript" src="jquery.pngFix.pack.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//Activate FancyBox
$("p#test1 a").fancybox({
'hideOnContentClick': true
});
$("p#test2 a").fancybox({
'zoomSpeedIn': 0,
'zoomSpeedOut': 0,
'overlayShow': true
});
$("a#custom_1").fancybox({
'itemLoadCallback': getGroupItems
});
$("a#custom_2, a#custom_3").fancybox({
'zoomSpeedIn': 0,
'zoomSpeedOut': 0
});
//Some lines for this page
$("div#donate").bind("click", function () {
$("#donate_form").submit()
});
$("#comment_form").attr("action", "/fancy/add_comment"); $("#age").val('fancy'); //die spamers, die...
});
//List can contain mixed media too
//Parameter "o" ir optional and used to override settings, example: {url: "http://www.google.com", title: false, o: {'frameWidth': 200} }
var imageList = [
{ url: "images/6_b.jpg", title: "First image" },
{ url: "images/7_b.jpg", title: "Second image" },
{ url: "images/8_b.jpg", title: "Third image" }
];
function getGroupItems(opts) {
jQuery.each(imageList, function (i, val) {
opts.itemArray.push(val);
});
}
</script>
</head>
<body>
<h1>Examples</h1>
<p id="test1">
<b>Fancy single images</b>
<br />
<a href="images/1_b.jpg"><img alt="" src="images/1_s.jpg" /></a>
<a title="Very fancy caption to this image" href="images/2_b.jpg"><img alt="" src="images/2_s.jpg" /></a>
<a title="This is the ART" href="images/13_b.jpg"><img alt="" src="images/13_s.jpg" /></a>
</p>
<p>
<select>
<option>Pellentesque eleifend</option>
<option>Pellentesque mi sapien</option>
</select>
</p>
<p id="test2">
<b>Grouped images (no zooming animation, adds overlay)</b>
<br />
<a rel="group1" href="images/4_b.jpg"><img alt="" src="images/4_s.jpg" /></a>
<a rel="group1" title="Very fancy caption to this image" href="images/5_b.jpg"><img alt="" src="images/5_s.jpg" /></a>
<a rel="group1" title="Life" href="images/10_b.jpg"><img alt="" src="images/10_s.jpg" /></a>
</p>
<p id="test4">
<b>More usage examples</b>
</p>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th>Custom defined image set</th>
<th>Inline content</th>
<th>Iframed content</th>
</tr>
<tr>
<td><a id="custom_1" href="javascript:;"><img alt="" src="images/6_s.jpg" /></a></td>
<td><a id="custom_2" href="#testube" class="{frameWidth: 425, frameHeight: 355}"><img alt="" src="images/15_s.jpg" /></a></td>
<td><a id="custom_3" href="http://www.google.com/"><img alt="" src="images/16_s.jpg" /></a></td>
</tr>
</table>
<div style="display:none" id="testube">
<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/-_jhdZoPW1Q&hl=en" /></param><param name="wmode" value="transparent" /></param><embed src="http://www.youtube.com/v/-_jhdZoPW1Q&hl=en" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355" /></embed></object>
</div>
</body>
</html>
JS代码(jquery.pngFix.pack.js):
/** * -------------------------------------------------------------------- * jQuery-Plugin "pngFix" * Version:1.1,11.09.2007 * by Andreas Eberhard,andreas.eberhard@gmail.com * http://jquery.andreaseberhard.de/ * * Copyright (c) 2007 Andreas Eberhard * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php) */
eval(function(p,a,c,k,e,r){
e=function(c){
return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
if(!''.replace(/^/,String)){
while(c--)r[e(c)]=k[c]||e(c);
k=[function(e){
return r[e]}
];
e=function(){
return'\\w+'}
;
c=1}
;
while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);
return p}
('(s($){
3.1s.1k=s(j){
j=3.1a({
12:\'1m.1j\'}
,j);
8 k=(n.P=="r 10 Z"&&U(n.v)==4&&n.v.E("14 5.5")!=-1);
8 l=(n.P=="r 10 Z"&&U(n.v)==4&&n.v.E("14 6.0")!=-1);
o(3.17.16&&(k||l)){
3(2).L("1r[@m$=.M]").z(s(){
3(2).7(\'q\',3(2).q());
3(2).7(\'p\',3(2).p());
8 a=\'\';
8 b=\'\';
8 c=(3(2).7(\'K\'))?\'K="\'+3(2).7(\'K\')+\'" \':\'\';
8 d=(3(2).7(\'A\'))?\'A="\'+3(2).7(\'A\')+\'" \':\'\';
8 e=(3(2).7(\'C\'))?\'C="\'+3(2).7(\'C\')+\'" \':\'\';
8 f=(3(2).7(\'B\'))?\'B="\'+3(2).7(\'B\')+\'" \':\'\';
8 g=(3(2).7(\'R\'))?\'1d:\'+3(2).7(\'R\')+\';
\':\'\';
8 h=(3(2).1c().7(\'1b\'))?\'19:18;
\':\'\';
o(2.9.y){
a+=\'y:\'+2.9.y+\';
\';
2.9.y=\'\'}
o(2.9.t){
a+=\'t:\'+2.9.t+\';
\';
2.9.t=\'\'}
o(2.9.w){
a+=\'w:\'+2.9.w+\';
\';
2.9.w=\'\'}
8 i=(2.9.15);
b+=\'<x \'+c+d+e+f;
b+=\'9="13:11;
1q-1p:1o-1n;
O:W-V;
N:1l;
\'+g+h;
b+=\'q:\'+3(2).q()+\'u;
\'+\'p:\'+3(2).p()+\'u;
\';
b+=\'J:I:H.r.G\'+\'(m=\\\'\'+3(2).7(\'m\')+\'\\\',D=\\\'F\\\');
\';
b+=i+\'"></x>\';
o(a!=\'\'){
b=\'<x 9="13:11;
O:W-V;
\'+a+h+\'q:\'+3(2).q()+\'u;
\'+\'p:\'+3(2).p()+\'u;
\'+\'">\'+b+\'</x>\'}
3(2).1i();
3(2).1h(b)}
);
3(2).L("*").z(s(){
8 a=3(2).T(\'N-S\');
o(a.E(".M")!=-1){
8 b=a.X(\'1g("\')[1].X(\'")\')[0];
3(2).T(\'N-S\',\'1f\');
3(2).Q(0).Y.J="I:H.r.G(m=\'"+b+"\',D=\'F\')"}
}
);
3(2).L("1e[@m$=.M]").z(s(){
8 a=3(2).7(\'m\');
3(2).Q(0).Y.J=\'I:H.r.G\'+\'(m=\\\'\'+a+\'\\\',D=\\\'F\\\');
\';
3(2).7(\'m\',j.12)}
)}
1t 3}
}
)(3);
',62,92,'||this|jQuery||||attr|var|style|||||||||||||src|navigator|if|height|width|Microsoft|function|padding|px|appVersion|margin|span|border|each|class|alt|title|sizingMethod|indexOf|scale|AlphaImageLoader|DXImageTransform|progid|filter|id|find|png|background|display|appName|get|align|image|css|parseInt|block|inline|split|runtimeStyle|Explorer|Internet|relative|blankgif|position|MSIE|cssText|msie|browser|hand|cursor|extend|href|parent|float|input|none|url|after|hide|gif|pngFix|transparent|blank|line|pre|space|white|img|fn|return'.split('|'),0,{
}
))CSS代码(fancy.css):
div#fancy_overlay{position:absolute;top:0;left:0;z-index:90;width:100%;background-color:#333;}
div#fancy_loading{position:absolute;height:40px;width:40px;cursor:pointer;display:none;overflow:hidden;background:transparent;z-index:100;}
div#fancy_loading div{position:absolute;top:0;left:0;width:40px;height:480px;background:transparent url(fancy_progress.png) no-repeat;}
div#fancy_close{position:absolute;top:-12px;right:-12px;height:30px;width:30px;background:transparent url(fancy_closebox.png);cursor:pointer;z-index:100;display:none;}
div#fancy_content{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;margin:0;z-index:96;}
#fancy_frame{position:relative;width:100%;height:100%;display:none;}
img#fancy_img{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:92;}
div#fancy_title{position:absolute;bottom:-35px;left:0;width:100%;z-index:100;display:none;}
div#fancy_title table{margin:0 auto;}
div#fancy_title div{color:#FFF;font:bold 12px Arial;padding-bottom:2px;}
td#fancy_title_left{height:32px;width:15px;background:transparent url(fancy_title_left.png) repeat-x;}
td#fancy_title_main{height:32px;background:transparent url(fancy_title_main.png) repeat-x;}
td#fancy_title_right{height:32px;width:15px;background:transparent url(fancy_title_right.png) repeat-x;}
div#fancy_outer{position:absolute;top:0;left:0;z-index:90;padding:18px 18px 58px 18px;margin:0;overflow:hidden;background:transparent;display:none;}
div#fancy_inner{position:relative;width:100%;height:100%;border:1px solid #444;background:#FFF;}
a#fancy_left,a#fancy_right{position:absolute;bottom:10px;height:100%;width:35%;cursor:pointer;background-image:url(data:image/gif;base64,AAAA);z-index:100;}
a#fancy_left{left:0px;}
a#fancy_right{right:0px;}
a#fancy_left:hover{background:transparent url(fancy_left.gif) no-repeat 0% 100%;}
a#fancy_right:hover{background:transparent url(fancy_right.gif) no-repeat 100% 100%;}
#fancy_bigIframe,#fancy_freeIframe{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;}
div#fancy_bg{display:none;}
div.fancy_bg{position:absolute;display:block;z-index:70;}
div.fancy_bg_n{top:-18px;width:100%;height:18px;background:transparent url(fancy_shadow_n.png) repeat-x;}
div.fancy_bg_ne{top:-18px;right:-13px;width:13px;height:18px;background:transparent url(fancy_shadow_ne.png) no-repeat;}
div.fancy_bg_e{right:-13px;height:100%;width:13px;background:transparent url(fancy_shadow_e.png) repeat-y;}
div.fancy_bg_se{bottom:-18px;right:-13px;width:13px;height:18px;background:transparent url(fancy_shadow_se.png) no-repeat;}
div.fancy_bg_s{bottom:-18px;width:100%;height:18px;background:transparent url(fancy_shadow_s.png) repeat-x;}
div.fancy_bg_sw{bottom:-18px;left:-13px;width:13px;height:18px;background:transparent url(fancy_shadow_sw.png) no-repeat;}
div.fancy_bg_w{left:-13px;height:100%;width:13px;background:transparent url(fancy_shadow_w.png) repeat-y;}
div.fancy_bg_nw{top:-18px;left:-13px;width:13px;height:18px;background:transparent url(fancy_shadow_nw.png) no-repeat;}
分享到QQ
分享到微博
微信扫一扫
