仿3D特效查看图片

最新推荐文章于 2021-11-28 23:42:01 发布

始是逍遥人

最新推荐文章于 2021-11-28 23:42:01 发布

阅读量562

点赞数

本文链接：https://blog.csdn.net/wangrui201107/article/details/8906687

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> 3D特效查看图片</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
position: absolute;
margin: 0px;
padding: 0px;
background: #fff;
width: 100%;
height: 100%;
}
#screen {
position: absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
background: #fff;
}
#screen img {
position: absolute;
cursor: pointer;
width: 0px;
height: 0px;
-ms-interpolation-mode:nearest-neighbor;
}
#bankImages {
visibility: hidden;
}
#FPS {
position: absolute;
right: 5px;
bottom: 5px;
font-size: 10px;
color: #666;
font-family: verdana;
}
img
{
width:100px;
height:50px;}
</style>

            o.onmouseover = function () {
                if (this != tv.o) {
                    this.point3D.z.target = tv.mouseZ;
                    tv.camera.x.target = this.point3D.x;
                    tv.camera.y.target = this.point3D.y;
                    if (tv.o) tv.o.point3D.z.target = 0;
                    tv.o = this;
                }
                return false;
            }

            o.onmousedown = function () {
                if (this == tv.o) {
                    if (this.point3D.z.target == tv.mouseZ) this.point3D.z.target = 0;
                    else {
                        tv.o = false;
                        this.onmouseover();
                    }
                }
            }

            o.animate = function () {

                var x = this.point3D.x - tv.camera.x.position;
                var y = this.point3D.y - tv.camera.y.position;
                this.point3D.z.move(this.point3D.z.target, this.point3D.z.target ? .15 : .08);

                var xy = tv.angle.cx * y - tv.angle.sx * this.point3D.z.position;
                var xz = tv.angle.sx * y + tv.angle.cx * this.point3D.z.position;
                var yz = tv.angle.cy * xz - tv.angle.sy * x;
                var yx = tv.angle.sy * xz + tv.angle.cy * x;

                var scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
                x = yx * scale;
                y = xy * scale;
                var w = Math.round(Math.max(0, this.point3D.w * scale * this.point3D.sw));
                var h = Math.round(Math.max(0, this.point3D.h * scale * this.point3D.sh));

                var o = this.style;
                o.left = Math.round(x + tv.screen.w - w * .5) + 'px';
                o.top = Math.round(y + tv.screen.h - h * .5) + 'px';
                o.width = w + 'px';
                o.height = h + 'px';
                o.zIndex = 10000 + Math.round(scale * 1000);
            }
        },

        init: function (structure, FL, mouseZ, rx, ry) {
            this.screen.obj = document.getElementById('screen');
            this.screen.obj.onselectstart = function () { return false; }
            this.screen.obj.ondrag = function () { return false; }
            this.mouseZ = mouseZ;
            this.camera.focalLength = FL;
            this.angle.rx = rx;
            this.angle.ry = ry;

            var i = 0, o;
            while (o = structure[i++])
                this.create3DHTML(o.img, o.x, o.y, o.z, o.sw, o.sh);

            this.resize();
            mouse.y = this.screen.y + this.screen.h;
            mouse.x = this.screen.x + this.screen.w;

            setInterval(tv.run, 16);
            setInterval(tv.dFPS, 1000);
        },

        resize: function () {
            var o = tv.screen.obj;
            if (o) {
                tv.screen.w = o.offsetWidth / 2;
                tv.screen.h = o.offsetHeight / 2;
                for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent) {
                    tv.screen.x += o.offsetLeft;
                    tv.screen.y += o.offsetTop;
                }
            }
        },

        run: function () {
            tv.fps++;

            tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * tv.angle.rx, .1);
            tv.angle.y.move((mouse.x - tv.screen.w - tv.screen.x) * tv.angle.ry, .1);
            tv.camera.x.move(tv.camera.x.target, .025);
            tv.camera.y.move(tv.camera.y.target, .025);

            tv.angle.cx = Math.cos(tv.angle.x.position);
            tv.angle.sx = Math.sin(tv.angle.x.position);
            tv.angle.cy = Math.cos(tv.angle.y.position);
            tv.angle.sy = Math.sin(tv.angle.y.position);

            var i = 0, o;
            while (o = tv.O[i++]) o.animate();
        },

        dFPS: function () {
            document.getElementById('FPS').innerHTML = tv.fps + ' FPS';
            tv.fps = 0;
        }
    }

    var mouse = {
        x: 0,
        y: 0
    }
    document.onmousemove = function (e) {
        if (window.event) e = window.event;
        mouse.x = e.clientX;
        mouse.y = e.clientY;
        return false;
    }

    onload = function () {
        onresize = tv.resize;

        var img = document.getElementById('bankImages').getElementsByTagName('img');
        var structure = [];
        for (var i = -300; i <= 300; i += 120)
            for (var j = -300; j <= 300; j += 120)
                structure.push({ img: img[0], x: i, y: j, z: 0, sw: .5, sh: .5 });

        tv.init(structure, 350, -200, .005, .0025);
    }

</script>
</head>

<body>

<<div id="bankImages">

<img alt="" src="images/2.jpg">
</div>
<div id="FPS"></div>

</body>
</html>