jquery实现错乱照片墙堆叠点击放大切换切片过渡效果代码-html代码-BFW代码库

代码语言：html

代码描述：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.........完整代码请登录后点击上方下载按钮下载查看