Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Montreal, Canada
    Posts
    644
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript QuicktimVR

    Just something I thought I'd give a try. It's like QuicktimeVR but JS based. So far it doesn't loop back at the end of the image to simulate the whole 360 degrees (panoramic only).

    Tested in IE6 and Moz 1.0

    Code:
    <html>
    
    <head>
    
    <META HTTP-EQUIV="imagetoolbar" CONTENT="no"> 
    
    <script>
    
    var ie=document.all
    var ns6=document.getElementById&&!document.all
    
    box_w = 500;
    box_h = 150;
    img_w = 6356; //specify image dimensions. Must be larger than box_w
    img_h = 243;
    image = "file.jpg";
    
    drag_go = false;
    
    function loader() {
    f = 0;
    if (img_w<box_w||img_w<box_w) {
    alert("Invalid image width/height!");
    window.stop();
    }
    max_y = img_w-box_w;
    max_x = img_h-box_h;
    document.getElementById("box").style.width = box_w;
    document.getElementById("box").style.height = box_h;
    document.getElementById("imag").src = image;
    document.getElementById("imag").style.left = -((img_w-box_w)/2);
    document.getElementById("imag").style.top = -((img_h-box_h)/2);
    }
    
    function mouse(e) {
    if (ns6) {
    cur_x = e.clientX;
    cur_y = e.clientY;
    }else if (ie) {
    cur_x = event.clientX;
    cur_y = event.clientY;
    }
    return false;
    }
    
    function drag() {
    xxx = cx-cur_x;
    yyy = cy-cur_y;
    xxxx = (parseInt(document.getElementById("imag").style.top)+(yyy/5));
    yyyy = (parseInt(document.getElementById("imag").style.left)+(xxx/5));
    if (xxxx<=-max_x) {
    document.getElementById("imag").style.top = -max_x;
    }else if (xxxx>=0) {
    document.getElementById("imag").style.top = 0;
    }else{
    document.getElementById("imag").style.top = xxxx;
    }
    if (yyyy<=-max_y) {
    document.getElementById("imag").style.left = -max_y;
    }else if (yyyy>=0) {
    document.getElementById("imag").style.left = 0;
    }else{
    document.getElementById("imag").style.left = yyyy;
    }
    //document.getElementById("imag").style.left = yyyy;
    if (drag_go) {
    setTimeout("drag()",1);
    }
    }
    
    document.onmouseup=new Function("drag_go=false;");
    
    </script>
    
    </head>
    
    <body onload="setTimeout('loader()',200);" onmousemove="mouse(event); return false;">
    
    <div style="overflow: hidden;" id="box" onmousedown="drag_go=true; cx=cur_x; cy=cur_y; drag();">
    <img id="imag" style="position: relative; top: 0; left: 0;">
    </div>
    
    </body>
    
    </html>
    Last edited by x_goose_x; 08-05-2002 at 10:35 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •