Πανοραμική φωτογραφία

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
MadCat
Δημοσιεύσεις: 18
Εγγραφή: 16 Δεκ 2001 01:00
Επικοινωνία:

Πανοραμική φωτογραφία

Δημοσίευση από MadCat » 14 Ιουν 2007 13:29

Θελω να φτιάξω στην σελίδα μου κάτι τέτοιο
http://www.dgloader.dsl.pipex.com/elunda2000.htm

Νομίζω πως το έχουν κάνει με java. Μπορειτε να μου πειτε αν ξέρετε αν υπάρχει κάποιος ευκολος τρόπος να φτιάξω κάτι τέτοιο;;

Άβαταρ μέλους
dik_
Δημοσιεύσεις: 476
Εγγραφή: 07 Ιουν 2007 11:28

Πανοραμική φωτογραφία

Δημοσίευση από dik_ » 14 Ιουν 2007 13:50

Ναι, με java είναι, δηλαδή όχι javascript :P

Μπορείς να κατεβάσεις το .jar, και λογικά να το συμπεριλάβεις σε δική σου σελίδα, μιας και η εικόνα δεν είναι hardcoded, αλλά την παίρνει από παράμετρο στο <applet> tag...

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Πανοραμική φωτογραφία

Δημοσίευση από skeftomilos » 14 Ιουν 2007 13:56

Κάτι παραπλήσιο μπορεί να γίνει σχετικά εύκολα με ένα absolute positioned image μεγάλου πλάτους, τοποθετημένο μέσα σε ένα relatively positioned div με overflow:hidden. Μετά για να κινηθεί το image αρκεί η μεταβολή του style.left.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
telas
Honorary Member
Δημοσιεύσεις: 1594
Εγγραφή: 12 Μαρ 2004 12:54
Τοποθεσία: Kastoria
Επικοινωνία:

Πανοραμική φωτογραφία

Δημοσίευση από telas » 14 Ιουν 2007 14:15

το συγκεκριμένο applet είναι το PixScreen version 1.0.3.0

θα το βρεις εδώ μαζι με άλλα καλούδια αποτι βλέπω
http://www.pixaround.gr/Pixaround/Profaq.htm
Web Design - Δημιουργία Ιστοσελίδας - http://www.computerman.gr/
My Photography - http://www.tilaveridis.com/
Τεχνολογικά προιόντα - http://www.bigbox.gr/

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

Πανοραμική φωτογραφία

Δημοσίευση από Khronos » 14 Ιουν 2007 17:57

Skeftomilos μπορείς να περιγράψεις λίγο πιο αναλυτικά
τον τρόπο που ανέφερες γιατί με ενδιαφέρει?
Ευχαριστώ

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Πανοραμική φωτογραφία

Δημοσίευση από skeftomilos » 14 Ιουν 2007 20:14

Κώδικας: Επιλογή όλων

<div style="position&#58;relative;width&#58;300px;height&#58;200px;overflow&#58;hidden">
  <img id="scroller" style="position&#58;absolute" width="1200" height="200">
</div>
Και μετά για να κινηθεί η εικόνα αρκεί να δωθεί κάποια αρνητική τιμή στο style.left:

Κώδικας: Επιλογή όλων

<button onclick="document.getElementById&#40;'scroller'&#41;.style.left = '-100px'">Move it</button>
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

MadCat
Δημοσιεύσεις: 18
Εγγραφή: 16 Δεκ 2001 01:00
Επικοινωνία:

Πανοραμική φωτογραφία

Δημοσίευση από MadCat » 14 Ιουν 2007 20:59

Βρήκα τον παρακάτω κώδικα ΕΔΩ

<BODY>

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Martin Krolik -->
<!-- Web Site: http://krolik.net/PIV.jsp -->
<SCRIPT language='javascript' src='m-x.js'></SCRIPT>
<SCRIPT language=javascript>
// 360 Degree Panorama Image Viewer
// **************************************************************************
// Written by Martin Krolik
// http://krolik.net
// martin@krolik.net
// **************************************************************************
// Original Cross Browser (NS4+,NS6+/Mozilla1+,IE4+,Safari1+) DHTML 360 Degree Panormic Image Javascript Viewer
// Version 3.2
// Works by putting two of the same image adjacent. A viewport scrolls throw the images
// as the images moves to compensate.
// vars below
var mytimer,xdist,ydist,xoffset,yoffset,xviewport,yviewport,defaulttravel,defaulttimeout,borderheight,borderwidth,bwidth,bheight,myobject,outerimgdiv,mypframe,myloadingdiv,myimage,mysecondimage,initialized,loaded,xoffsetwithinpic,yoffsetwithinpic,origimagewidth,origimageheight,maxtravel;

