Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit80b1be4

Browse files
committed
diagonal-slideshow
1 parent477bdc8 commit80b1be4

File tree

2 files changed

+35
-31
lines changed

2 files changed

+35
-31
lines changed

‎diagonal-slideshow/diagonal-slideshow.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@
77
<title>Responsive Diagonal Slideshow with jQuery and CSS3</title>
88
</head>
99
<bodystyle="background-color:#121212;color:#efefef;">
10-
<divid="slideshow"style="position:relative;width:100%;max-width:1200px;margin:0 auto;"></div>
10+
<divid="slideshow"style="position:relative;width:100%;max-width:1000px;margin:0 auto;"></div>
1111
<scripttype="text/javascript">
1212
jQuery("#slideshow").diagonalSlideshow({
1313
aspectRatio:700/438,
14+
size:0.3,
1415
images:['../img/d2.jpg','../img/d3.jpg','../img/d4.jpg']
1516
});
1617
</script>

‎diagonal-slideshow/diagonal-slideshow.js‎

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,12 @@ function debounce( fn, delay )
4343

4444
functionDiagonalSlideshow(el,options)
4545
{
46-
varholder,diags,W,H,wl,hl,index,timer=null,i,j,x,y,bx,by,w,margin,margin2,offset;
46+
varself=this,holder,diags=null,W,H,wl,hl,index,timer=null,i,j,k,x,y,bx,by,w,side,margin,margin2,offset;
47+
48+
if(!(selfinstanceofDiagonalSlideshow))returnnewDiagonalSlideshow(el,options);
4749

4850
varendTransition=function(){
49-
if(null!=timer)clearTimeout(timer);
51+
clearTimeout(timer);
5052
holder.find('.diag-remove').remove();
5153
index=(index+1)%options.images.length;
5254
varnextimg=newImage();
@@ -58,18 +60,16 @@ function DiagonalSlideshow( el, options )
5860
};
5961

6062
vardoTransition=function(ind){
61-
varp=cutimage(options.images[ind],diags,W,H),i,ngroups,d,sd,animateoptions,last,max;
63+
varp=cutimage(options.images[ind],diags,W,H),i,ngroups,d,sd,animateoptions;
6264

6365
p=shuffle(p);
6466
ngroups=p.length;
6567
d=1000*options.duration/(ngroups-(ngroups-1)*options.overlap);
6668
sd=d*(1-options.overlap);
67-
//last = null; max = -1;
6869
for(i=0;i<ngroups;i++)
6970
{
7071
p[i].prev().addClass("diag-remove");
7172
p[i].css({opacity:0});
72-
//if ( i*sd >= max ) { last = i; max = i*sd; }
7373
}
7474
for(i=0;i<ngroups;i++)
7575
{
@@ -82,11 +82,37 @@ function DiagonalSlideshow( el, options )
8282
varautoResize=function(){
8383
W=stdMath.round(el.width());H=stdMath.round(W/options.aspectRatio);
8484
holder.css({width:String(W)+'px',height:String(H)+'px'});
85+
if(!diags)
86+
{
87+
wl=2*stdMath.ceil(1/options.size)+2;
88+
hl=stdMath.ceil(1/(options.size*options.aspectRatio))+1;
89+
diags=newArray(wl*hl);
90+
}
91+
w=stdMath.max(2*W/(wl-2),H/(hl-1));side=w/sqrt2;
92+
margin=w/2;margin2=margin/2;offset=0;
93+
for(k=0,i=0;i<wl;i++)
94+
{
95+
for(j=0;j<hl;j++,k++)
96+
{
97+
x=margin*i-margin;y=w*j-margin+offset;
98+
bx=-x+margin2;by=-y+margin2;
99+
diags[k]={
100+
i:i,j:j,x:x,y:y,imgx:bx,imgy:by,side:side,margin:margin,rows:wl,columns:hl,
101+
div:(diags[k] ?diags[k].div :$('<div class="diag" data-coords="'+i+' '+j+'"></div>').appendTo(holder)).css({
102+
left:String(x)+"px",
103+
top:String(y)+"px",
104+
width:String(side)+"px",
105+
height:String(side)+"px"
106+
})
107+
};
108+
}
109+
offset=0===offset ?-margin :0;
110+
}
85111
};
86112

87113
options=$.extend({
88114
aspectRatio:1.0,
89-
side:200,
115+
size:0.3,
90116
easing:'linear',
91117
duration:3,
92118
delay:5,
@@ -100,29 +126,6 @@ function DiagonalSlideshow( el, options )
100126
$(window).on('resize',debounce(autoResize,300));
101127
autoResize();
102128

103-
w=options.side*sqrt2;wl=2*stdMath.ceil(W/w)+1;hl=2*stdMath.ceil(H/w)+1;
104-
margin=w/2;margin2=margin/2;offset=0;
105-
106-
diags=[];
107-
for(i=0;i<wl;i++)
108-
{
109-
for(j=0;j<hl;j++)
110-
{
111-
x=margin*i-margin;y=w*j-margin+offset;
112-
bx=-x+margin2;by=-y+margin2;
113-
diags.push({
114-
i:i,j:j,x:x,y:y,imgx:bx,imgy:by,side:options.side,margin:margin,rows:wl,columns:hl,
115-
div:$('<div class="diag" data-coords="'+i+' '+j+'"></div>').css({
116-
left:String(x)+"px",
117-
top:String(y)+"px",
118-
width:String(options.side)+"px",
119-
height:String(options.side)+"px"
120-
}).appendTo(holder)
121-
});
122-
}
123-
offset=0===offset ?-margin :0;
124-
}
125-
126129
// init
127130
if(0<options.images.length)
128131
{
@@ -141,7 +144,7 @@ $.fn.diagonalSlideshow = function( options ) {
141144
$(this).each(function(){
142145
var$el=$(this);
143146
if(!$el.data('diagonal-slideshow'))
144-
$el.data('diagonal-slideshow',newDiagonalSlideshow($el,options));
147+
$el.data('diagonal-slideshow',new$.DiagonalSlideshow($el,options));
145148
});
146149
returnthis;// chainable
147150
};

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp