Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

drk7

[Resolvido] Como fazer banner andar em javascript?

Por , em Javascript

Recommended Posts

klonder    14

klonder
Postado

Poderia ser mais claro?

Você quer um banner que se move pela tela, seguindo a barra de scrooling, ou independente se a barra de scrooling está se movendo ou não?

 

No primeiro caso você precisará de um pouco de CSS.

No segundo caso, basta criar um div, com position:absolute.

Compartilhar este post

Link para o post
Compartilhar em outros sites

RobertoPC    0

RobertoPC
Postado

Assim:

 

<html>
<head>
	<title>...</title>

	<script type="text/javascript">
		
		var lmd = 0;
		var TelaLargura = window.screen.availWidth;
			
		window.onload = function(){

			setInterval("MoveDiv()",100)

		}	
		
		function MoveDiv(){

			lmd = lmd + 10;

			if(lmd > TelaLargura){
		
				lmd = 0;		
	
			}			

			document.getElementById('DivBanner').style.left = lmd;
	
		}

	</script>

</head>
<body>

	<div id="DivBanner" style="position:absolute; left:0; top:100; width:50; height:50; background:red;">
	
		<!-- Banner -->
			
	</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

drk7    0

drk7
Postado

Oi. Seria um banner que seguisse a barra de scroll.

Estou vendo o script do RobertoPC.

 

 

EDIT:

Não seria isso. Queri9a um que seguisse a barra de scroll. Mas tem como fazer por CSS. Como?

Compartilhar este post

Link para o post
Compartilhar em outros sites

drk7    0

drk7
Postado

Consegui assim:

 

#floater {
	/* -moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding; */
	background:transparent  no-repeat scroll right bottom;
	/* background:transparent url(../banner/img1.jpg) no-repeat scroll right bottom; */
	bottom:45%;
	top:45%;
	height:191px;
	position:fixed;
	right:5%;
	width:266px;
}

O problema: só funciona no Firefox.

Conseguem identificar o problema?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

O IE nao reconhece o valor fixed da propriedade position

Compartilhar este post

Link para o post
Compartilhar em outros sites

drk7    0

drk7
Postado

O IE nao reconhece o valor fixed da propriedade position

 

IE é uma porcaria.

 

Como eu poderia fixar a imagem, que funcionasse no IE?

Compartilhar este post

Link para o post
Compartilhar em outros sites

drk7    0

drk7
Postado

Achei esse código, mas não funciona no IE também.

 

#floater {
		  /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
		  position: absolute; right: 20px; bottom: 10px;
		}
		body > div#floater {
		  /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
		  position: fixed;
		}
		</style>
		<!--[if gte IE 5.5]>
		<![if lt IE 7]>
		<style type="text/css">
		div#floater {
		  /* IE5.5+/Win - this is more specific than the IE 5.0 version */
		  right: auto; bottom: auto;
		  left: expression( ( -20 - fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
		  top: expression( ( -10 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
		}
		</style>
		<![endif]>
		<![endif]-->

Compartilhar este post

Link para o post
Compartilhar em outros sites

drk7    0

drk7
Postado

Testei outro, que mostrava um exemplo em funcionamento e teoricamente deveria funcionar, mas nada.

 

Código completo:

<html>

<head>
	<style type="text/css">
			#menu {
			top: 15%;
			left: 50px;
			width: 200px;
			padding: 20px 0px;
			border: 2px solid #CCCCCC;
			position: fixed;
			}
	</style>		
		
	<!--[if IE]>
		<style type="text/css">
			html, body {
			height: 100%;
			overflow: auto;
			}

			#menu {
			position: absolute;
			}
		</style>
	<![endif]-->
	
</head>
		
		
<body>
	<div id="menu" class="menu" >AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br>I<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br>X<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>V<br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>



</html>

Site: http://rogeriolino.wordpress.com/2007/01/23/css-position-fixed-ie/

Em funcionamento: http://www17.brinkster.com/chivalrous/exemplos/position_fixed.html

Compartilhar este post

Link para o post
Compartilhar em outros sites

-=Felipe=-    0

-=Felipe=-
Postado

Veja se esse codigo te ajuda:

 

 

<html>
<head>
<title>SCRIPT</title>

 <!--Começo --->
<script language="JavaScript1.2">
var slideShowSpeed = 6000 // geeft de tijd weer dat het plaatje te zien is (in milliseconden)

var crossFadeDuration = 3 // duur van het faden in seconden

var Pic = new Array() 


// voeg hieronder net zoveel plaatjes toe als je wilt

Pic[0] = 'http://cristiny.on.line.sites.uol.com.br/scripts/foto1.gif'
Pic[1] = 'http://cristiny.on.line.sites.uol.com.br/scripts/foto3.gif'
Pic[2] = 'http://cristiny.on.line.sites.uol.com.br/scripts/foto2.gif'
Pic[3] = 'http://cristiny.on.line.sites.uol.com.br/scripts/foto4.gif'

// =======================================
// Verander hieronder niks meer!
// =======================================

isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;

function ddInit(e){
  topDog=isIE ? "BODY" : "HTML";
  whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");  
  hotDog=isIE ? event.srcElement : e.target;  
  while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog){
    hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
  }  
  if (hotDog.id=="titleBar"){
    offsetx=isIE ? event.clientX : e.clientX;
    offsety=isIE ? event.clientY : e.clientY;
    nowX=parseInt(whichDog.style.left);
    nowY=parseInt(whichDog.style.top);
    ddEnabled=true;
    document.onmousemove=dd;
  }
}