var imgNW,imgN,imgNE,imgW,imgE,imgSW,imgS,imgSE;

// vars above
// ---------------------- Parameters below --------------------------------//
xoffset = 0;
yoffset = 0;
xoffsetwithinpic = 0; // messes everything up... see note in code - not implemented
yoffsetwithinpic = 0; // messes everything up... see note in code - not implemented
xviewport = 280; // size of view window ... must be less than size of image
yviewport = 160;
defaulttravel = 3; // how many pixels at a time we move .... choppy'ness VS. slowness
defaulttimeout = 20; // how many milliseconds between moves
maxtravel = 8; // max number of pixels to move with mouse move event
borderheight = 25; // actually should be derived from NORTH or SOUTH BORDER image, but isn't
borderwidth = 25; // actualy should be derived from EAST or WEST BORDER image, but isn't
var dblZoom = 1.0;
// ---------------------- Parameters above --------------------------------//
// init code below - no modifications required
initialized = false;
loaded = false;
var pOldOnLoadPIV = null;
var pOldOnResizePIV = null;
if (window.onload != null) {
pOldOnLoadPIV = window.onload;
}
if (window.onresize != null) {
pOldOnResizePIV = window.onresize;
}


var mypreloadedimages=new Array()
function preloadimages()
{
for (i=0;i<preloadimages.arguments.length;i++)
{
mypreloadedimages=new Image();
mypreloadedimages.src=preloadimages.arguments;
}
}
preloadimages("panorama/images/ur-over.gif" , "panorama/images/u-over.gif" ,"panorama/images/ul-over.gif" ,"panorama/images/r-over.gif" , "panorama/images/l-over.gif" ,"panorama/images/br-over.gif" , "panorama/images/b-over.gif" , "panorama/images/bl-over.gif" );

var vstate = false;
var startx = 0;
var starty = 0;
function mdevent(objEvent)
{
if (vstate == false)
{
var oEvent = new xEvent(objEvent);
quitmoving();
xdist = 0;
ydist = 0;
startx = oEvent.pageX;
starty = oEvent.pageY;
vstate = true;
}
}
function mmevent(objEvent)
{
if (vstate) {
var oEvent = new xEvent(objEvent);
var xdelta, ydelta;
xdelta = oEvent.pageX - startx;
ydelta = oEvent.pageY - starty;
if (xdelta > 0)
{
xdist = Math.round(Math.min(( xdelta / 2) , maxtravel));
}
else
{
xdist = Math.round(Math.max(( xdelta / 2) , 0-maxtravel));
}
if (ydelta > 0)
{
ydist = Math.round(Math.min(( ydelta / 2) , maxtravel));
}
else
{
ydist = Math.round(Math.max(( ydelta / 2) , 0-maxtravel));
}
/*
// begin experimental mouse moving 2
if (oEvent.pageX > startx) {
xdist = defaulttravel;
} else if (oEvent.pageX < startx) {
xdist = 0 - defaulttravel;
} else {
xdist = 0;
}

if (oEvent.pageY > starty) {
ydist = defaulttravel;
} else if (oEvent.pageY < starty) {
ydist = 0 - defaulttravel;
} else {
ydist = 0;
}
end experimental mouse moving 2 */
shiftover();
}
}
function muevent(objEvent)
{
if (vstate)
{
var oEvent = new xEvent(objEvent);
// begin experimental mouse moving 3
//xdist = Math.round(Math.min(( (oEvent.pageX - startx) / 2) , 50));
//ydist = Math.round(Math.min(( (oEvent.pageY - starty) / 2) , 50));
//shiftover();
// end experimental mouse moving 3
vstate = false;
}
}
function zoomReset()
{
if (!loaded) return;
if (document.layers)
{
alert('The Zoom feature is not supported in Netscape 4.');
return;
}
var nheight = origimageheight;
var nwidth = origimagewidth;
var left = xLeft(myobject);
var top = xTop(myobject);
var nl = left;
var nt = top;
if (nt < 0 - nheight + yviewport)
{
nt = 0 - nheight + yviewport ;
}
if (nt > 0)
{
nt = 0;
}
if (nl > 0)
{
nl = 0;
}

xWidth(myimage, origimagewidth);
xHeight(myimage, origimageheight);

xWidth(mysecondimage, origimagewidth);
xHeight(mysecondimage, origimageheight);

xLeft(myobject, nl);
xTop(myobject, nt);
shiftover();
}
function zoomIn()
{
if (!loaded) return;
if (document.layers)
{
alert('The Zoom feature is not supported in Netscape 4.');
return;
}
dblZoom = 1.2; // Zoom Out Percentage
var nwidth = Math.round(dblZoom * xWidth(myimage)) ;
var nheight = Math.round(dblZoom * xHeight(myimage)) ;
xWidth(myimage, nwidth);
xHeight(myimage, nheight);

xWidth(mysecondimage, nwidth );
xHeight(mysecondimage, nheight );

var left = xLeft(myobject);
var top = xTop(myobject);
var nl = dblZoom * (left - (0.5 * xviewport)) + (0.5 * xviewport) ;
var nt = dblZoom * (top - (0.5 * yviewport)) + (0.5 * yviewport) ;
xLeft(myobject, nl);
xTop(myobject, nt);
if (document.layers)
{
xClip(myobject,null, xviewport - xLeft(myobject) ,null,null);
}
shiftover();
return;
}
function zoomOut()
{
if (!loaded) return;
if (document.layers)
{
alert('The Zoom feature is not supported in Netscape 4.');
return;
}
dblZoom = 0.8; // Zoom Out Percentage
var nwidth = Math.round(dblZoom * xWidth(myimage)) ;
var nheight = Math.round(dblZoom * xHeight(myimage)) ;
if (( xviewport < nwidth ) && ( yviewport < nheight ) )
{
var left = xLeft(myobject);
var top = xTop(myobject);
var nl = dblZoom * (left - (0.5 * xviewport)) + (0.5 * xviewport) ;
var nt = dblZoom * (top - (0.5 * yviewport)) + (0.5 * yviewport) ;
if (nt < 0 - nheight + yviewport)
{
nt = 0 - nheight + yviewport ;
}
if (nt > 0)
{
nt = 0;
}
if (nl > 0)
{
nl = 0;
}


xWidth(myimage, nwidth);
xHeight(myimage, nheight);

xWidth(mysecondimage, nwidth);
xHeight(mysecondimage, nheight);

xLeft(myobject, nl);
xTop(myobject, nt);
if (document.layers)
{
xClip(myobject,null, xviewport - xLeft(myobject) ,null,null);
}
}
shiftover();
return;
}
function initpiv()
{
myobject = xGetElementById("dimg");
outerimgdiv = xGetElementById("dimgOuter");
mypframe = xGetElementById("mypicframe");
myloadingdiv = xGetElementById("nowloading");
myimage = xGetElementById("ione");

mysecondimage = xGetElementById("itwo");


imgNW = xGetElementById("borderNW");
imgN = xGetElementById("borderN");
imgNE = xGetElementById("borderNE");
imgW = xGetElementById("borderW");
imgE = xGetElementById("borderE");
imgSW = xGetElementById("borderSW");
imgS = xGetElementById("borderS");
imgSE = xGetElementById("borderSE");



if (document.layers)
{
xAddEventListener(document, "mousedown", mdevent, true);
xAddEventListener(document, "mousemove", mmevent, true);
xAddEventListener(document, "mouseup", muevent, true);
} else {
if (mypframe)
{
xAddEventListener(mypframe, "mousedown", mdevent, true);
xAddEventListener(mypframe, "mousemove", mmevent, true);
xAddEventListener(mypframe, "mouseup", muevent, true);
}
if (outerimgdiv)
{
xAddEventListener(outerimgdiv, "mousedown", mdevent, true);
xAddEventListener(outerimgdiv, "mousemove", mmevent, true);
xAddEventListener(outerimgdiv, "mouseup", muevent, true);
}
if (myobject)
{
xAddEventListener(myobject, "mousedown", mdevent, true);
xAddEventListener(myobject, "mousemove", mmevent, true);
xAddEventListener(myobject, "mouseup", muevent, true);
}
if (myimage)
{
xAddEventListener(myimage, "mousedown", mdevent, true);
xAddEventListener(myimage, "mousemove", mmevent, true);
xAddEventListener(myimage, "mouseup", muevent, true);
}
if (mysecondimage)
{
xAddEventListener(mysecondimage, "mousedown", mdevent, true);
xAddEventListener(mysecondimage, "mousemove", mmevent, true);
xAddEventListener(mysecondimage, "mouseup", muevent, true);
}
} // no document.layers

origimagewidth = xWidth(myimage);
origimageheight = xHeight(myimage);
loaded = true;
positionpiv();
if (pOldOnLoadPIV != null) {
pOldOnLoadPIV();
}
}
function positionpiv()
{
xoffset = xPageX('PlaceHolderDiv') + borderwidth;
yoffset = xPageY('PlaceHolderDiv') + borderheight;
if (loaded)
{
xMoveTo(outerimgdiv,xoffset,yoffset);
xMoveTo(mypframe,xoffset-borderwidth,yoffset-borderheight+1);
}
xHide(myloadingdiv);
xClip(myloadingdiv,0,0,0,0);
xShow(outerimgdiv);
xShow(myobject);
xShow(mypframe);
xClip(mypframe,0,(xviewport+borderwidth+borderwidth),(yviewport+borderheight+borderheight),0);
xClip(mypframe,0,(xviewport+borderwidth+borderwidth),(yviewport+borderheight+borderheight),0);

// lines below seem to add wierd blank pixel lines to top and bottom
// of scroll in ie5
xdist = xoffsetwithinpic;
ydist = yoffsetwithinpic;

shiftover();
quitmoving();
xdist=1;
ydist=0;
shiftover();
if (pOldOnResizePIV != null) {
pOldOnResizePIV();
}

}
function shiftover()
{
if (loaded)
{
quitmoving();
if ( ((xTop(myobject) - ydist ) >= 0) && (ydist<0) )
{
ydist = 0;
} else
if ( ((xTop(myobject) - ydist ) <= ( yviewport - xHeight(myimage) ) ) && (ydist>0) )
{
ydist = 0;
}

xMoveTo(myobject, xLeft(myobject) - xdist, xTop(myobject) - ydist);

if (xLeft(myobject) > 0 )
{
xLeft(myobject, 0 - xWidth(myimage));
} else
if (xLeft(myobject) < (0 - xWidth(myimage) ) )
{
xLeft(myobject, 0);
}

if (document.layers)
{
xClip(myobject,null, xviewport - xLeft(myobject) ,null,null);
}
initialized == true;
if ((xdist != 0) || (ydist != 0))
{
mytimer = setTimeout("shiftover()",defaulttimeout);
}
}
}
function quitmoving()
{
if (mytimer)
{
clearTimeout(mytimer);
}
if (quitmoving.arguments.length > 0)
{
var blnClearDist = quitmoving.arguments[0];
if (blnClearDist == true)
{
xdist = 0;
ydist = 0;
}
}
}
function SwapImage(vImageName, vImageSrc)
{
var objImg = xGetElementById(vImageName);
if (objImg)
{
if (objImg.src)
{
objImg.src = vImageSrc;
}
}
}
function move_NW() {
xdist=-defaulttravel;
ydist=-defaulttravel;
shiftover();
}
function move_N() {
xdist=0;
ydist=-defaulttravel;
shiftover();
}
function move_NE() {
xdist=defaulttravel;
ydist=-defaulttravel;
shiftover();
}
function move_W() {
xdist=-defaulttravel;
ydist=0;
shiftover();
}
function move_E() {
xdist=defaulttravel;
ydist=0;
shiftover();
}
function move_SW() {
xdist=-defaulttravel;
ydist=defaulttravel;
shiftover();
}
function move_S() {
xdist=0;
ydist=defaulttravel;
shiftover();
}
function move_SE() {
xdist=defaulttravel;
ydist=defaulttravel;
shiftover();
}

