FERRAMENTA HTML BLOG *: Mostrar / Ocultar,slideshow Browser Effects no bloco de conteúdo.

hF

1

quinta-feira, 8 de novembro de 2012

Mostrar / Ocultar,slideshow Browser Effects no bloco de conteúdo.

<div id="object1" style="position:absolute; visibility:show; left:150px;  z-index:2">                      
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigMU6cuUoo-y75IB2NmP4BeNVmKtt-0YVFFUkicGp9lFHXkH6ad9KHx4gfB0T7-PZFALnpKBYq7T_Qp8KCjfrrUOMf8bGOhaz6Wy7ewxcvkN4eD8itO4svhd7WJ4DCr1IDo0a8ickNgCQ/s1600/imagem.gi"width="140" height="50"title="CLIQUE PRA ABRI E FECHAR O BLOCO DE slideshow  Browser Effects   "  onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" /><br />
</div><div><div class="spoiler" style="display: none;">
<div id="object11" style="position:absolute; visibility:show; left:-10px; top:-10px; z-index:2">

<div class="divspoiler"><div id="object1" style="position:absolute; visibility:show; left:300px; top:20px; z-index:2">

<table width="800" height="0" bgcolor="#00F5FF" border="10" cellspacing="0" cellpadding="0"><tr> <td><center><br />
<br /><table border><tr> <td>
                   
 ALEX

<style type="text/css">
#main { padding: 10px }
#choices { cursor: pointer }
td { text-align: left }
li { list-style: none }
h1#effect { text-align: center; padding-bottom: 15px }
#slideshow { padding: 0; width: 602px; height: 402px; }
#slideshow img { padding: 0; width: 500px; height: 400px; border: 1px solid #ccc }
#show { height: 510px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$('<img />')[0].src = 'http://cloud.github.com/downloads/malsup/cycle/beach3.jpg';
$('<img />')[0].src = 'http://images.orkut.com/orkut/photos/PQAAAFosoVwzTrAasY7aA9GTa62n2u8Gb30u9R6z9isKPk7ooaNNSjYWXu3CnMWNlyGT1-ascIlQOrT25wbNnODTrRsAm1T1UNub1qmWL_hv83Yg9ezu7w9VhfIi.jpg';
$('<img />')[0].src = 'http://images.orkut.com/orkut/photos/PQAAAD1CuK4sX8Pzmg-xFn9c7CvJtIU_P3QRTjwvAuuOXKerDj-bPt9FDNNJqvF9hRvK-BFB0SNNTLMCCuLbaApJtwgAm1T1UB3YEiMJFmln1BBNcbTVv3YqHuTU.jpg';
$('<img />')[0].src = 'images/beach4.jpg';
$('<img />')[0].src = 'images/beach5.jpg';
$('<img />')[0].src = 'images/beach6.jpg';
$('<img />')[0].src = 'images/beach7.jpg';
$('<img />')[0].src = 'images/beach8.jpg';
$('<img />')[0].src = 'images/beach9.jpg';
$(function() {
 var fx, cbox = $('input:checkbox').click(start)[0];
 $('#choices li').click(function() {
  fx = $.trim($(this).text());
  start();
 });
 
 var markup = '<div id="slideshow">'
  + '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizBLzKfzL293P-5-5HBapWsqVlplupCNtYUXPJ0upvC-q8cSB5y8Ueg3CBEm70_2ncXsfTWo2WVhCY_PrL6afFK0ctv-Ozks23fufCmnj3vKDSPCCotjtrup2g21IkYvPACSmMEruLMXpP/"><img src="http://www.powerslamcollectibles.com/sitebuilder/images/db_1-355x320-381x343.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5YttBYWzN-B1plhXWljcVfAt4VYYy3uo4W4d4Lsflmzz_LkKYQDLeGAfdVi2CDTh20_59GxIcnhgNqOFaUco2dr4Qn4gkw5Wf3Cef3_1r7j-qxJ2WR0htMibew1YbFbp1Dh_kmEsJj7MD/s1600/3jameswest.jpg">'
  + '<img src="http://www.tvsinopse.kinghost.net/s/spectreman2_arquivos/tvsinopse31007.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnqS9ZlaFuSlpdeCwtjbbT2HO5FqiBKPW6wDX0a1lz4zFT__4_-M1jKhcfbYOEK0-DeewY2QT7noZDgdsfyVl-loWH6KXSOdDjSLekYicEp-qfVbLswSL4eMD0tHLx8nKoqv3ZIyp3Flj2/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpC2a4so0MaveOu_gPZw-4eAHZVe3QfHyc9Uoj0INBKKJ6AEYJPgvy2tCS3cIdMiBZolCFDeia57Iyxn6-zRrtY0JQ1CHCg6jlwTf_zXcUWc0PQRweMbVQTzpWkE1YINWE8Fcz0A-jApw/s1600/Nihon_sekai_ultraman_seeyou.jpg">'
  + '<img src="http://alessandrovergueiro.net/ultraman13/wallpapers/Ultraman_02.jpg"><img src="http://ilhotarockfestival.files.wordpress.com/2010/08/chips.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_aog4BoyvvoQ0qHY2WuQ_ViwV5OnLFWKG8PjVPI1AIqVkZiOLdFiCOlCdK5gE6nJedHDOMe-c2VMxMqCTdsPJxHm4AgfkdCBiaVakveHDgGjLMQU7pYV6BAVt4T8oTsGDqVSyQpFRg5VF/s400/Daniel+Boone.bmp">'
  + ''
  + '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqOa16VpcLOQdzr5WvRHJ4CdUBWnsD8BSIkP_SyzjF0VigSuI19rwhWJ3EBjJJzRE8vzqkXHR1R78xTzyDi4VDLoNEhMmp4oh9CLPocYpMlR_0yrZNeRKlVi0xdNktUkI0ya9PUZ4Fyttx/s1600/0003.jpg"><img src="http://www.powerslamcollectibles.com/sitebuilder/images/db_1-355x320-381x343.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5YttBYWzN-B1plhXWljcVfAt4VYYy3uo4W4d4Lsflmzz_LkKYQDLeGAfdVi2CDTh20_59GxIcnhgNqOFaUco2dr4Qn4gkw5Wf3Cef3_1r7j-qxJ2WR0htMibew1YbFbp1Dh_kmEsJj7MD/s1600/3jameswest.jpg">'
  + '<img src="http://www.tvsinopse.kinghost.net/s/spectreman2_arquivos/tvsinopse31007.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnqS9ZlaFuSlpdeCwtjbbT2HO5FqiBKPW6wDX0a1lz4zFT__4_-M1jKhcfbYOEK0-DeewY2QT7noZDgdsfyVl-loWH6KXSOdDjSLekYicEp-qfVbLswSL4eMD0tHLx8nKoqv3ZIyp3Flj2/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpC2a4so0MaveOu_gPZw-4eAHZVe3QfHyc9Uoj0INBKKJ6AEYJPgvy2tCS3cIdMiBZolCFDeia57Iyxn6-zRrtY0JQ1CHCg6jlwTf_zXcUWc0PQRweMbVQTzpWkE1YINWE8Fcz0A-jApw/s1600/Nihon_sekai_ultraman_seeyou.jpg">'
  + '<img src="http://alessandrovergueiro.net/ultraman13/wallpapers/Ultraman_02.jpg"><img src="http://www.ultraman.com.br/wallpaper/ultraman_H_1024x768.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_aog4BoyvvoQ0qHY2WuQ_ViwV5OnLFWKG8PjVPI1AIqVkZiOLdFiCOlCdK5gE6nJedHDOMe-c2VMxMqCTdsPJxHm4AgfkdCBiaVakveHDgGjLMQU7pYV6BAVt4T8oTsGDqVSyQpFRg5VF/s400/Daniel+Boone.bmp">'
  + '</div>';
  
 function start() {
  $('#slideshow').cycle('stop').remove();
        $('#show').append(markup);
  $('#effect').html(fx);
  $('#slideshow').cycle({
   fx: fx,
   timeout: 2000,
   delay:  -1000,
   after: onAfter,
   sync: !!cbox.checked
  });
 }

function onAfter(curr,next,opts) {
  var msg = 'Slide ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
  $('#caption').html(msg);
 };
});
</script>

<div><a id="logo" href="http://jquery.com" title="Powered By jQuery"></a></div>
<h1 id="banner"><a id="backnav" href="./">‹‹ </a>Plugin jQuery Cycle - Browser Effects</h1>
<div id="main">
 <table><tr><td>
<ul id="choices">
<li>blindX</li>
<li>blindY</li>

<li>blindZ</li>
<li>cover</li>
<li>curtainX</li>
<li>curtainY</li>
<li>fade</li>
<li>fadeZoom</li>

<li>growX</li>
<li>growY</li>
<li>none</li>
<li>scrollUp</li>
<li>scrollDown</li>
<li>scrollLeft</li>

<li>scrollRight</li>
<li>scrollHorz</li>
<li>scrollVert</li>
<li>shuffle</li>
<li>slideX</li>
<li>slideY</li>

<li>toss</li>
<li>turnUp</li>
<li>turnDown</li>
<li>turnLeft</li>
<li>turnRight</li>
<li>uncover</li>

<li>wipe</li>
<li>zoom</li>
</ul>

---------------
Alternar a opção de sincronização para ver como se comportam alguns efeitos<br />diferente (como cego, cortina e zoom).<br />
  <input type="checkbox" checked="checked" /> sync: true
 </td><td>
  <h1 id="effect">Clique em um nome do efeito à esquerda</h1>

<div id="show"></div>
  <div id="caption" style="text-align:center"></div>
 </td></tr></table>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-850242-2";
urchinTracker();
</script>

</div></td></tr></table></center></td></tr></table></div><br /></div></div></div></div>

<div id="object11" style="position:absolute; visibility:show; left:-10px; top:-10px; z-index:2"></div></div></div>

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)

-------------------------------------------------------------------------------------

Voltar no cabeçalho do site

--------------------------------------------------------------------