视觉盛宴之INTERCATIVE DHTML

女爷i 2022-07-12 02:23 74阅读 0赞

准备一张图片：images.gif 比如我用的，  
![图片][20170207164725942]  
效果之一如下：

![图片][20170207164735661]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
    <head> 
    <title>INTERCATIVE DHTML</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; 
    } 
    </style> 
    
    <script type="text/javascript"> 
    /* ==== Easing function ==== */ 
    var Library = {}; 
    Library.ease = function () { 
    this.target = 0; 
    this.position = 0; 
    this.move = function (target, speed) { 
    this.position += (target - this.position) * speed; 
    } 
    } 
    
    var tv = { 
    /* ==== variables ==== */ 
    O : [], 
    fps : 0, 
    screen : {}, 
    angle : { 
    x : new Library.ease(), 
    y : new Library.ease() 
    }, 
    camera : { 
    x    : new Library.ease(), 
    y    : new Library.ease() 
    }, 
    create3DHTML : function (i, x, y, z, sw, sh) { 
    /* ==== create HTML image element ==== */ 
    var o = document.createElement('img'); 
    o.src = i.src; 
    tv.screen.obj.appendChild(o); 
    /* ==== 3D coordinates ==== */ 
    o.point3D = { 
    x  : x, 
    y  : y, 
    z  : new Library.ease(), 
    sw : sw, 
    sh : sh, 
    w  : i.width, 
    h  : i.height 
    }; 
    o.point3D.z.target = z; 
    /* ==== push object ==== */ 
    o.point2D = {}; 
    tv.O.push(o); 
    
    /* ==== on mouse over event ==== */ 
    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; 
    } 
    
    /* ==== on mousedown event ==== */ 
    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(); 
    } 
    } 
    } 
    
    /* ==== main 3D function ==== */ 
    o.animate = function () { 
    /* ==== 3D coordinates ==== */ 
    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); 
    /* ==== rotations ==== */ 
    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; 
    /* ==== 2D transform ==== */ 
    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)); 
    /* ==== HTML rendering ==== */ 
    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 script ==== */ 
    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; 
    /* ==== create objects ==== */ 
    var i = 0, o; 
    while( o = structure[i++] ) 
    this.create3DHTML(o.img, o.x, o.y, o.z, o.sw, o.sh); 
    /* ==== start script ==== */ 
    this.resize(); 
    mouse.y = this.screen.y + this.screen.h; 
    mouse.x = this.screen.x + this.screen.w; 
    /* ==== loop ==== */ 
    setInterval(tv.run, 16); 
    setInterval(tv.dFPS, 1000); 
    }, 
    
    /* ==== resize window ==== */ 
    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; 
    } 
    } 
    }, 
    
    /* ==== main loop ==== */ 
    run : function () { 
    tv.fps++; 
    /* ==== motion ease ==== */ 
    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); 
    /* ==== 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 images ==== */ 
    var i = 0, o; 
    while( o = tv.O[i++] ) o.animate(); 
    }, 
    
    /* ==== trace frames per seconds ==== */ 
    dFPS : function () { 
    document.getElementById('FPS').innerHTML = tv.fps + ' FPS'; 
    tv.fps = 0; 
    } 
    } 
    
    /* ==== 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; 
    } 
    
    /* ==== starting script ==== */ 
    onload = function() { 
    onresize = tv.resize; 
    /* ==== build grid ==== */ 
    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 }); 
    /* ==== let's go ==== */ 
    tv.init(structure, 350, -200, .005, .0025); 
    } 
    </script> 
    </head> 
    
    <body> 
    <div id="screen"> </div> 
    <div id="bankImages"> 
    <img alt="DHTML" src="images.gif"> 
    </div> 
    <div id="FPS"></div> 
    </body> 
    </html>

[20170207164725942]: /images/20220711/04ad4e8f12c443008f78bfe169870855.png
[20170207164735661]: /images/20220711/4ec3f14f1f684f2d99e895ec0c2cbf23.png