| Autor | Zpráva | ||
|---|---|---|---|
| davidmyska Profil |
#1 · Zasláno: 1. 9. 2011, 19:24:15
dobrý den, vytvořil jsem si takovou jako kdyby virtuální prohlídku, mám obrázek který na bocích navazuje a posouvá se na pozadí prázdného DIVu, toto automatické posouvání funguje bez problémů, ale já jsem chtěl přidat ještě posunutí např. o 100px tlačítko pro toto posouvání do prava i do leva je zobrazeno pouze v zastavené poloze obrázku, vyskoušel jsem už vše co mě napadlo, ale nechce mi to fungovat.
zde máte celý můj kód posledního pokusu: <html>
<head>
<title>virtualni prohlidka</title>
<script type="text/javascript">
<!--
var moveBg=0;
function Roll(){
document.getElementById('roll').style.backgroundPosition= moveBg + 'px 20px';
moveBg--;
}
cas = window.setInterval("Roll()",30);
// -->
</script>
<style type="text/css">
body {text-align: center;}
#roll {background-image: url(park.jpg); background-repeat: repeat-x; height: 620px; width: 900px; margin: auto;}
#play, #posunR, #posunL {display: none;}
td input, table td {width: 40px;}
table {margin: auto;}
</style>
</head>
<body>
<div id="roll"></div>
<br>
<table bgcolor="#333333"><tr>
<td><input type="button" value="I<<" onclick="
moveBg+100;
" id="posunL"></td>
<td><input type="button" value="II" onclick="
clearInterval(cas);
document.getElementById('play').style.display = 'block';
document.getElementById('posunR').style.display = 'block';
document.getElementById('posunL').style.display = 'block';
document.getElementById('pause').style.display = 'none';
" id="pause"></td>
<td><input type="button" value=">" onclick="
moveBg--;
cas = setInterval('Roll()',30);
document.getElementById('play').style.display = 'none';
document.getElementById('posunR').style.display = 'none';
document.getElementById('posunL').style.display = 'none';
document.getElementById('pause').style.display = 'block';
" id="play"></td>
<td><input type="button" value=">>I" onclick="
moveBg-100;
" id="posunR"></td>
</tr></table>
</body>
</html>předem díky za odpověď |
||
| Rellik Profil |
#2 · Zasláno: 1. 9. 2011, 21:24:31 · Upravil/a: Rellik
A co použít nějaké hotové řešení od Googlu?
http://code.google.com/intl/cs/apis/maps/documentation/javascript/v2/services.html#StreetviewClientQuerys Já to dával např. sem: http://veletiny.cz/?page=virtual&cam=hriste Použití je jednoduché a stačí jeden script na X panoramat... EDIT: přidám kód který stačí na provozování toho "virtuálního" světa: <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Simple Custom StreetView</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var panorama;
function initialize() {
var panoOptions = {
pano: 'doma',
visible: true,
panoProvider: getCustomPanorama
}
panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano_canvas'),panoOptions);
}
function getCustomPanoramaTileUrl(pano,zoom,tileX,tileY) {
// Na dalším řádku je odkaz na fotku..
return 'fotka.jpg';
}
function getCustomPanorama(pano,zoom,tileX,tileY) {
switch(pano) {
case 'doma':
return {
location: {
pano: 'doma',
description: "Nějaký popis fotky"
},
links: [
],
copyright: 'Kdo to fotil',
tiles: {
tileSize: new google.maps.Size(1024, 512),
worldSize: new google.maps.Size(1024, 512),
centerHeading: 0,
getTileUrl: getCustomPanoramaTileUrl
}
};
break;
}
}
</script>
</head>
<body onload="initialize()">
<div id="pano_canvas" style="width: 800px; height: 600px"></div>
</body>
</html>
To je celá stránka - stačí nafotit nějaké to panorama. Jinak fotka musí být 2:1 takže pokud je moc širokoúhlá je nutné nahoře a dole doplnit černé (šedé, bílé... jednojaké) pruhy, tak aby fotka měla poměr stran 2:1 |
||
|
Časová prodleva: 13 let
|
|||
0