Passagem automática de imagens com efeito Opacity
Publicado por Ruhan Bidart 12/06/2008
[ Hits: 11.279 ]
Este script faz a mudança automática de imagens (como em http://www.uol.com.br) ou qualquer outra tag HTML inserida que seja filha do div passado como parâmetro para o construtor.
MudaDestaque('id_do_elemento_pai_de_todos', {'timeout': em_milissegundos, 'efeito': 1, 'auto-iniciar': true}
Obs.: As imagens serão carregadas dinamicamente pelo script. Para modificar a imagem de "aguarde", procure a propriedade img_tmp.
/*<![CDATA[*/ //****************************************************************************** // @name: util.destaque.mudar.js // @purpose: script utilizado para fazer a mudanca de destaque do site. // // // @author: Ruhan Bidart - ruhan[NOSPAM]gmail[DOT]com // @created: 13/02/2008 // @example: new MudaDestaque('id_do_meu_elemento', {'timeout' : 5000, // 'efeito': 1, 'auto-iniciar' : true}) // @obs.: 1) use apenas 1 por página // 2) imagens inseridas no div em questao nao devem conter o // atributo src, o mesmo deve ser inserido em outro, chamado // imagem. //****************************************************************************** var MudaDestaque = function(e_pai, propriedades) { MudaDestaque.instance = this; MudaDestaque._imagem_atual = null; // apanhando o pai dos elementos if(typeof e_pai == 'string') this._pai = document.getElementById(e_pai); else this._pai = e_pai; // ** imagem que sera mostrada no carregamento das imagens // (coloque a mesma imagem no html display: none;) this.img_tmp = 'http://www.blanco.de/inter/blanco/images/wait.gif' this._timeout = propriedades['timeout']; this._efeito = propriedades['efeito']; this.length = this._pai.childNodes.length; // quantidade de objetos this.atual = -1; // objeto atual // objeto de timeout this._o_timeout = null; this._o_efeito_timeout = null; // corrige bugs iniciais dos navegadores this._fix(); this._extend_methods(); if(propriedades['auto-iniciar']) { this.iniciar(); } MudaDestaque.instance = this; } MudaDestaque.imagens = {}; // funcao de inicializacao MudaDestaque.prototype.iniciar = function() { MudaDestaque._temporizar(); } // muda o destaque MudaDestaque.prototype.mudar = function(index) { this._esconder_todos(); this._pai.childNodes[index].mostrar(); } MudaDestaque.prototype._esconder_todos = function() { for(var i=0; i<this.length; i++) { this._pai.childNodes[i].style.display = 'none'; } } // para a mudanca automatica MudaDestaque.prototype.parar = function() { if(this._o_timeout) clearTimeout(this._o_timeout); else return; this._o_timeout = null; } // extende aos objetos filhos os metodos get/set opacity MudaDestaque.prototype._extend_methods = function() { for(var i=0; i<this.length; i++) { with(this._pai) { childNodes[i]['setOpacity'] = MudaDestaque._set_opacity; childNodes[i]['getOpacity'] = MudaDestaque._get_opacity; childNodes[i]['mostrar'] = MudaDestaque.mostrar; childNodes[i]['carregarImagens'] = MudaDestaque.carregar_imagens; childNodes[i]['efeito'] = MudaDestaque.efeito; } } } MudaDestaque.prototype._fix = function() { // IE if(document.all) return; // FF var el = document.createElement('span'); // corrige bug relacionado ?riacao de TextNode's pelo FF for(var i=0; i<this.length; i++) { if(this._pai.childNodes[i] && this._pai.childNodes[i].tagName) el.appendChild(this._pai.childNodes[i]); } this._pai.innerHTML = el.innerHTML; this.length = this._pai.childNodes.length; } // vai para o item anterior MudaDestaque.anterior = function() { var instance = MudaDestaque.instance; var index = null; if(instance.atual == 0) { index = instance.length-1; instance.atual = instance.length-1; } else index = --instance.atual; instance.parar(); instance.mudar(index); } // vai para o proximo item MudaDestaque.proximo = function() { var instance = MudaDestaque.instance; var index = null; if(instance.atual == instance.length-1) { index = 0; instance.atual = 0; } else index = ++instance.atual; instance.parar(); instance.mudar(index); } // funcao recursiva para fazer o timeout MudaDestaque._temporizar = function() { var instance = MudaDestaque.instance; var index = null; if(instance.atual == instance.length-1) { index = 0; instance.atual = 0; } else index = ++instance.atual; instance.mudar(index); instance._o_timeout = setTimeout('MudaDestaque._temporizar()', instance._timeout); } // retorna a opacidade do elemento MudaDestaque._get_opacity = function() { var opacity; if (opacity = this.style.opacity) return parseFloat(opacity); if ( opacity = (this.style.filter || '').match(/alpha\(opacity=(.*)\)/) ) if (opacity[1]) return parseFloat(opacity[1]) / 100; return 1.0; } // seta a opacidade do elemento MudaDestaque._set_opacity = function(value) { if (value == 1) { this.style.opacity = (/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML/.test(navigator.userAgent) ? 0.999999 : null); if (/MSIE/.test(navigator.userAgent)) this.style.filter = this.style.filter.replace(/alpha\([^\)]*\)/gi,''); } else { if (value < 0.00001) value = 0; this.style.opacity = value; if (/MSIE/.test(navigator.userAgent)) this.style.filter = this.style.filter.replace(/alpha\([^\)]*\)/gi,'') + 'alpha(opacity='+value*100+')'; } } // mostra o objeto MudaDestaque.mostrar = function() { this.carregarImagens(); this.style.display = 'block'; if(MudaDestaque.instance._efeito) { this.setOpacity(0); this.efeito(this, true); } } // efeito com opacidade MudaDestaque.efeito = function(aparecer) { MudaDestaque.o_para_efeito = this; // ao aparecer if(aparecer) { op = this.getOpacity(); op += document.all ? 0.1 : 0.04; this.setOpacity(op); // verificando se ira continuar com o efeito if(op >= 1) clearTimeout(MudaDestaque.instance._o_efeito_timeout); else MudaDestaque.instance._o_efeito_timeout = setTimeout('MudaDestaque.o_para_efeito.efeito(true)', MudaDestaque.instance._efeito); // ao desaparecer } else { op = this.getOpacity(); op -= 0.1; this.setOpacity(op); // verificando se ira continuar com o efeito if(op <= 0) clearTimeout(MudaDestaque.instance._o_efeito_timeout); else MudaDestaque.instance._o_efeito_timeout = setTimeout('MudaDestaque.o_para_efeito.efeito(false)', MudaDestaque.instance._efeito); } } // carrega as imagens de um objeto destaque MudaDestaque.carregar_imagens = function() { // apanhando os elementos var instance = MudaDestaque.instance; var l_e_img = this.getElementsByTagName('img'); var l_o_img = []; MudaDestaque.imagens[instance.atual] = []; // variando nas imagens for(var i=0; i<l_e_img.length; i++) { var new_img = new Image(); var img = l_e_img[i]; // caso nao seja uma imagem a ser carregada if(!img.getAttribute('imagem')) continue; // executa o codigo apenas se imagem nao estiver carregada if(!img.getAttribute('carregada')) { img.src = MudaDestaque.instance.img_tmp; MudaDestaque.imagens[instance.atual].push(img); // para o amado Firefox, que segue os padroes W3C corretamente =) if(!document.all) new_img.onload = MudaDestaque.mostrar_imagem; // carregando a imagem em outro objeto new_img.src = img.getAttribute('imagem'); new_img.setAttribute('index', instance.atual); new_img.setAttribute('ordem', i); // devido ao IE 6 nao tratar o onload corretamente if(document.all) { new_img.simulate_onload = MudaDestaque.simulate_onload; new_img.simulate_onload(); } new_img.onload = MudaDestaque.mostrar_imagem; // armazenando nas imagens de load l_o_img.push(new_img); } } } // callback da funcao onload da imagem, para trocar seu src MudaDestaque.mostrar_imagem = function(sender){ if(!sender || sender.initEvent) sender = this; var index = parseInt(sender.getAttribute('index')); var ordem = parseInt(sender.getAttribute('ordem')); // atributos da imagem 'original' var img = MudaDestaque.imagens[index][ordem]; img.src = sender.src; img.setAttribute('carregada', 'carregada'); } // simula o onload para o IE 7, onde o onload nao e tratado corretamente MudaDestaque.simulate_onload = function() { MudaDestaque._imagem_atual = this; if(this.complete) { MudaDestaque.mostrar_imagem(this) } else { setTimeout("MudaDestaque._imagem_atual.simulate_onload()", 250); } } /*]]>*/
Notícias do site Ultimo Segundo
Nenhum comentário foi encontrado.
Melhorando o tempo de boot do Fedora e outras distribuições
Como instalar as extensões Dash To Dock e Hide Top Bar no Gnome 45/46
E a guerra contra bots continua
Tradução do artigo do filósofo Gottfried Wilhelm Leibniz sobre o sistema binário
Conheça o firewall OpenGFW, uma implementação do (Great Firewall of China).
Instalando o FreeOffice no LMDE 6
Anki: Remover Tags de Estilo HTML de Todas as Cartas
Colocando uma opção de redimensionamento de imagem no menu de contexto do KDE
Gentoo bane contribuições de código feitas com IA (6)
Aprender redes pela IA do roadmap.sh (0)
[Shell Script] Script para desinstalar pacotes desnecessários no OpenSuse
[Shell Script] Script para criar certificados de forma automatizada no OpenVpn
[Shell Script] Conversor de vídeo com opção de legenda
[C/C++] BRT - Bulk Renaming Tool
[Shell Script] Criação de Usuarios , Grupo e instalação do servidor de arquivos samba