以下是 jQuery+CSS图片浮动层效果特效代码 的示例演示效果:
部分效果截图:
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>
<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,{
}
))
分享到QQ
分享到微博
微信扫一扫
