js实现三维立体照片墙点击放大效果代码-html代码-BFW代码库

js实现三维立体照片墙点击放大效果代码

代码语言：html

代码描述：js实现三维立体照片墙点击放大效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<style type="text/css">

        html {

                overflow: hidden;

        }

        body {

                position: absolute;

                margin: 0px;

                padding: 0px;

                background: #eee;

                width: 100%;

                height: 100%;

                color: #fff;

                font-family: arial;

                font-size: 0.8em;

        }

        #screen {

                position: absolute;

                width: 100%;

                height: 100%;

                background: #000;

                overflow: hidden;

        }

        #screen img, canvas { 

                position: absolute;

                left: -9999px;

                cursor: pointer;

        image-rendering: optimizeSpeed;



        }

        #screen .href {

                border: #FFF dotted 1px;

        }

        #screen .fog { 

                position: absolute;

                background: #fff;

                opacity: 0.1;

                filter: alpha(opacity=10);

        }

        #command {

                position:absolute;

                left: 1em;

                top: 1em;

                width: 130px;

                z-index: 30000;

                background:#000;

                border: #000 solid 1em;

        }

        #bar {

                position:relative;

                left: 1em;

                top: 1em;

                height: 160px;

        }

        #bar .button { 

                position: absolute;

                background: #222;

                width: 20px;

                height: 20px;

                cursor: pointer;

        }

        #bar .loaded { 

                background: #666;

        }

        #bar .viewed { 

                background: #fff;

        }

        #bar .selected { 

                background: #f00;

        }

        #urlInfo {

                position: absolute;

                background: url(data:image/gif;base64,R0lGODlhCQAJAIAAAP8AAP///yH5BAAAAP8ALAAAAAAJAAkAAAIMhI+poRbc3oKJtpsKADs=) no-repeat 0 4px;

                visibility: hidden;

                z-index: 30000;

                padding-left: 12px;

                cursor: pointer;

        }

</style>



<script type="text/javascript">



var m3D = function () {

        /* ---- private vars ---- */

        var diapo = [],

                imb,

                scr,

                bar,

                selected,

                urlInfo,

                imagesPath = "images/",

                camera = {x:0, y:0, z:-650, s:0, fov: 500},

                nw = 0,

                nh = 0;

        /* ==== camera tween methods ==== */

        camera.setTarget = function (c0, t1, p) {

                if (Math.abs(t1 - c0) > .1) {

                        camera.s = 1;

                        camera.p = 0;

                        camera.d = t1 - c0;

                        if (p) {

                                camera.d *= 2;

                                camera.p = 9;

                        }

                }

        }

        camera.tween = function (v) {

                if (camera.s != 0) {

                        camera.p += camera.s;

                        camera[v] += camera.d * camera.p * .01;

.........完整代码请登录后点击上方下载按钮下载查看