xMoveTo(myloadingdiv, xLeft('PlaceHolderDiv'), xTop('PlaceHolderDiv'));

window.onload=initpiv;
window.onresize=positionpiv;


</SCRIPT>
<STYLE type="text/css">
.placeHolder {
POSITION: relative;
WIDTH: 330px;
HEIGHT: 210px;
VISIBILITY: visible;
CURSOR: move;
z-index: 10;
}
.nowLoading {
VISIBILITY: visible;
POSITION: absolute;
}
.imageDiv {
POSITION: relative;
TOP: 0px;
LEFT: 0px;
CURSOR: move;
z-index: 30;
}
.imageDivOuter {
VISIBILITY: hidden;
POSITION: absolute;
TOP: 0px;
LEFT: 0px;
CURSOR: move;
WIDTH: 280px;
HEIGHT: 160px;
OVERFLOW: hidden;
z-index: 30;
}
.picFrameDiv {
POSITION: absolute;
CLIP: rect(0px 0px 0px 0px);
TOP: 10px;
LEFT: 10px;
z-index: 50;
CURSOR: move;
}
</STYLE>
<!--div containing a couple images begin-->
<DIV id="dimgOuter" class="imageDivOuter" name="dimgOuter">
<DIV id="dimg" class="imageDiv" name="dimg">
<TABLE border=0 cellPadding=0 cellSpacing=0>
<!-- THE 360 DEGREE IMAGE BELOW (DO NOT FORCE SIZE) -->
<!-- be sure to change src in BOTH images -->
<TR>
<TD><IMG id="ione" name="ione" src="PIV.jpg" border="0"></TD>

