<html>
<head>
<title>基于jQuery和CSS3的动态发光效果相册</title>
<link rel="stylesheet" type="text/css" href="styles.css"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="fonts/aura_400.font.js"></script>
<!--[if lt IE 7]>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->
</head>
<script type="text/javascript">
$(document).ready(function()
{
/*Your ShineTime Welcome Image*/
var default_image = 'images/large/default.jpg';
var default_caption = 'Welcome to ShineTime';
/*Load The Default Image*/
loadPhoto(default_image, default_caption);
function loadPhoto($url, $caption)
{
/*Image pre-loader*/
showPreloader();
var img = new Image();
jQuery(img).load( function()
{
jQuery(img).hide();
hidePreloader();
}).attr({ "src": $url });
$('#largephoto').css('background-image','url("' + $url + '")');
$('#largephoto').data('caption', $caption);
}
/* When a thumbnail is clicked*/
$('.thumb_container').click(function()
{
var handler = $(this).find('.large_image');
var newsrc = handler.attr('src');
var newcaption = handler.attr('rel');
loadPhoto(newsrc, newcaption);
});
/*When the main photo is hovered over*/
$('#largephoto').hover(function()
{
var currentCaption = ($(this).data('caption'));
var largeCaption = $(this).find('#largecaption');
largeCaption.stop();
largeCaption.css('opacity','0.9');
largeCaption.find('.captionContent').html(currentCaption);
largeCaption.fadeIn()
largeCaption.find('.captionShine').stop();
largeCaption.find('.captionShine').css("background-position","-550px 0");
largeCaption.find('.captionShine').animate({backgroundPosition: '550px 0'},700);
Cufon.replace('.captionContent');
},
function()
{
var largeCaption = $(this).find('#largecaption');
largeCaption.find('.captionContent').html('');
largeCaption.fadeOut();
});
/* When a thumbnail is hovered over*/
$('.thumb_container').hover(function()
{
$(this).find(".large_thumb").stop().animate({marginLeft:-7, marginTop:-7},200);
$(this).find(".large_thumb_shine").stop();
$(this).find(".large_thumb_shine").css("background-position","-99px 0");
$(this).find(".large_thumb_shine").animate({backgroundPosition: '99px 0'},700);
}, function()
{
$(this).find(".large_thumb").stop().animate({marginLeft:0, marginTop:0},200);
});
function showPreloader()
{
$('#loader').css('background-image','url("images/interface/loader.gif")');
}
function hidePreloader()
{
$('#loader').css('background-image','url("")');
}
});
</script>
<div id="container">
<div id="containertitle">
Welcome to W3CFuns
</div>
<div class="mainframe">
<div id="largephoto">
<div id="loader"></div>
<div id="largecaption">
<div class="captionShine"></div>
<div class="captionContent"></div>
</div>
<div id="largetrans">
</div>
</div>
</div>
<div class="thumbnails">
<br><br><br>
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample1.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample1.jpg" class="large_image" rel="Just because I can't code, doesn't mean I can't kick your ass!" />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample2.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample2.jpg" class="large_image" rel="Kick-Ass Is In Theatres Everywhere Now" />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample3.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample3.jpg" class="large_image" rel="I can't see through walls, but I can still kick your ass." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample4.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample4.jpg" class="large_image" rel="I won't bite, I promise!" />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample5.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample5.jpg" class="large_image" rel="Using swords to open up that ketchup bottle may not have been the best idea.." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample6.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample6.jpg" class="large_image" rel="We're going to..wait for it..kick your ass!" />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample7.jpg" class="large_th
jQuery+CSS3动态发光相册效果.zip
版权申诉
131 浏览量
2022-11-19
19:46:48
上传
评论
收藏 1.26MB ZIP 举报
jQuery+CSS3动态发光相册效果.zip （51个子文件） 
jQuery+CSS3动态发光相册效果 jQueryCSS3Ray images interface 
total_grid.png 4KB thumb_holder.png 4KB 987.png 33KB
loader.gif 7KB thumb_border.png 3KB src_grid.png 71KB blog_thumb_border.png 3KB back_noise.png 57KB
back.jpg 10KB bigshine.png 18KB backgroundmain.png 29KB main_bg.png 2KB bgnoise.png 9KB main_bg_trans.png 3KB shine.png 5KB thumbnails sample2.jpg 3KB sample12.jpg 2KB sample14.jpg 1KB sample11.jpg 2KB sample15.jpg 2KB sample1.jpg 2KB sample10.jpg 2KB sample3.jpg 2KB sample6.jpg 2KB sample4.jpg 2KB sample9.jpg 2KB sample5.jpg 3KB sample13.jpg 2KB sample8.jpg 2KB sample7.jpg 1KB large sample2.jpg 147KB sample12.jpg 65KB sample14.jpg 35KB sample11.jpg 38KB sample15.jpg 65KB sample1.jpg 73KB sample10.jpg 61KB default.jpg 34KB sample3.jpg 65KB sample6.jpg 68KB sample4.jpg 61KB sample9.jpg 65KB sample5.jpg 117KB sample13.jpg 34KB sample8.jpg 48KB sample7.jpg 35KB fonts 
aura_400.font.js 14KB
index.html 14KB js pngfix.js 2KB cufon-yui.js 18KB styles.css 2KB资源评论
