primeiro vou postar as images para aumetar e diminuir a fonte que eu fiz em dois formatos, GIF e JPEG(jpg) depois vou ver se a muita diferença entre a elas e se a imagem JPEG demora muito tempo a mais que a GIF para carregar e depois colocarei nessa div que fica zanzando no Explorer e fixa no canto da janela no Mozilla Firefox (pra quem usa versões atualizadas), já que não testei em outras versões.
Existe um javascript que faz efeito de flutuação, clique aqui e que funciona nos principais navegadores, melhor que o javascript abaixo
Problema em usar imagens postadas no blogspot
http://4.bp.blogspot.com/_NrcfzTud13U/SABAm2uSSNI/AAAAAAAAABg/dzihZckolp4/s200/fonte-menos.GIF
http://2.bp.blogspot.com/_NrcfzTud13U/SABAbWuSSMI/AAAAAAAAABY/GK0TlOOEVQg/s200/fonte-menor.JPG
http://2.bp.blogspot.com/_NrcfzTud13U/SABAPWuSSLI/AAAAAAAAABQ/jXR08j0s850/s200/fonte-mais.GIF
http://3.bp.blogspot.com/_NrcfzTud13U/SABADmuSSKI/AAAAAAAAABI/Z-LR6q1KsXU/s200/fonte-maior.JPG"
Uma vez usei um código CSS para tornar as imagens totalmente transparentes -moz-opacity:0.00; e se fosse assim -moz-opacity:0.50; seria menos intensa mas transparente. Deixei ela transparente por que esse Script não funciona com Mozilla.
Vou começar mandando o css que coloquei entre <head> </head> mas poderia ser em arquivo externo.
<style type='text/css'>
div.floater {position:absolute;
top:350px;
bottom:-100px;
right:00px;
display:block;color:#333; -moz-opacity:0.00; }
div.floater img {border: 0px;
padding: 0px !important;
margin: 0px !important;
}</style>Agora a DIV com as imagens e seus atributos; a 1º subir ao topo(não precisa usar a barra de rolagem nem ficar rolando o mouse)
a 2º aumenta a fonte e a 3º diminui a fonte, claro que tem que ter o Script pra isso ou não tera função(ação).
<div class='floater' id='floater'> <a href='#header'> <img alt='Subir ao topo' src='http://3.bp.blogspot.com/_NrcfzTud13U/R_nZC8mUR7I/AAAAAAAAABA/emL7FGn8soc/s200/top.GIF'/> </a>
</div>Esse JavaScript que vem agora não tem nada a ver com o link de cima que é apenas uma ligação para o Script que usei para aumentar a fonte
Agora o Script
<script language="javascript"> <!--
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = -220;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
function heartBeat() {
if(IE) { diffY = document.body.scrollTop; diffX =
document.body.scrollLeft; }
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelTop +=
percent;
if(NS) document.floater.Top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = 0 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelLeft -= percent;
if(NS) document.floater.left -= percent;
lastScrollX = lastScrollX + percent;
}
}
if(NS IE) action = window.setInterval("heartBeat()",1);//-->
</script>
Olá!
ResponderExcluirMontei de acordo com o que foi falado aqui e a flecinha, fica no meio da página girando com a mesma... não ficou fixa como a que está no seu sie. Poderia dar uma ajuda ?
ICONEX
ResponderExcluirInfelizmente esse script não funciona no mozilla e talvez com a versão de html do blogger.
Vou pensar numa forma de facilitar isso e te aviso, pois você já é a segunda pessoa que me pede, talvez vou demorar alguns dias, estou com um contratempo.