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