Previous
Next
Create a panorama view of an image
Post by efox | Date: 2008-09-16
This JavaScript code implement a panorama view of an image, Scrolls to the left and to the right .
Click here to view panorama demo
//panorama.js
img_src='panorama.jpg';
img_wid=1440;
img_hei=100;
left_pos=20;
top_pos=20;
panel_wid=400;
panel_hei=100;
speed=30;
move_step=3;
tim=0;noscroll=true;
img_w=img_wid*panel_hei/img_hei;img_h=panel_hei;imstart=panel_wid/2-img_w*1.5;
jump_1=panel_wid/2-img_w*2.5;jump_wid_1=img_w-move_step;
jump_2=panel_wid/2-img_w/2;jump_wid_2=img_w+move_step;
text_wid=200;text_top=top_pos+img_h+10;
text_left_1=left_pos+(panel_wid/2)-text_wid;text_left_2=left_pos+(panel_wid/2);
function sr(){
if(!noscroll){
now=parseFloat(document.getElementById("pano").style.left);
if (now<=jump_1){now+=jump_wid_1;} else{now-=move_step;}
document.getElementById("pano").style.left=now;
tim=setTimeout("sr()",speed);}}
function sl(){
if(!noscroll){
now=parseFloat(document.getElementById("pano").style.left);
if (now>=jump_2){now-=jump_wid_2;} else{now+=move_step;}
document.getElementById("pano").style.left=now;
tim=setTimeout("sl()",speed);}}
function stop(){clearTimeout(tim); noscroll=true}
document.write("<div id='panorama'>");
document.write("<div id='pano' style='position:absolute; left:"+imstart+"px; top:0px; width:"+img_w*3+"px; height:"+img_h+"px; z-index:2; visibility:visible;'>");
document.write("<table><tr><td nowrap><img src='"+img_src+"' width="+img_w+"px height="+img_h+"px><img src='"+img_src+"' width="+img_w+"px height="+img_h+"px><img src='"+img_src+"' width="+img_w+"px height="+img_h+"px></td></tr></table>");
document.write("</div></div>");
document.write("<div id='left'><a href='javascript://' onmouseover='noscroll=false; sl()' onmouseout='stop()'>go left</a></div>");
document.write("<div id='right'><a href='javascript://' onmouseover='noscroll=false; sr()' onmouseout='stop()'>go right</a></div>");
document.write("<style>");
document.write("body { margin-left:0; margin-right:0; margin-top:0; margin-bottom:0;width:100%;height:100%;overflow:hidden;}");
document.write("#panorama {position:absolute; left:"+left_pos+"px; top:"+top_pos+"px; width:"+panel_wid+"px; height:"+panel_hei+"px; z-index:1; clip:rect(0px,"+panel_wid+"px,"+panel_hei+"px,0px); overflow:hidden;}");
document.write("#left {position:absolute; left:"+text_left_1+"px; top:"+text_top+"px; width:"+text_wid+"px; z-index:1; text-align:left;}");
document.write("#right {position:absolute; left:"+text_left_2+"px; top:"+text_top+"px; width:"+text_wid+"px; z-index:1; text-align:right;}");
document.write("#right a, #left a {text-decoration:none;}");
document.write("</style>");
Paste this code into the <HEAD> section of your HTML document.
<script type="text/javascript" src="panorama.js"></script>
Tags: 
ssssssssssssssssssssssss[2011-03-11 00:29 AM | 
]