「JavaScript」三维立体-图片相册效果 [不看后悔一辈子]

演示地址:http://www.guowang2008.cn/html/javascript1.html

觉得好的话,一定要给我顶一下。

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
< html >
< head >
< title > 三维立体-图片相册效果 </ title >
< style  type ="text/css" >
    html 
{
        overflow
: hidden;
    
}

    body 
{
        position
: absolute;
        margin
: 0px;
        padding
: 0px;
        background
: #111;
        width
: 100%;
        height
: 100%;
    
}

    #screen 
{
        position
: absolute;
        left
: 10%;
        top
: 10%;
        width
: 80%;
        height
: 80%;
        background
: #000;
    
}

    #screen img 
{
        position
: absolute;
        cursor
: pointer;
        visibility
: hidden;
        width
: 0px;
        height
: 0px;
    
}

    #screen .tvover 
{
        border
: solid #876;
        opacity
: 1;
        filter
: alpha(opacity=100);
    
}

    #screen .tvout 
{
        border
: solid #fff;
        opacity
: 0.7;
    
}

    #bankImages 
{
        display
: none;
    
}

</ style >
< script  type ="text/javascript" >
var Library = {};
Library.ease 
= function () {
    
this.target = 0;
    
this.position = 0;
    
this.move = function (target, speed)
    
{
        
this.position += (target - this.position) * speed;
    }

}

var tv = {
    O : [],
    screen : 
{},
    grid : 
{
        size       : 
4,  
        borderSize : 
6,  
        zoomed     : 
false
    }
,
    angle : 
{
        x : 
new Library.ease(),
        y : 
new Library.ease()
    }
,
    camera : 
{
        x    : 
new Library.ease(),
        y    : 
new Library.ease(),
        zoom : 
new Library.ease(),
        focalLength : 
750 
    }
,
    init : 
function ()
    
{
        
this.screen.obj = document.getElementById('screen');
        
var img = document.getElementById('bankImages').getElementsByTagName('img');
        
this.screen.obj.onselectstart = function () return false; }
        
this.screen.obj.ondrag        = function () return false; }
        
var ni = 0;
        
var n = (tv.grid.size / 2- .5;
        
for (var y = -n; y <= n; y++)
        
{
            
for (var x = -n; x <= n; x++)
            
{
                
var o = document.createElement('img');
                
var i = img[(ni++% img.length];
                o.className 
= 'tvout';
                o.src 
= i.src;
                tv.screen.obj.appendChild(o);
                o.point3D 
= {
                    x  : x,
                    y  : y,
                    z  : 
new Library.ease()
                }
;
                o.point2D 
= {};
                o.ratioImage 
= 1;
                tv.O.push(o);
                o.onmouseover 
= function ()
                
{
                    
if (!tv.grid.zoomed)
                    
{
                        
if (tv.o)
                        
{
                            tv.o.point3D.z.target 
= 0;
                            tv.o.className 
= 'tvout';
                        }

                        
this.className = 'tvover';
                        
this.point3D.z.target = -.5;
                        tv.o 
= this;
                    }

                }

                o.onclick 
= function ()
                
{
                    
if (!tv.grid.zoomed)
                    
{
                        tv.camera.x.target 
= this.point3D.x;
                        tv.camera.y.target 
= this.point3D.y;
                        tv.camera.zoom.target 
= tv.screen.w * 1.25;
                        tv.grid.zoomed 
= this;
                    }
 else {
                        
if (this == tv.grid.zoomed){
                            tv.camera.x.target 
= 0;
                            tv.camera.y.target 
= 0;
                            tv.camera.zoom.target 
= tv.screen.w / (tv.grid.size + .1);
                            tv.grid.zoomed 
= false;
                        }

                    }

                }

                o.calc 
= function ()
                
{
                    
this.point3D.z.move(this.point3D.z.target, .5);
                    
var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;
                    
var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;
                    
var z = this.point3D.z.position * tv.camera.zoom.position;
                    
var xy = tv.angle.cx * y  - tv.angle.sx * z;
                    
var xz = tv.angle.sx * y  + tv.angle.cx * z;
                    
var yz = tv.angle.cy * xz - tv.angle.sy * x;
                    
var yx = tv.angle.sy * xz + tv.angle.cy * x;
                    
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
                                       )
                                     );
                    
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);
                    }

                }

                o.draw 
= function ()
                
{
                    
if (this.complete)
                    
{
                        
if (!this.loaded)
                        
{
                            
if (!this.img)
                            
{
                                
this.img = new Image();
                                
this.img.src = this.src;
                            }

                            
if (this.img.complete)
                            
{
                                
this.style.visibility = 'visible';
                                
this.ratioImage = this.img.width / this.img.height;
                                
this.loaded = true;
                                
this.img = false;
                            }

                        }

                        
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);
                    }

                }

            }

        }

        tv.resize();
        mouse.y 
= tv.screen.y + tv.screen.h;
        mouse.x 
= tv.screen.x + tv.screen.w;
        tv.run();
    }
,
    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;
        }

    }
,
    run : 
function ()
    
{
        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);
        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);
        
for (var i = 0, o; o = tv.O[i]; i++)
        
{
            o.calc();
            o.draw();
        }

        setTimeout(tv.run, 
32);
    }

}

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 ="https://p-blog.csdn.net/images/p_blog_csdn_net/WanTianwen/382001/o_14.jpg" >
    
< img  alt =""  src ="https://p-blog.csdn.net/images/p_blog_csdn_net/WanTianwen/382001/o_3.jpg" >
    
< img  alt =""  src ="https://p-blog.csdn.net/images/p_blog_csdn_net/WanTianwen/382001/o_16.png" >
    
< img  alt =""  src ="https://p-blog.csdn.net/images/p_blog_csdn_net/WanTianwen/382001/o_8.jpg" >
    
< img  alt =""  src ="https://p-blog.csdn.net/images/p_blog_csdn_net/WanTianwen/382001/o_1.bmp" >
    
< img  alt =""  src ="http://cache33.51.com/photo2/e6/78/wantianwen/e202d467c6ba813545582b56f04c2a1d.jpg" >
    
< img  alt =""  src ="http://cache33.51.com/photo2/e6/78/wantianwen/74c3e07acebb6f854c7e9a221177edd5.jpg" >
    
< img  alt =""  src ="http://cache33.51.com/photo2/e6/78/wantianwen/4949b3aaef68c61cc8779413e0c0e477.jpg" >
    
< img  alt =""  src ="http://images10.51.com/b/200610/e6/78/wantianwen/e6170b2c57f87d02692be0e611034813.jpg" >
    
< img  alt =""  src ="http://cache33.51.com/photo2/e6/78/wantianwen/6a06a243639859776453c64a95f7b686.jpg" >
    
< img  alt =""  src ="http://cache45.51.com/photo5/e6/78/wantianwen/098ca589bb50843df84318baa649191a.jpg" >
    
< img  alt =""  src ="http://cache45.51.com/photo5/e6/78/wantianwen/8a935979e6f3d757ed4c5020ed3155aa.jpg" >
    
< img  alt =""  src ="http://cache45.51.com/photo5/e6/78/wantianwen/006e96a581ccd4f1d52f4cceb803f622.jpg" >
    
< img  alt =""  src ="http://cache33.51.com/photo2/e6/78/wantianwen/9066f5ceb52a3d9eba534c001c8fc62a.jpg" >
    
< img  alt =""  src ="http://cache33.51.com/photo2/e6/78/wantianwen/f5ed5b422236332ef28c5fe36e0e61f3.jpg" >
    
< img  alt =""  src ="http://cache18.51.com/photo/e6/78/wantianwen/1150462594548.jpg" >
    
< img  alt =""  src ="http://cache18.51.com/photo/e6/78/wantianwen/1150461892572.jpg" >
</ div >
< script  type ="text/javascript" >
    onresize 
= tv.resize;
    tv.init();
</ script >
</ body >
</ html >

 

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值