<TD><IMG id="itwo" name="itwo" src="PIV.jpg" border="0"></TD>

</TR>
<!-- THE 360 DEGREE IMAGE ABOVE -->
</TABLE>
</DIV>
</DIV>
<!--div containing a couple images end-->
<!--div containing the picture frame -->
<DIV id="mypicframe" class="picFrameDiv">

<TABLE border='0' cellPadding='0' cellSpacing='0'>
<TR>
<TD bgColor=#0000ff><A href="javascript:void(0);"
onmouseover="imgNW.src='ul-over.gif';move_NW();"
onmouseout="imgNW.src='ul.gif';quitmoving(true);">
<IMG border=0 height='25' src="ul.gif" width='25' name=borderNW id=borderNW></A></TD>
<TD bgColor=#0000ff><A href="javascript:void(0);"
onmouseover="imgN.src='u-over.gif';move_N();"
onmouseout="imgN.src='u.gif';quitmoving(true);">
<IMG border=0 height='25' src="u.gif" width='280' name=borderN id=borderN></A></TD>
<TD bgColor=#0000ff><A href="javascript:void(0);"
onmouseover="imgNE.src='ur-over.gif';move_NE();"
onmouseout="imgNE.src='ur.gif';quitmoving(true);">
<IMG border=0 height='25' src="ur.gif" width='25' name=borderNE id=borderNE></A></TD>
</TR>
<TR>
<TD bgColor=#0000ff><A href="javascript:void(0);"
onmouseover="imgW.src='l-over.gif';move_W();"
onmouseout="imgW.src='l.gif';quitmoving(true);">
<IMG border=0 height='158'
src="l.gif" width='25' name=borderW id=borderW></A></TD>
<TD align='center' valign='center' width='280'><font face='serif' size='3' color='#cc6600'>PIV Example</font></TD>
<TD bgColor=#0000ff><A href="javascript:void(0);"
onmouseover="imgE.src='r-over.gif';move_E();"
onmouseout="imgE.src='r.gif';quitmoving(true);">
<IMG border=0 height='158'
src="r.gif" width='25' name=borderE id=borderE></A></TD>
</TR>
<TR>
<TD bgColor=#0000ff><A href="javascript:void(0);"
onmouseover="imgSW.src='bl-over.gif';move_SW();"
onmouseout="imgSW.src='bl.gif';quitmoving(true);">
<IMG border=0 height='25' src="bl.gif" width='25' name=borderSW id=borderSW></A></TD>
<TD bgColor=#0000ff><A href="javascript:void(0);"
onmouseover="imgS.src='b-over.gif';move_S();"
onmouseout="imgS.src='b.gif';quitmoving(true);">
<IMG border=0 height='25' src="b.gif" width='280' name=borderS id=borderS></A></TD>
<TD bgColor=#0000ff><A href="javascript:void(0);"
onmouseover="imgSE.src='br-over.gif';move_SE();"
onmouseout="imgSE.src='br.gif';quitmoving(true);">
<IMG border=0 height='25' src="br.gif" width='25' name=borderSE id=borderSE></A></TD>
</TR>
</TABLE>

</DIV>
<!--div containing the picture frame -->
<!-- now loading div begin -->
<DIV id='nowloading' class='nowLoading'>
<H5> Please wait. Loading.... </H5>
</DIV>
<!-- now loading div end-->
<table border='0' cellPadding='0' cellSpacing='0'><tr><td colspan='3'>
<!-- Before Placeholder --></td></tr><tr><td>
<!-- Left of Placeholder -->
</td><td>
<!-- important placeholder div begin

****** THIS IS THE DIV THAT IS USED TO PLACE THE PIV IN YOUR OWN CUSTOM PAGE LAYOUT ******

-->
<DIV id='PlaceHolderDiv' class='placeHolder'><table border=0 WIDTH=330
HEIGHT=210 >
<tr><td> </td></tr></table>
</DIV>
<!-- important placeholder div end -->
</td><td>
<!-- Right of Placeholder -->
</td></tr>
<!-- After Placeholder -->

<tr><td> </td><td align='center'>
<a href='javascript:void(0)' onClick='zoomOut();'><img border='0' src='ZoomOutButton.gif' alt='Zoom Out'></a>
<a href='javascript:void(0)' onClick='zoomReset();'><img border='0' src='ZoomResetButton.gif' alt='Zoom Reset'></a>
<a href='javascript:void(0)' onClick='zoomIn();'><img border ='0' src='ZoomInButton.gif' alt='Zoom In'></a>
</td><td></td></tr>

</table>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>



Μπορειτε να μου πείτε γιατι μπερδεύτηκα λίγο
1. Σε ποιο σημείο του κώδικα πρέπει να βαλω την διαδρομή της φωτογραφίας για να τρεξει. Την ανεβάζω π.χ. www.test.gr/images/image1.jpg ή την ρίχνω χύμα στο root της σελίδας;

2. Επίσης για να φτιάξω μια φωτογραφία μεγάλου πλάτους μπορω να την κάνω και με το photoshop ή θελει άλλο πρόγραμμα;

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

Πανοραμική φωτογραφία

Δημοσίευση από Khronos » 14 Ιουν 2007 22:47

Skeftomilos το έκανα αυτό αλλα δουλεύει μόνο στο
πρώτο πάτημα του κουμπιού. Μετά δν κάνει τίποτα.
Χρειάζεται να γράψω τπτ άλλο?

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Πανοραμική φωτογραφία

Δημοσίευση από skeftomilos » 15 Ιουν 2007 01:01

Τι περίμενες βρε Khrone να κάνει μια γραμμή κώδικα! :-) Απλά περιέγραψα τη γενική ιδέα. Για να αντιγράψεις το εφέ του Java applet θα χρειαστείς περισσότερο κώδικα, γνώση των timers (setTimeout), και ασφαλώς γνώση JavaScript.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
ALKIVIADES
Honorary Member
Δημοσιεύσεις: 1322
Εγγραφή: 07 Απρ 2005 03:39

Πανοραμική φωτογραφία

Δημοσίευση από ALKIVIADES » 15 Ιουν 2007 01:15

..μια (no programming sense) κουτοπόνηρη τσαπατσουλιά θα είτο και η ακόλουθη ..ανάλογα βέβαια με τα size της εικόνας

Α
ρχή
<button onclick="document.getElementById('scroller').style.left = '0px'">Move it</button>
Μέση
<button onclick="document.getElementById('scroller').style.left = '-100px'">Moveit</button>
Τέλος
<button onclick="document.getElementById('scroller').style.left = '-200px'">Moveit</button>

3 lines / 3 buttons :P 8)
Εικόνα

Άβαταρ μέλους
cpulse
Script Master
Δημοσιεύσεις: 1527
Εγγραφή: 21 Μαρ 2006 19:30
Τοποθεσία: Αθήνα village
Επικοινωνία:

Πανοραμική φωτογραφία

Δημοσίευση από cpulse » 15 Ιουν 2007 03:20

Ζωντανό παράδειγμα από την ιδέα του skeftomylου
http://www.creativepulse.eu/res/demo/ph ... flat_b.php

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Πανοραμική φωτογραφία

Δημοσίευση από skeftomilos » 15 Ιουν 2007 03:34

Nice! :-)
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

Πανοραμική φωτογραφία

Δημοσίευση από Khronos » 15 Ιουν 2007 11:01

Kαλό αλλά πες μας και πως το έκανες:P

MadCat
Δημοσιεύσεις: 18
Εγγραφή: 16 Δεκ 2001 01:00
Επικοινωνία:

Πανοραμική φωτογραφία

Δημοσίευση από MadCat » 15 Ιουν 2007 12:50

Ναι για πες μας...δωσε αναλυτικά τον τρόπο! Δωσε τον κώδικα στον λαο!! :oops: Εκτος αν ειναι μυστικό :P :P

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Πανοραμική φωτογραφία

Δημοσίευση από skeftomilos » 15 Ιουν 2007 13:54

Μάλλον δεν είναι open source. :-)
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης