令人震撼的图片展示效果五.html

几个老外写的一个很牛的js

                                        var yx = tv.angle.sy * xz + tv.angle.cy * x;
                                        /* ==== 2D transformation ==== */
                                        this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
                                        this.point2D.x = yx * this.point2D.scale;
                                        this.point2D.y = xy * this.point2D.scale;
                                        this.point2D.w = Math.round(
                                                           Math.max(
                                                             0,
                                                             this.point2D.scale * tv.camera.zoom.position * .8
                                                           )
                                                         );
                                        /* ==== image size ratio ==== */
                                        if (this.ratioImage > 1)
                                                this.point2D.h = Math.round(this.point2D.w / this.ratioImage);
                                        else
                                        {
                                                this.point2D.h = this.point2D.w;
                                                this.point2D.w = Math.round(this.point2D.h * this.ratioImage);
                                        }
                                }
                                /* ==== rendering ==== */
                                o.draw = function ()
                                {
                                        if (this.complete)
                                        {
                                                /* ==== paranoid image load ==== */
                                                if (!this.loaded)
                                                {
                                                        if (!this.img)
                                                        {
                                                                /* ==== create internal image ==== */
                                                                this.img = new Image();
                                                                this.img.src = this.src;
                                                        }
                                                        if (this.img.complete)
                                                        {
                                                                /* ==== get width / height ratio ==== */
                                                                this.style.visibility = 'visible';
                                                                this.ratioImage = this.img.width / this.img.height;
                                                                this.loaded = true;
                                                                this.img = false;
                                                        }
                                                }
                                                /* ==== HTML rendering ==== */
                                                this.style.left = Math.round(
                                                                    this.point2D.x * this.point2D.scale +
                                                                    tv.screen.w - this.point2D.w * .5
                                                                  ) + 'px';
                                                this.style.top  = Math.round(
                                                                    this.point2D.y * this.point2D.scale +
                                                                    tv.screen.h - this.point2D.h * .5
                                                                  ) + 'px';
                                                this.style.width  = this.point2D.w + 'px';
                                                this.style.height = this.point2D.h + 'px';
                                                this.style.borderWidth = Math.round(
                                                                           Math.max(
                                                                             this.point2D.w,
                                                                             this.point2D.h
                                                                           ) * tv.grid.borderSize * .01
                                                                         ) + 'px';
                                                this.style.zIndex = Math.floor(this.point2D.scale * 100);
                                        }
                                }
                        }
                }
                /* ==== start script ==== */
                tv.resize();
                mouse.y = tv.screen.y + tv.screen.h;
                mouse.x = tv.screen.x + tv.screen.w;
                tv.run();
        },

        /* ==== resize window ==== */
        resize : function ()
        {
                var o = tv.screen.obj;
                tv.screen.w = o.offsetWidth / 2;
                tv.screen.h = o.offsetHeight / 2;
                tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
                for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent)
                {
                        tv.screen.x += o.offsetLeft;
                        tv.screen.y += o.offsetTop;
                }
        },

        /* ==== main loop ==== */
        run : function ()
        {
                /* ==== motion ease ==== */
                tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);
                tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);
                tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);
                tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025);
                tv.camera.zoom.move(tv.camera.zoom.target, .05);
                /* ==== angles sin and cos ==== */
                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);
                /* ==== loop through all images ==== */
                for (var i = 0, o; o = tv.O[i]; i++)
                {
                        o.calc();
                        o.draw();
                }
                /* ==== loop ==== */
                setTimeout(tv.run, 32);
        }
}

/* ==== global mouse position ==== */
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;
}

</script>
</head>
<body>
<div id="screen"></div>
<div id="bankImages">
<img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wi23.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wi23.jpg">
<img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt06.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt06.jpg">
<img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt47.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt47.jpg">
<img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt16.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt16.jpg">
<img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt43.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt43.jpg">
<img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt19.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt19.jpg">
<img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt27.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt27.jpg">
<img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt46.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt46.jpg">
<img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt14.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt14.jpg">
<img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt21.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt21.jpg">
<img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt35.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt35.jpg">
<img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt48.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt48.jpg">
<img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt55.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt55.jpg">
<img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt40.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt40.jpg">
<img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt53.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt53.jpg">
<img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt25.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt25.jpg">
</div>
<script type="text/javascript">
        /* ==== start script ==== */
        onresize = tv.resize;
        tv.init();
</script>
</body>
</html>