以下是 CSS3对角线淡入相册代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,相册代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为CSS3对角线淡入相册代码，属于站长常用代码" />
<title>CSS3对角线淡入相册代码</title>
<!-- The Swipebox plugin -->
<link href="swipebox/swipebox.css" rel="stylesheet" />
<!-- The main CSS file -->
<link href="css/lrtk.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- 代码 开始 -->
<div id="loading"></div>
<div id="gallery"></div>
<script src="js/jquery.min.js"></script>
<script src="swipebox/jquery.swipebox.min.js"></script>
<script src="js/jquery.loadImage.js"></script>
<script src="js/lrtk.js"></script>
</body>
</html>
JS代码(jquery.swipebox.min.js):
;
(function(e,t,n,r){
n.swipebox=function(i,s){
var o={
useCSS:true,hideBarsDelay:3e3}
,u=this,a=n(i),i=i,f=i.selector,l=n(f),c=t.createTouch!==r||"ontouchstart"in e||"onmsgesturechange"in e||navigator.msMaxTouchPoints,h=!!e.SVGSVGElement,p='<div id="swipebox-overlay"><div id="swipebox-slider"></div><div id="swipebox-caption"></div><div id="swipebox-action"><a id="swipebox-close"></a><a id="swipebox-prev"></a><a id="swipebox-next"></a></div></div>';
u.settings={
}
;
u.init=function(){
u.settings=n.extend({
}
,o,s);
l.click(function(e){
e.preventDefault();
e.stopPropagation();
index=a.index(n(this));
d.target=n(e.target);
d.init(index)}
)}
;
var d={
init:function(e){
this.target.trigger("swipebox-start");
this.build();
this.openSlide(e);
this.openImg(e);
this.preloadImg(e+1);
this.preloadImg(e-1)}
,build:function(){
var t=this;
n("body").append(p);
if(t.doCssTrans()){
n("#swipebox-slider").css({
"-webkit-transition":"left 0.4s ease","-moz-transition":"left 0.4s ease","-o-transition":"left 0.4s ease","-khtml-transition":"left 0.4s ease",transition:"left 0.4s ease"}
);
n("#swipebox-overlay").css({
"-webkit-transition":"opacity 1s ease","-moz-transition":"opacity 1s ease","-o-transition":"opacity 1s ease","-khtml-transition":"opacity 1s ease",transition:"opacity 1s ease"}
);
n("#swipebox-action,#swipebox-caption").css({
"-webkit-transition":"0.5s","-moz-transition":"0.5s","-o-transition":"0.5s","-khtml-transition":"0.5s",transition:"0.5s"}
)}
if(h){
var r=n("#swipebox-action #swipebox-close").css("background-image");
r=r.replace("png","svg");
n("#swipebox-action #swipebox-prev,#swipebox-action #swipebox-next,#swipebox-action #swipebox-close").css({
"background-image":r}
)}
a.each(function(){
n("#swipebox-slider").append('<div class="slide"></div>')}
);
t.setDim();
t.actions();
t.keyboard();
t.gesture();
t.animBars();
n(e).resize(function(){
t.setDim()}
).resize()}
,setDim:function(){
var t={
width:n(e).width(),height:e.innerHeight?e.innerHeight:n(e).height()}
;
n("#swipebox-overlay").css(t)}
,supportTransition:function(){
var e="transition WebkitTransition MozTransition OTransition msTransition KhtmlTransition".split(" ");
for(var n=0;
n<e.length;
n++){
if(t.createElement("div").style[e[n]]!==r){
return e[n]}
}
return false}
,doCssTrans:function(){
if(u.settings.useCSS&&this.supportTransition()){
return true}
}
,gesture:function(){
if(c){
var e=this,t=null,r=10,i={
}
,s={
}
;
var o=n("#swipebox-caption,#swipebox-action");
o.addClass("visible-bars");
e.setTimeout();
n("body").bind("touchstart",function(e){
n(this).addClass("touching");
s=e.originalEvent.targetTouches[0];
i.pageX=e.originalEvent.targetTouches[0].pageX;
n(".touching").bind("touchmove",function(e){
e.preventDefault();
e.stopPropagation();
s=e.originalEvent.targetTouches[0]}
);
return false}
).bind("touchend",function(u){
u.preventDefault();
u.stopPropagation();
t=s.pageX-i.pageX;
if(t>=r){
e.getPrev()}
else if(t<=-r){
e.getNext()}
else{
if(!o.hasClass("visible-bars")){
e.showBars();
e.setTimeout()}
else{
e.clearTimeout();
e.hideBars()}
}
n(".touching").off("touchmove").removeClass("touching")}
)}
}
,setTimeout:function(){
if(u.settings.hideBarsDelay>0){
var t=this;
t.clearTimeout();
t.timeout=e.setTimeout(function(){
t.hideBars()}
,u.settings.hideBarsDelay)}
}
,clearTimeout:function(){
e.clearTimeout(this.timeout);
this.timeout=null}
,showBars:function(){
var e=n("#swipebox-caption,#swipebox-action");
if(this.doCssTrans()){
e.addClass("visible-bars")}
else{
n("#swipebox-caption").animate({
top:0}
,500);
n("#swipebox-action").animate({
bottom:0}
,500);
setTimeout(function(){
e.addClass("visible-bars")}
,1e3)}
}
,hideBars:function(){
var e=n("#swipebox-caption,#swipebox-action");
if(this.doCssTrans()){
e.removeClass("visible-bars")}
else{
n("#swipebox-caption").animate({
top:"-50px"}
,500);
n("#swipebox-action").animate({
bottom:"-50px"}
,500);
setTimeout(function(){
e.removeClass("visible-bars")}
,1e3)}
}
,animBars:function(){
var e=this;
var t=n("#swipebox-caption,#swipebox-action");
t.addClass("visible-bars");
e.setTimeout();
n("#swipebox-slider").click(function(n){
if(!t.hasClass("visible-bars")){
e.showBars();
e.setTimeout()}
}
);
n("#swipebox-action").hover(function(){
e.showBars();
t.addClass("force-visible-bars");
e.clearTimeout()}
,function(){
t.removeClass("force-visible-bars");
e.setTimeout()}
)}
,keyboard:function(){
var t=this;
n(e).bind("keyup",function(e){
e.preventDefault();
e.stopPropagation();
if(e.keyCode==37){
t.getPrev()}
else if(e.keyCode==39){
t.getNext()}
else if(e.keyCode==27){
t.closeSlide()}
}
)}
,actions:function(){
var e=this;
if(a.length<2){
n("#swipebox-prev,#swipebox-next").hide()}
else{
n("#swipebox-prev").bind("click touchend",function(t){
t.preventDefault();
t.stopPropagation();
e.getPrev();
e.setTimeout()}
);
n("#swipebox-next").bind("click touchend",function(t){
t.preventDefault();
t.stopPropagation();
e.getNext();
e.setTimeout()}
)}
n("#swipebox-close").bind("click touchend",function(t){
e.closeSlide()}
)}
,setSlide:function(e,t){
t=t||false;
var r=n("#swipebox-slider");
if(this.doCssTrans()){
r.css({
left:-e*100+"%"}
)}
else{
r.animate({
left:-e*100+"%"}
)}
n("#swipebox-slider .slide").removeClass("current");
n("#swipebox-slider .slide").eq(e).addClass("current");
this.setTitle(e);
if(t){
r.fadeIn()}
n("#swipebox-prev,#swipebox-next").removeClass("disabled");
if(e==0){
n("#swipebox-prev").addClass("disabled")}
else if(e==a.length-1){
n("#swipebox-next").addClass("disabled")}
}
,openSlide:function(t){
n("html").addClass("swipebox");
n(e).trigger("resize");
this.setSlide(t,true)}
,preloadImg:function(e){
var t=this;
setTimeout(function(){
t.openImg(e)}
,1e3)}
,openImg:function(e){
var t=this;
if(e<0||e>=a.length){
return false}
t.loadImg(a.eq(e).attr("href"),function(){
n("#swipebox-slider .slide").eq(e).html(this)}
)}
,setTitle:function(e,t){
n("#swipebox-caption").empty();
if(a.eq(e).attr("title")){
n("#swipebox-caption").append(a.eq(e).attr("title"))}
}
,loadImg:function(e,t){
var r=n("<img>").on("load",function(){
t.call(r)}
);
r.attr("src",e)}
,getNext:function(){
var e=this;
index=n("#swipebox-slider .slide").index(n("#swipebox-slider .slide.current"));
if(index+1<a.length){
index++;
e.setSlide(index);
e.preloadImg(index+1)}
else{
n("#swipebox-slider").addClass("rightSpring");
setTimeout(function(){
n("#swipebox-slider").removeClass("rightSpring")}
,500)}
}
,getPrev:function(){
var e=this;
index=n("#swipebox-slider .slide").index(n("#swipebox-slider .slide.current"));
if(index>0){
index--;
e.setSlide(index);
e.preloadImg(index-1)}
else{
n("#swipebox-slider").addClass("leftSpring");
setTimeout(function(){
n("#swipebox-slider").removeClass("leftSpring")}
,500)}
}
,closeSlide:function(){
var t=this;
n(e).trigger("resize");
n("html").removeClass("swipebox");
t.destroy()}
,destroy:function(){
var t=this;
n(e).unbind("keyup");
n("body").unbind("touchstart");
n("body").unbind("touchmove");
n("body").unbind("touchend");
n("#swipebox-slider").unbind();
n("#swipebox-overlay").remove();
a.removeData("_swipebox");
t.target.trigger("swipebox-destroy")}
}
;
u.init()}
;
n.fn.swipebox=function(e){
if(!n.data(this,"_swipebox")){
var t=new n.swipebox(this,e);
this.data("_swipebox",t)}
}
}
)(window,document,jQuery);
JS代码(lrtk.js):
$(function(){
// Global variables that hold statevar page = 0,per_page = 100,photo_default_size = 150,picture_width = photo_default_size,picture_height = photo_default_size,max_w_photos,max_h_photosdata = [];
// Global variables that cache selectorsvar win = $(window),loading = $('#loading'),gallery = $('#gallery');
// Redraw the photos on screengallery.on('data-ready window-resized page-turned',function(event,direction){
var cache = [],deferreds = [];
gallery.trigger('loading');
var set = [];
for(var j = 1;
j < 36;
j++){
set.push({
"thumb":"images/photos/thumbs/" + j + ".jpg","large":"images/photos/large/" + j + ".jpg"}
);
}
$.each(set,function(){
// Create a deferred for each image,so// we know when they are all loadeddeferreds.push($.loadImage(this.thumb));
// build the cachecache.push('<a href="' + this.large + '" class="swipebox"' +'style="width:' + picture_width + 'px;
height:' + picture_height + 'px;
background-image:url(' + this.thumb + ')">'+'</a>');
}
);
if(is_prev_page()){
cache.unshift('<a class="prev" style="width:' + picture_width + 'px;
height:' + picture_height + 'px;
"></a>');
}
if(is_next_page()){
cache.push('<a class="next" style="width:' + picture_width + 'px;
height:' + picture_height + 'px;
"></a>');
}
if(!cache.length){
// There aren't any imagesreturn false;
}
// Call the $.when() function using apply,so that// the deferreds array is passed as individual arguments.// $.when(arg1,arg2) is the same as $.when.apply($,[arg1,arg2])$.when.apply($,deferreds).always(function(){
// All images have been loaded!if(event.type == 'window-resized'){
// No need to animate the photos// if this is a resize eventgallery.html(cache.join(''));
show_photos_static();
// Re-initialize the swipebox$('#gallery .swipebox').swipebox();
}
else{
// Create a fade out effectgallery.fadeOut(function(){
// Add the photos to the gallerygallery.html(cache.join(''));
if(event.type == 'page-turned' && direction == 'br'){
show_photos_with_animation_br();
}
else{
show_photos_with_animation_tl();
}
// Re-initialize the swipebox$('#gallery .swipebox').swipebox();
gallery.show();
}
);
}
gallery.trigger('loading-finished');
}
);
}
);
gallery.on('loading',function(){
// show the preloaderloading.show();
}
);
gallery.on('loading-finished',function(){
// hide the preloaderloading.hide();
}
);
gallery.on('click','.next',function(){
page++;
gallery.trigger('page-turned',['br']);
}
);
gallery.on('click','.prev',function(){
page--;
gallery.trigger('page-turned',['tl']);
}
);
// Monitor window resizing or changing device orientationwin.on('resize',function(e){
var width = win.width(),height = win.height(),gallery_width,gallery_height,difference;
// How many photos can we fit on one line?max_w_photos = Math.ceil(width/photo_default_size);
// Difference holds how much we should shrink each of the photosdifference = (max_w_photos * photo_default_size - width) / max_w_photos;
// Set the global width variable of the pictures.picture_width = Math.ceil(photo_default_size - difference);
// Set the gallery widthgallery_width = max_w_photos * picture_width;
// Let's do the same with the height:max_h_photos = Math.ceil(height/photo_default_size);
difference = (max_h_photos * photo_default_size - height) / max_h_photos;
picture_height = Math.ceil(photo_default_size - difference);
gallery_height = max_h_photos * picture_height;
// How many photos to show per page?per_page = max_w_photos*max_h_photos;
// Resize the gallery holdergallery.width(gallery_width).height(gallery_height);
gallery.trigger('window-resized');
}
).resize();
function show_photos_static(){
// Show the images without any animationsgallery.find('a').addClass('static');
}
function show_photos_with_animation_tl(){
// Animate the images from the top-leftvar photos = gallery.find('a');
for(var i=0;
i<max_w_photos + max_h_photos;
i++){
var j = i;
// Loop through all the linesfor(var l = 0;
l < max_h_photos;
l++){
// If the photo is not of the current line,stop.if(j < l*max_w_photos) break;
// Schedule a timeout. It is wrapped in an anonymous// function to preserve the value of the j variable(function(j){
setTimeout(function(){
photos.eq(j).addClass('show');
}
,i*50);
}
)(j);
// Increment the counter so it points to the photo// to the left on the line belowj += max_w_photos - 1;
}
}
}
function show_photos_with_animation_br(){
// Animate the images from the bottom-rightvar photos = gallery.find('a');
for(var i=0;
i<max_w_photos + max_h_photos;
i++){
var j = per_page - i;
// Loop through all the linesfor(var l = max_h_photos-1;
l >= 0;
l--){
// If the photo is not of the current line,stop.if(j > (l+1)*max_w_photos-1) break;
// Schedule a timeout. It is wrapped in an anonymous// function to preserve the value of the j variable(function(j){
setTimeout(function(){
photos.eq(j).addClass('show');
}
,i*50);
}
)(j);
// Decrement the counter so it points to the photo// to the right on the line abovej -= max_w_photos - 1;
}
}
}
/* Helper functions */
function get_per_page(){
// How many pictures should be shown on current page// The first page has only one arrow,// so we decrease the per_page argument with 1if(page == 0){
return per_page - 1;
}
// Is this the last page?if(get_page_start() + per_page - 1 > data.length - 1){
// It also has 1 arrow.return per_page - 1;
}
// The other pages have two arrows.return per_page - 2;
}
function get_page_start(p){
// Which position holds the first photo// that is to be shown on the give pageif(p === undefined){
p = page;
}
if(p == 0){
return 0;
}
// (per_page - 2) because the arrows take up two places for photos// + 1 at the end because the first page has only a next arrow.return (per_page - 2)*p + 1;
}
function is_next_page(){
// Should we show the next arrow?return data.length > get_page_start(page + 1);
}
function is_prev_page(){
// Should we show the previous arrow?return page > 0;
}
// 先隐藏相册$("#gallery").hide();
// 1.5秒之后模拟相册加载完成，显示相册setTimeout(function(){
gallery.trigger('data-ready');
}
,1500);
}
);
CSS代码(lrtk.css):
/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
/*-------------------------Simple reset--------------------------*/
*{margin:0;padding:0;}
/*-------------------------General Styles--------------------------*/
html{background-color:#F4F4F4;/* ���overflow:hidden;�����ع����� */
}
body{font:15px/1.3 Arial,sans-serif;color:#4f4f4f;}
a,a:visited{outline:none;color:#389dc1;}
a:hover{text-decoration:none;}
section,footer,header,aside{display:block;}
/*----------------------------The Gallery and photos-----------------------------*/
#loading{display:none;width:40px;height:40px;background:url(../images/preloader.gif) no-repeat center center;position:fixed;top:50%;left:50%;margin:-20px 0 0 -20px;}
#gallery{position:fixed;top:0;left:0;width:100%;height:100%;}
#gallery a{opacity:0;float:left;background-size:cover;background-position:center center;-webkit-transform:scale(0.8);-moz-transform:scale(0.8);transform:scale(0.8);-webkit-transition:0.4s;-moz-transition:0.4s;transition:0.4s;}
#gallery a.static:hover,#gallery a.show:hover{opacity:0.9 !important;}
#gallery a.static{opacity:1;-webkit-transform:none;-moz-transform:none;transform:none;-webkit-transition:opacity 0.4s;-moz-transition:opacity 0.4s;transition:opacity 0.4s;}
#gallery a.next,#gallery a.prev{background-color:#333;cursor:pointer;}
#gallery a.next{background-image:url('../images/arrow_next.jpg');}
#gallery a.prev{background-image:url('../images/arrow_prev.jpg');}
#gallery a.show{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);}
CSS代码(swipebox.css):
.swipebox{overflow:hidden!important;}
#swipebox-overlay img{border:none!important;}
#swipebox-overlay{width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999!important;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;}
#swipebox-slider{height:100%;left:0;top:0;width:100%;white-space:nowrap;position:absolute;display:none;}
#swipebox-slider .slide{background:url("img/loader.gif") no-repeat center center;height:100%;width:100%;line-height:1px;text-align:center;display:inline-block;}
#swipebox-slider .slide:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px;}
#swipebox-slider .slide img{display:inline-block;max-height:100%;max-width:100%;margin:0;padding:0;width:auto;height:auto;vertical-align:middle;}
#swipebox-action,#swipebox-caption{position:absolute;left:0;z-index:999;height:50px;width:100%;}
#swipebox-action{bottom:-50px;}
#swipebox-action.visible-bars{bottom:0;}
#swipebox-action.force-visible-bars{bottom:0!important;}
#swipebox-caption{top:-50px;text-align:center;}
#swipebox-caption.visible-bars{top:0;}
#swipebox-caption.force-visible-bars{top:0!important;}
#swipebox-action #swipebox-prev,#swipebox-action #swipebox-next,#swipebox-action #swipebox-close{background-image:url("img/icons.png");background-repeat:no-repeat;border:none!important;text-decoration:none!important;cursor:pointer;position:absolute;width:50px;height:50px;top:0;}
#swipebox-action #swipebox-close{background-position:15px 12px;left:40px;}
#swipebox-action #swipebox-prev{background-position:-32px 13px;right:100px;}
#swipebox-action #swipebox-next{background-position:-78px 13px;right:40px;}
#swipebox-action #swipebox-prev.disabled,#swipebox-action #swipebox-next.disabled{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30);opacity:0.3;}
#swipebox-slider.rightSpring{-moz-animation:rightSpring 0.3s;-webkit-animation:rightSpring 0.3s;}
#swipebox-slider.leftSpring{-moz-animation:leftSpring 0.3s;-webkit-animation:leftSpring 0.3s;}
@-moz-keyframes rightSpring{0%{margin-left:0px;}
50%{margin-left:-30px;}
100%{margin-left:0px;}
}
@-moz-keyframes leftSpring{0%{margin-left:0px;}
50%{margin-left:30px;}
100%{margin-left:0px;}
}
@-webkit-keyframes rightSpring{0%{margin-left:0px;}
50%{margin-left:-30px;}
100%{margin-left:0px;}
}
@-webkit-keyframes leftSpring{0%{margin-left:0px;}
50%{margin-left:30px;}
100%{margin-left:0px;}
}
/* Skin--------------------------*/
#swipebox-overlay{background:#0d0d0d;}
#swipebox-action,#swipebox-caption{text-shadow:1px 1px 1px black;background-color:#0d0d0d;background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#0d0d0d),color-stop(100%,#000000));background-image:-webkit-linear-gradient(#0d0d0d,#000000);background-image:-moz-linear-gradient(#0d0d0d,#000000);background-image:-o-linear-gradient(#0d0d0d,#000000);background-image:linear-gradient(#0d0d0d,#000000);-webkit-box-shadow:0 1px 1px 1px #212121,inset 0 1px 1px 1px black;-moz-box-shadow:0 1px 1px 1px #212121,inset 0 1px 1px 1px black;box-shadow:0 1px 1px 1px #212121,inset 0 1px 1px 1px black;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=95);opacity:0.95;}
#swipebox-action{-webkit-box-shadow:0 -1px -1px 1px #212121,inset 0 -1px -1px 1px black;-moz-box-shadow:0 -1px -1px 1px #212121,inset 0 -1px -1px 1px black;box-shadow:0 -1px -1px 1px #212121,inset 0 -1px -1px 1px black;}
#swipebox-caption{color:white!important;font-size:15px;line-height:43px;font-family:Helvetica,Arial,sans-serif;}
分享到QQ
分享到微博
微信扫一扫