function dd(e){
  if (!ddEnabled) return;
  whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx; 
  whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
  return false;  
}

function ddN4(whatDog){
  if (!isN4) return;
  N4=eval(whatDog);
  N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
  N4.onmousedown=function(e){
    N4.captureEvents(Event.MOUSEMOVE);
    N4x=e.x;
    N4y=e.y;
  }
  N4.onmousemove=function(e){
    if (isHot){
      N4.moveBy(e.x-N4x,e.y-N4y);
      return false;
    }
  }
  N4.onmouseup=function(){
    N4.releaseEvents(Event.MOUSEMOVE);
  }
}

function hideMe(){
  if (isIE||isNN) whichDog.style.visibility="hidden";
  else if (isN4) document.theLayer.visibility="hide";
}

function showMe(){
  if (isIE||isNN) whichDog.style.visibility="visible";
  else if (isN4) document.theLayer.visibility="show";
}

document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");

var t;
var j = 0;
var p = Pic.length;

var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image();
   preLoad[i].src = Pic[i];
}

function runSlideShow(){
   if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)";
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
      document.images.SlideShow.filters.blendTrans.Apply();      
   }
   if (!isN4) document.images.SlideShow.src = preLoad[j].src;
   if (isN4) document.layers['theLayer'].document.images['SlideShow'].src = preLoad[j].src;
   if (document.all){
      document.images.SlideShow.filters.blendTrans.Play();
   }
   j = j + 1;
   if (j > (p-1)) j=0;
   t = setTimeout('runSlideShow()', slideShowSpeed);
}

</script>
<!--Fim --->



</head>

 <!--Começo --->
<body onload="runSlideShow()">
<div id="theLayer" style="position:absolute;left:100;top:110;visibility:hide">

<!-- verander hieronder de border color //-->
<table border="0" bgcolor="#510101" cellspacing="0" cellpadding="0">
<tr>
<td>
<!-- verander hieronder kleur instellingen //-->
<table border="0" bgcolor="#9E1E21" cellspacing="0" cellpadding="2">
<tr>
<td bgcolor="#9E1E21">

  <table border="0" cellspacing="0" cellpadding="0">
  <tr>
  <td id="titleBar" style="cursor:move" align="center">
  <layer onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false"><font face="Tahoma" color="#f4e2be" size="2"><b>
    Script 10 !!!</b></font>
  </layer>
  </ilayer>
  </td>

  <td id="titleBar" style="cursor:move" align="center">
  <a style="text-decoration:none" href="#" onClick="hideMe();return false"><font color=#FFFFFF size=2 face=arial><b>
  X </b></font> </a>
  </td>
  </tr>
  <tr>
  <td bgcolor="#f4e2be" style="padding:0px" colspan="2">
<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td id="VU">
<!-- Zet hier je eigen beginfoto neer en verander hoogte en breedte van het scherm //-->
<img src="foto5.gif" name='SlideShow' width=268 height=176></td>
</tr>
</table>
  </td>
  </tr>
  </table> 
</td>
</tr>
</table>
</td>
</tr>

</table>
</div>
<!--Fim --->
    </tr>
  </table>
  </center>
</div><br>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

drk7    0

drk7
Postado

Interessante o script. Pode servir futuramente.

Mas não seria o que preciso agora. Precisaria que essa div ficasse numa posição fixa, se mantendo automaticamente na mesma posição caso o usuário rolasse a página.

 

Finalmente consegui achar a solução e aqui mesmo (isso que eu tinha procurado).

Mas valeu a todos que tinham tentado ajudar.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito