jquery实现错乱照片墙堆叠点击放大切换切片过渡效果代码
代码语言：html
所属分类：画廊相册
代码描述：jquery实现错乱照片墙堆叠点击放大切换切片过渡效果代码
代码标签： jquery 错乱 照片 墙 堆叠 放大 切换 切片 过渡
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<style>
*{margin:0;
padding:0;
}
html {
overflow:scroll;
overflow-x:hidden;
}
body,html {
width:100%;
height:100%;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
}
body {
background:url(//repo.bfw.wiki/bfwrepo/images/xiangce/body_bg.jpg) top center;
}
ul,ol {
list-style:none;
}
img {
display:block;
border:none;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
* html .clearfix {
height:1%;
}
.clearfix {
display:block
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
* html .clearfix {
height:1%;
}
.clearfix {
display:block
}
.banner {
width:100%;
height:100px;
position:fixed;
z-index:1;
}
.jay {
width:263px;
height:200px;
position:fixed;
top:6%;
left:10%;
z-index:0;
}
.container {
width:800px;
height:500px;
position:fixed;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-400px;
z-index:2;
}
.content {
width:100%;
height:100%;
position:relative;
z-index:3;
}
.content li {
width:160px;
height:100px;
position:absolute;
left:42%;
top:160%;
cursor:pointer;
overflow:hidden;
z-index:9;
background:#ffffff;
box-shadow:1px 1px 3px 0px #000000;
transition:transform 1s;
-0-transition:-o-transform 1s;
-moz-transition:-moz-transform 1s;
-webkit-transition:-webkit-transform 1s;
}
.content li span,.content li span a,.content li span img,.content li span strong {
display:block;
width:100%;
height:100%;
}
.content li span {
position:relative;
}
.content li span a,.content li span strong {
position:absolute;
z-index:10;
display:none;
}
.content li span strong {
left:160px;
}
.content li span a img {
z-index:9;
}
.load {
width:100%;
height:100%;
position:fixed;
z-index:12;
}
.load span {
display:block;
width:32px;
height:32px;
background:#ffffff;
padding:10px;
position:fixed;
top:50%;
left:50%;
margin-left:-21px;
margin-top:-21px;
border-radius:10px;
box-shadow:1px 1px 2px #111111;
}
.left,.right {
width:94px;
height:120px;
background:url(//repo.bfw.wiki/bfwrepo/images/xiangce/button.png);
cursor:pointer;
position:fixed;
top:50%;
margin-top:-35px;
opacity:0.8;
filter:alpha(opacity=90);
z-index:99;
}
.left {
background-position:-206px 0;
left:0px;
margin-left:-95px;
}
.right {
background-position:0px 0;
right:0px;
margin-right:-95px;
}
.zs {
width:1301px;
height:106px;
position:fixed;
top:0px;
left:50%;
margin-left:-650px;
z-index:99999;
}
.g {
width:334px;
height:370px;
position:fixed;
bottom:5%;
right:5%;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.7.2.js"></script>
<script type="text/javascript">
var ImgUrl = ["//repo.bfw.wiki/bfwrepo/image/637f4bacaa7f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90","//repo.bfw.wiki/bfwrepo/image/637f4bacaa7f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/6385bc3b2203e.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/637f4bacaa7f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/637f4bacaa7f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/637f4bacaa7f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/637f4bacaa7f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/637f4bacaa7f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/637f4bacaa7f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/637f4bacaa7f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/637f4bacaa7f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/637f4bacaa7f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/63829c2f1dabd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/637f4bacaa7f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/637f4bacaa7f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/637f4bacaa7f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/637f4bacaa7f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/637f4bacaa7f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/637ec5633984a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/637f4bacaa7f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/637ec4353ff32.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/637f4bacaa7f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/6375c03e523e0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/637f4bacaa7f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "//repo.bfw.wiki/bfwrepo/image/63759e63185e7.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90"];
var ImgPV_T = [];
var ImgPV_L = [];
var arr = [];
var leftP = [];
var topP = [];
var body_bg = new Image();
body_bg.src = "//repo.bfw.wiki/bfwrepo/images/xiangce/body_bg.jpg";
$(body_bg).load(function() {
var b = 0;
var d = 0;
var f = $(".container");
var A = $(".content");
var q = $(".content li");
var a = $(".content li a");
var i = $(".content li img");
var w = $(".content li strong");
var o = 0;
var z = true;
var t = 0;
var C = 0;
var h = 0;
var y;
var r;
var s = 0;
var D;
function c() {
b = parseInt($("body").css("height"));
d = parseInt($("body").css("width"))
}
function g() {
c();
$(".load").css("display", "none");
e(600);
v(true);
var p = setTimeout(x, 600)
}
$(function n() {
var G = 0;
var E = 0;
var F = 0;
var H = 0;
var I = 0;
for (var p = 0; p < q.length; p++) {
arr[p] = p;
I++;
ImgPV_T[p] = G;
ImgPV_L[p] = E;
leftP[p] = F;
topP[p] = H;
E = E + 20;
F = F + 25;
if (I == 5) {
I = 0;
E = 0;
F = 0;
G = G + 20;
H = H + 25
}
}
j(ImgUrl[0], 0)
});
$(function m() {
var p = 0;
if (o < q.length) {
i.eq(o).attr("src", ImgUrl[o]);
i.eq(o).load(function() {
F++;
var F = $(this).parent().parent("li").index();
q.eq(F).animate({
top: ImgPV_T[F] + "%",
left: ImgPV_L[F] + "%"
}, 600);
if (F == q.length - 1) {
var E = setTimeout(g, 2000)
}
});
o++;
m()
}
});
function j(H, F) {
var I = 0;
var E = 0;
var G = 0;
for (var p = 0; p < a.length; p++) {
I++;
a.eq(p).css("background", "url(" + H + ") " + E + "% " + G + "%");
w.eq(p).css("background", "url(" + H + ") " + E + "% " + G + "%");
a.eq(p).fadeIn(F);
w.eq(p).fadeIn(F);
E = E + 25;
if (I == 5) {
I = 0;
E = 0;
G = G + 25
}
}
}
function v(p) {
for (var E = 0; E < q.length; E++) {
if (p) {
var F = parseInt(Math.random() * 20 + 1)
} else {
var F = 0
}
var G = Math.random();
if (G > 0.5) {
q.eq(E).css({
transform: "rotate(" + F + "deg)",
"-o-transform": "rotate(" + F + "deg)",
"-moz-transform": "rotate(" + F + "deg)",
"-webkit-transform": "rotate(" + F + "deg)"
})
} else {
q.eq(E).css({
transform: "rotate(" + -F + "deg)",
"-o-transform": "rotate(" + -F + "deg)",
"-moz-transform": "rotate(" + -F + "deg)",
"-webkit-transform": "rotate(" + -F + "deg)"
})
}
}
}
function x() {
$(".content li img").animate({
margin: "5px",
width: "150px",
height: "90px"
}, 300)
}
function e(J) {
var K = parseInt(d / 100 * 80);
var p = parseInt(b / 100 * 80);
s = (p - (p * 0.8) - 100) / 2;
var I = parseInt(p / 2);
width_w = K;
height_w = p;
var E = parseInt(K / 2);
var F = parseInt(K - (K / 100 * 80 + 160));
var G = parseInt(F / 2);
t = G;
var H = E - G;
r = H;
D = I;
$(".content li span a,.content li span strong").fadeOut(1000);
f.animate({
width: K + "px",
height: p + "px",
"margin-top": -I + s + "px",
"margin-left": -H + "px"
}, J, function() {
if (z) {
A.css({
width: K + "px",
height: p + "px"
})
}
})
}
$(window).resize(function() {
$(".left").animate({
"margin-left": "-95px"
}, 400);
$(".right").animate({
"margin-right": "-95px"
}, 400);
A.css("box-shadow", "0px 0px 0px 0px #111111");
A.stop(true);
z = false;
c();
f.stop(true);
e(0);
y = setTimeout(B, 300)
});
function B() {
A.stop(t.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0