Foros del Web » Programando para Internet » Javascript »

girando fotos alrededor del mundo

Estas en el tema de girando fotos alrededor del mundo en el foro de Javascript en Foros del Web. Buenas, soy muy novado con javascript. Tengo una foto que es un mundo, como hago para que otras (15) fotos giren alrededor del mundo. Me ...
  #1 (permalink)  
Antiguo 13/07/2010, 16:25
 
Fecha de Ingreso: mayo-2008
Mensajes: 353
Antigüedad: 16 años, 6 meses
Puntos: 3
Pregunta girando fotos alrededor del mundo

Buenas, soy muy novado con javascript.
Tengo una foto que es un mundo, como hago para que otras (15) fotos giren alrededor del mundo.
Me explico mejor. La fotos(15) entran por la derecha o izquierda y salgan por el otro lado pero que cuando pasen por detras del mundo no se vean la fotos que están pasando.
Por favor si hay alguna pagina con trucos, agradezco
Gracias
  #2 (permalink)  
Antiguo 14/07/2010, 14:41
 
Fecha de Ingreso: mayo-2008
Mensajes: 353
Antigüedad: 16 años, 6 meses
Puntos: 3
De acuerdo girando fotos alrededor del mundo

Bueno, aqui esta la solucion

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Página sin título</title>
<script language="javascript" type="text/javascript">
/************************************************** ******
Create a div with transparent place holder in your html
<div id="Carousel" style="position:relative">
<img src="placeholder.gif" width="404" height="202">
</div>
placeholder width:
4 sided: 1.42 * carousel image width + 3
6 sided: 2 * carousel image width +4
8 sided: 2.62 * carousel image width + 5
12 sided: 3.87 * carousel image width + 7
placeholder height:
carousel image height+2

Insert onload in body tag
<body onload="Carousel()">
************************************************** *******/

// 7 variables to control behavior
var Car_Image_Width=103;
var Car_Image_Height=48;
var Car_Border=true; // true or false
var Car_Border_Color="white";
var Car_Speed=6;
var Car_Direction=false; // true or false
var Car_NoOfSides=12; // must be 4, 6, 8 or 12

/* array to specify images and optional links.
For 4 sided carousel specify at least 2 images
For 6 sided carousel specify at least 3
For 8 sided carousel specify at least 4
For 12 sided carousel specify at least 6
If Link is not needed keep it ""
*/
Car_Image_Sources=new Array(
"fotos/acura.gif","",
"fotos/alfa-romeo.gif","",
"fotos/bmw.gif","",
"fotos/buick.gif","",
"fotos/byd.gif","",
"fotos/chevrolet.gif","", //this slide isn't linked
"fotos/corvette.gif","",
"fotos/daewoo.gif","",
"fotos/dodge.gif","",
"fotos/ferrari.gif","",
"fotos/ford.gif","",
"fotos/jeep.gif","",
"fotos/pontiac.gif","",
"fotos/suzuki.gif","",
"fotos/mercedes.gif","",
"fotos/chrysler.gif","",
"fotos/mazda.gif","",
"fotos/toyota.gif","" // NOTE No comma after last line
);

/***************** DO NOT EDIT BELOW **********************************/
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car _NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSide s/2;

function Carousel(){
if(document.getElementById){
for(i=0;i<Car_Image_Sources.length;i+=2){
C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
Car_Div=document.getElementById("Carousel");
for(i=0;i<C_HalfNo;i++){
CW_I[i]=document.createElement("img");Car_Div.appendChild (CW_I[i]);
CW_I[i].style.position="absolute";
CW_I[i].style.top=0+"px";
CW_I[i].style.height=Car_Image_Height+"px";
if(Car_Border){
CW_I[i].style.borderStyle="solid";
CW_I[i].style.borderWidth=1+"px";
CW_I[i].style.borderColor=Car_Border_Color}
CW_I[i].src=Car_Image_Sources[2*i];
CW_I[i].lnk=Car_Image_Sources[2*i+1];
CW_I[i].onclick=C_LdLnk;
CW_I[i].onmouseover=C_Stp;
CW_I[i].onmouseout=C_Rstrt}
CarImages()}}

function CarImages(){
if(!C_Stppd){
C_TotalW=0;
for(i=0;i<C_HalfNo;i++){
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
C_TotalW+=C_ClcW[i]}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I[i].style.left=C_LeftOffset+"px";
CW_I[i].style.width=C_ClcW[i]+"px";
C_LeftOffset+=C_ClcW[i]}
C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C _Angle>=Math.PI/C_HalfNo)){
if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
if(Car_Direction){
CW_I[C_HalfNo]=CW_I[0];
for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
CW_I[0]=CW_I[C_HalfNo];
CW_I[0].src=Car_Image_Sources[C_CrImg];
CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
setTimeout("CarImages()",40)}

function C_LdLnk(){if(this.lnk)window.location.href=this.ln k}
function C_Stp(){this.style.cursor=this.lnk?"pointer":"defa ult";C_Stppd=true;}
function C_Rstrt(){C_Stppd=false}
</script>
</head>
<body onload="Carousel()">
<form id="form1" runat="server">
<div center>
<div center id="grande" style="z-index: 101; left: 139px; width: 620px;
top: 7px; height: 65px; vertical-align: middle; text-align: justify; position: relative;">
&nbsp;

<asp:Image ID="Image1" runat="server" Height="343px" ImageUrl="~/image/mundotransparente.gif"
Width="382px" />

<div id="Carousel" style="z-index: 101; left: 0px; width: 419px;
top: -220px; height: 65px; vertical-align: middle; text-align: justify; position: relative;">

</div>
</div>
</DIV>
<asp:DropDownList ID="DropDownList1" runat="server" Width="110px">
</asp:DropDownList>
</form>
</body>
</html>
  #3 (permalink)  
Antiguo 02/08/2012, 21:32
 
Fecha de Ingreso: junio-2005
Ubicación: mexcio
Mensajes: 12
Antigüedad: 19 años, 6 meses
Puntos: 1
Respuesta: girando fotos alrededor del mundo

amigo busco algo casi parecido,
yo busco que giren las imagenes al rededor de mi logo me podria servir tu ejemplo....

Etiquetas: fotos, mundo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:43.