以下是 jQ斜角渐变图片列表js代码 的示例演示效果:
部分效果截图:
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=utf-8" />
<title>jQ斜角渐变图片列表</title>
<link href = "css/gs.css" media = "screen" rel = "stylesheet" type = "text/css" />
<link href = "css/zzsc.css" media = "screen" rel = "stylesheet" type = "text/css" />
<script type = "text/javascript" src = "js/jquery-1.9.1.js"></script>
<script type = "text/javascript" src = "js/jquery.diagonalFade.js"></script>
<script type = "text/javascript">
//<![CDATA[
// Automates the diagonalFade effect
function slideshow(selector, _f) {
var x = parseInt(Math.random() * 2); // left-right
var y = parseInt(Math.random() * 2); // top-bototm
var f = _f; // fade out || fade in
if(x > 0) x = 'left-right';
else x = 'right-left';
if(y > 0) y = 'top-bottom';
else y = 'bottom-top';
var s = 'out';
if(f) {
s = 'in';
f = false;
} else {
s = 'out';
f = true;
}
$(selector).diagonalFade({
time: 100,
fadeDirection_x: x,
fadeDirection_y: y,
fade: s,
complete: function() {
slideshow(selector, f);
}
});
}
$(function() {
// select our containers and execute the slideshow
slideshow("#image_cascade", false);
slideshow("#text_cascade", false);
});
//]]>
</script>
</head>
<body>
<div id = "image_cascade" class = "container_9">
<img src = "images/1.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/2.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/3.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/4.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/5.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/6.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/7.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/8.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/9.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/10.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/11.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/12.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/13.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/14.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/15.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/16.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/17.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/18.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/19.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/20.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/21.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/22.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/23.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/24.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/25.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/26.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/27.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/28.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/29.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/30.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/31.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/32.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/33.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/34.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/35.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "images/36.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<div class = "clear"></div>
</div>
<div id = "text_cascade" class = "container_9">
<div width = "100" class = "grid_1 character">A</div>
<div width = "100" class = "grid_1 character">B</div>
<div width = "100" class = "grid_1 character">C</div>
<div width = "100" class = "grid_1 character">D</div>
<div width = "100" class = "grid_1 character">E</div>
<div width = "100" class = "grid_1 character">F</div>
<div width = "100" class = "grid_1 character">G</div>
<div width = "100" class = "grid_1 character">H</div>
<div width = "100" class = "grid_1 character">I</div>
<div width = "100" class = "grid_1 character">J</div>
<div width = "100" class = "grid_1 character">K</div>
<div width = "100" class = "grid_1 character">L</div>
<div width = "100" class = "grid_1 character">M</div>
<div width = "100" class = "grid_1 character">N</div>
<div width = "100" class = "grid_1 character">O</div>
<div width = "100" class = "grid_1 character">P</div>
<div width = "100" class = "grid_1 character">Q</div>
<div width = "100" class = "grid_1 character">R</div>
<div width = "100" class = "grid_1 character">S</div>
<div width = "100" class = "grid_1 character">T</div>
<div width = "100" class = "grid_1 character">U</div>
<div width = "100" class = "grid_1 character">V</div>
<div width = "100" class = "grid_1 character">W</div>
<div width = "100" class = "grid_1 character">X</div>
<div width = "100" class = "grid_1 character">Y</div>
<div width = "100" class = "grid_1 character">Z</div>
<div width = "100" class = "grid_1 character">0</div>
<div width = "100" class = "grid_1 character">1</div>
<div width = "100" class = "grid_1 character">2</div>
<div width = "100" class = "grid_1 character">3</div>
<div width = "100" class = "grid_1 character">4</div>
<div width = "100" class = "grid_1 character">5</div>
<div width = "100" class = "grid_1 character">6</div>
<div width = "100" class = "grid_1 character">7</div>
<div width = "100" class = "grid_1 character">8</div>
<div width = "100" class = "grid_1 character">9</div>
<div width = "100" class = "clear"></div>
</div>
</body>
</html>JS代码(jquery.diagonalFade.js):
/** * jQuery Diagonal Matrix Fade Plugin * Examples and documentation at:http://jonobr1.github.com/diagonalFade * Copyright (c) 2010 Jono Brandel * Version:.01 (18-MAY-2010) * Requires:jQuery v1.3.2 or later * * To Do:* + Extend Cycle or write own (based on jquery.cycle.lite.js) * + Make it so it's not just for a fixed container * * Copyright 2010 jonobr1 * * Licensed under the Apache License,Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing,software * distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */
/* �������������֮�� lanrenzhijia.com */
(function($){
// if $.support is not defined (pre jQuery 1.3) add what I needif($.support == undefined){
$.support ={
opacity:!($.browser.msie)}
;
}
$.fn.diagonalFade = function(customOptions){
var options = $.extend({
}
,$.fn.diagonalFade.defaultOptions,customOptions);
return this.each(function(){
var $this = $(this);
// Get Container informationvar cw = $this.width();
var ch = $this.height();
var children = $this.children();
// Abstract this to check all elementsvar w = children[0].offsetWidth;
var h = children[0].offsetHeight;
// Calculate rows and Columns for our Matrixvar m = parseInt(ch / h);
var n = parseInt(cw / w);
// Create an array to hold the ordervar a = [];
var f = [];
var b = 0;
// General purpose iteratorfor(var i = 0;
i < m;
i++){
a[i] = new Array(n);
for(var j = 0;
j < n;
j++){
// Only add items with a width and heightif(children[i * n + j] && children[i * n + j].offsetWidth > 0 && children[i * n + j].offsetHeight > 0){
a[i][j] = b;
b++;
}
}
}
// Fade In or Fade Outswitch(options.fade){
case 'in':var o = 1.0;
break;
case 'out':var o = 0.0;
break;
}
// Iterate Diagonally through our object// then stuff it into a linear arrayif((options.fadeDirection_y == 'top-bottom' && options.fadeDirection_x == 'left-right')|| (options.fadeDirection_y == 'bottom-top' && options.fadeDirection_x == 'right-left')){
for (var i = 0;
i < m + n - 1;
i++){
var z1 = (i < n) ? 0:i - n + 1;
var z2 = (i < m) ? 0:i - m + 1;
var group = new Array();
for (var j = i - z2;
j >= z1;
j--){
group.push(a[j][i - j]);
}
f.push(group);
}
if(options.fadeDirection_y == 'top-bottom' && options.fadeDirection_x == 'left-right'){
b = -1;
cascade($this,f,b,options.fadeDirection_x,options.fadeDirection_y,o);
}
else if(options.fadeDirection_y == 'bottom-top' && options.fadeDirection_x == 'right-left'){
b = f.length;
cascade($this,f,b,options.fadeDirection_x,options.fadeDirection_y,o);
}
}
else if((options.fadeDirection_y == 'bottom-top' && options.fadeDirection_x == 'left-right')|| (options.fadeDirection_y == 'top-bottom' && options.fadeDirection_x == 'right-left')){
for (var i = 1 - m;
i < n;
i++){
var group = new Array();
for (var j = 0;
j < m;
j++){
if ((i + j) >= 0 && (i + j) < n){
group.push(a[j][i + j]);
}
}
f.push(group);
}
if(options.fadeDirection_y == 'bottom-top' && options.fadeDirection_x == 'left-right'){
b = -1;
cascade($this,f,b,options.fadeDirection_x,options.fadeDirection_y,o);
}
else if(options.fadeDirection_y == 'top-bottom' && options.fadeDirection_x == 'right-left'){
b = f.length;
cascade($this,f,b,options.fadeDirection_x,options.fadeDirection_y,o);
}
}
}
);
function cascade(_t,_f,_i,_c_x,_c_y,_c_o){
var t = _t;
var f = _f;
var i = _i;
var o = _c_o;
var c_x = _c_x;
var c_y = _c_y;
var isTrigger = true;
if((c_x == 'left-right' && c_y == 'top-bottom') || (c_x == 'left-right' && c_y == 'bottom-top')){
i++;
if(f[i]){
for(var j = 0;
j < f[i].length;
j++){
var k = f[i][j] + 1;
t.children(":nth-child("+k+")").animate({
opacity:o}
,options.time,function(){
if(isTrigger){
cascade(t,f,i,c_x,c_y,o);
isTrigger = false;
}
}
);
}
}
else{
if ($.isFunction(options.complete)) options.complete.apply(this);
}
}
else if((c_x == 'right-left' && c_y == 'top-bottom') || (c_x == 'right-left' && c_y == 'bottom-top')){
i--;
if(i >= 0){
for(var j = 0;
j < f[i].length;
j++){
var k = f[i][j] + 1;
t.children(":nth-child("+k+")").animate({
opacity:o}
,options.time,function(){
if(isTrigger){
cascade(t,f,i,c_x,c_y,o);
isTrigger = false;
}
}
);
}
}
else{
if ($.isFunction(options.complete)) options.complete.apply(this);
}
}
}
;
}
;
$.fn.diagonalFade.defaultOptions ={
time:100,fadeDirection_x:'left-right',// "left-right" || "right-left"fadeDirection_y:'top-bottom',// "top-bottom" || "bottom-top"fade:'out',// "in" || "out"complete:null// Set Interval?}
;
}
)(jQuery);
/* �������������֮�� lanrenzhijia.com */
JS代码(jquery.diagonalFade.min.js):
/** * jQuery Diagonal Matrix Fade Plugin * Examples and documentation at:http://jonobr1.github.com/diagonalFade * Copyright (c) 2010 Jono Brandel * Version:.01 (18-MAY-2010) * Requires:jQuery v1.3.2 or later * * To Do:* + Extend Cycle or write own (based on jquery.cycle.lite.js) * + Make it so it's not just for a fixed container * * Copyright 2010 jonobr1 * * Licensed under the Apache License,Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing,software * distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */
(function(a){
if(a.support==undefined){
a.support={
opacity:!(a.browser.msie)}
}
a.fn.diagonalFade=function(b){
var d=a.extend({
}
,a.fn.diagonalFade.defaultOptions,b);
return this.each(function(){
var y=a(this);
var s=y.width();
var e=y.height();
var k=y.children();
var B=k[0].offsetWidth;
var v=k[0].offsetHeight;
var p=parseInt(e/v);
var l=parseInt(s/B);
var A=[];
var x=[];
var z=0;
for(var u=0;
u<p;
u++){
A[u]=new Array(l);
for(var r=0;
r<l;
r++){
if(k[u*l+r]&&k[u*l+r].offsetWidth>0&&k[u*l+r].offsetHeight>0){
A[u][r]=z;
z++}
}
}
switch(d.fade){
case"in":var g=1;
break;
case"out":var g=0;
break}
if((d.fadeDirection_y=="top-bottom"&&d.fadeDirection_x=="left-right")||(d.fadeDirection_y=="bottom-top"&&d.fadeDirection_x=="right-left")){
for(var u=0;
u<p+l-1;
u++){
var t=(u<l)?0:u-l+1;
var q=(u<p)?0:u-p+1;
var C=new Array();
for(var r=u-q;
r>=t;
r--){
C.push(A[r][u-r])}
x.push(C)}
if(d.fadeDirection_y=="top-bottom"&&d.fadeDirection_x=="left-right"){
z=-1;
c(y,x,z,d.fadeDirection_x,d.fadeDirection_y,g)}
else{
if(d.fadeDirection_y=="bottom-top"&&d.fadeDirection_x=="right-left"){
z=x.length;
c(y,x,z,d.fadeDirection_x,d.fadeDirection_y,g)}
}
}
else{
if((d.fadeDirection_y=="bottom-top"&&d.fadeDirection_x=="left-right")||(d.fadeDirection_y=="top-bottom"&&d.fadeDirection_x=="right-left")){
for(var u=1-p;
u<l;
u++){
var C=new Array();
for(var r=0;
r<p;
r++){
if((u+r)>=0&&(u+r)<l){
C.push(A[r][u+r])}
}
x.push(C)}
if(d.fadeDirection_y=="bottom-top"&&d.fadeDirection_x=="left-right"){
z=-1;
c(y,x,z,d.fadeDirection_x,d.fadeDirection_y,g)}
else{
if(d.fadeDirection_y=="top-bottom"&&d.fadeDirection_x=="right-left"){
z=x.length;
c(y,x,z,d.fadeDirection_x,d.fadeDirection_y,g)}
}
}
}
}
);
function c(x,s,n,r,q,w){
var y=x;
var u=s;
var p=n;
var e=w;
var h=r;
var g=q;
var v=true;
if((h=="left-right"&&g=="top-bottom")||(h=="left-right"&&g=="bottom-top")){
p++;
if(u[p]){
for(var m=0;
m<u[p].length;
m++){
var l=u[p][m]+1;
y.children(":nth-child("+l+")").animate({
opacity:e}
,d.time,function(){
if(v){
c(y,u,p,h,g,e);
v=false}
}
)}
}
else{
if(a.isFunction(d.complete)){
d.complete.apply(this)}
}
}
else{
if((h=="right-left"&&g=="top-bottom")||(h=="right-left"&&g=="bottom-top")){
p--;
if(p>=0){
for(var m=0;
m<u[p].length;
m++){
var l=u[p][m]+1;
y.children(":nth-child("+l+")").animate({
opacity:e}
,d.time,function(){
if(v){
c(y,u,p,h,g,e);
v=false}
}
)}
}
else{
if(a.isFunction(d.complete)){
d.complete.apply(this)}
}
}
}
}
}
;
a.fn.diagonalFade.defaultOptions={
time:100,fadeDirection_x:"left-right",fadeDirection_y:"top-bottom",fade:"out",complete:null}
}
)(jQuery);
CSS代码(gs.css):
.container_9{margin-left:auto;margin-right:auto;width:945px}
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9{display:inline;float:left;position:relative;margin-left:3px;margin-right:2px}
.alpha{margin-left:0}
.omega{margin-right:0}
.container_9 .grid_1{width:100px}
.container_9 .grid_2{width:205px}
.container_9 .grid_3{width:310px}
.container_9 .grid_4{width:415px}
.container_9 .grid_5{width:520px}
.container_9 .grid_6{width:625px}
.container_9 .grid_7{width:730px}
.container_9 .grid_8{width:835px}
.container_9 .grid_9{width:940px}
.container_9 .prefix_1{padding-left:105px}
.container_9 .prefix_2{padding-left:210px}
.container_9 .prefix_3{padding-left:315px}
.container_9 .prefix_4{padding-left:420px}
.container_9 .prefix_5{padding-left:525px}
.container_9 .prefix_6{padding-left:630px}
.container_9 .prefix_7{padding-left:735px}
.container_9 .prefix_8{padding-left:840px}
.container_9 .suffix_1{padding-right:105px}
.container_9 .suffix_2{padding-right:210px}
.container_9 .suffix_3{padding-right:315px}
.container_9 .suffix_4{padding-right:420px}
.container_9 .suffix_5{padding-right:525px}
.container_9 .suffix_6{padding-right:630px}
.container_9 .suffix_7{padding-right:735px}
.container_9 .suffix_8{padding-right:840px}
.container_9 .push_1{left:105px}
.container_9 .push_2{left:210px}
.container_9 .push_3{left:315px}
.container_9 .push_4{left:420px}
.container_9 .push_5{left:525px}
.container_9 .push_6{left:630px}
.container_9 .push_7{left:735px}
.container_9 .push_8{left:840px}
.container_9 .pull_1{left:-105px}
.container_9 .pull_2{left:-210px}
.container_9 .pull_3{left:-315px}
.container_9 .pull_4{left:-420px}
.container_9 .pull_5{left:-525px}
.container_9 .pull_6{left:-630px}
.container_9 .pull_7{left:-735px}
.container_9 .pull_8{left:-840px}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
.clearfix{display:block}
CSS代码(zzsc.css):
*{margin:0;padding:0;}
body{font-family:Helvetica,Arial,sans-serif;font-weight:500;word-spacing:2px;font-size:11px;color:#333;background:#fff url('../images/diagonal.png') top right no-repeat;}
h2{color:#444;font-size:15px;line-height:20px;font-weight:500;}
h3{width:200px;margin:5px 0;padding:5px;text-transform:uppercase;letter-spacing:2px;font-weight:100;text-align:center;font-size:10px;background:#ccc;color:#fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
p{margin:0 0 25px 0;line-height:17px;font-size:11px;}
img{border:0 !important;}
a#download:link,a#download:visited{margin-top:-20px;display:block;width:100px;height:100px;border:1px dashed #333;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
a#download:hover,a#download:active{background:#efefef;}
.mute{font-size:9px;color:#444;}
a:link,a:visited{text-decoration:underline;color:#333;}
a:hover,a:active{text-decoration:none;background:#ff0;}
.container_9{;border-bottom:1px solid #efefef;}
#text_cascade .character{height:55px;float:left;text-transform:uppercase;font-weight:900;letter-spacing:2px;text-align:center;color:#333;background:#ccc;padding:45px 0 0 0;margin:2px 3px 2px 2px;}
#text_cascade .character:hover{background:#efefef;}
footer,.section{margin-top:50px;margin-bottom:50px;}
分享到QQ
分享到微博
微信扫一扫
