Áφµล_ • 14.09.11 20:25![[JS] Ótimo Script para manutenção de teu site [JS] Empty](https://2img.net/i/empty.gif)
[JS] Ótimo Script para manutenção de teu site [JS] 14.09.11 20:25
Olá , Sou Áφµล_ e sou programador em JS , PHP , HTML e Phyton , Desenvolvi um script para vocês ;
O mesmo utiliza o mesmo sistema de home do habbo.com.br, ou seja você poderá mover imagens pelo site .
x Como ?
1) Faça o download dos documento/pastas que estão no final do tópico , lá averá uma pasta denominada arquivos1 e uma página denominada index. (devo pedir desculpas , fiz o site para meu amigo Polvs e não tive tempo para mudar.)
2) Agora , Abra o index.htm , será algo parecido com isso :
Está é minha programação , não é perfeita mais não sou perfeito .
3) Editando ->
Editando objetos a serem movidos e seus nomes ->
Dê um ctrl + f e procure por <div id="movimentos"> , Aparti daí aparecerá uma série de <img src> , tampouco é um simples <img src> , a sua class é move ui-draggable , conectado ao arquivo em JS localizado dentro da pasta "arquivos1" ele se transforma em uma imagem que pode se mover por todo o site , para mudar as imagens e seus nomes procure por <img src="nomedoarquivo.png"... e troque o nome da imagem pela foto que quiser ou por um colante habbo .
Mudando o fundo ->
Agora é um pouco mais simples , se a imagem for em PNG substitua a imagem "bg_preto.png" , caso for outro tipo de formato como .gif , .jpg , você deverá mudar o arquivo "estilo.css" onde nele terá o nome "bg_preto.png" , mude o formato e se quiser o nome .
Que mudar outra coisa? ensino pelos comentários . =D
Lembre-se , o que torna um arquivo como algo que possa ser movido pelo site é a seguinte class - "move ui-draggable" .
~ Download :
Arquivos e index.html ~ Clique aqui!
~ Prévia :
www.previajsdoagua.com.nu ~ EM BREVE
Os prints não faria diferença , até porque quero demonstrar os scripts , não o desing . =)
O mesmo utiliza o mesmo sistema de home do habbo.com.br, ou seja você poderá mover imagens pelo site .
x Como ?
1) Faça o download dos documento/pastas que estão no final do tópico , lá averá uma pasta denominada arquivos1 e uma página denominada index. (devo pedir desculpas , fiz o site para meu amigo Polvs e não tive tempo para mudar.)
2) Agora , Abra o index.htm , será algo parecido com isso :
- Spoiler:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0022)http://seu site.com.br/ -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br" dir="ltr"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>seu site ~ Seus pixels são diwos !</title>
<meta name="description" content="A seu site é um fã-site do jogo Flip Hotel. Nosso maior objetivo é interagir com os usuários pela rádio, notícias, fórum e eventos. ">
<meta name="keywords" content="seu site , Flip Hotel , Styleflip , habbo hotel">
<meta name="url" content="seusite.www">
<meta name="author" content="Agua , Agua_">
<meta name="language" content="flip-hotel">
<meta name="generator" content="Agua">
<script type="text/javascript" async="" src="./arquivos1/ga.js"></script><script type="text/javascript" src="./arquivos1/jquery.min.js"></script>
<script type="text/javascript" src="./arquivos1/jquery-latest.js"></script>
<link rel="stylesheet" href="./arquivos1/jquery-ui.css" type="text/css" media="all">
<script type="text/javascript" src="./arquivos1/jquery.min(1).js"></script>
<script type="text/javascript" src="./arquivos1/swfobject.js"></script>
<script src="./arquivos1/jquery-ui.min.js" type="text/javascript"></script>
<script src="./arquivos1/cookie.js" type="text/javascript"></script>
<script src="./arquivos1/jquery.ui.dialog.js" type="text/javascript"></script>
<link href="./arquivos1/estilo.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
<script type="text/javascript">
/*$(function(){
$("#aviN").dialog({
modal: true,
title: "Aviso"
});
}); */
</script>
<link href="./arquivos1/widget.css" rel="stylesheet" type="text/css"><style type="text/css">#twtr-widget-1 .twtr-popular { display: inline-block; }</style><style type="text/css">#twtr-widget-1 .twtr-avatar { display: block; } #twtr-widget-1 .twtr-user { display: inline; } #twtr-widget-1 .twtr-tweet-text { margin-left: 40px; }</style><style type="text/css">#twtr-widget-1 em { display: block; }</style><style type="text/css">#twtr-widget-1 .twtr-doc, #twtr-widget-1 .twtr-hd a, #twtr-widget-1 h3, #twtr-widget-1 h4, #twtr-widget-1 .twtr-popular { background-color: rgba(255, 255, 255, 0.1);box-shadow:1px 1px 0px rgba(100, 100, 100, 0.5) !important; color: #ffffff !important; } #twtr-widget-1 .twtr-popular { color: #fff;text-shadow:-1px -1px 0px rgba(100, 100, 100, 0.6) !important; background-color: rgba(NaN,10,37, .3) !important; } #twtr-widget-1 .twtr-tweet a { color: #FFB007;text-shadow:0px 0px 0px #fff !important; } #twtr-widget-1 .twtr-bd, #twtr-widget-1 .twtr-timeline i a, #twtr-widget-1 .twtr-bd p { color: #fff;text-shadow:-1px -1px 0px rgba(100, 100, 100, 0.6) !important; } #twtr-widget-1 .twtr-new-results, #twtr-widget-1 .twtr-results-inner, #twtr-widget-1 .twtr-timeline { background: rgba(100, 100, 100, 0.4) !important; }</style></head>
<body style="cursor: auto; "> </a>
</h1>
<br>
<div id="movimentos">
<img id="1" src="./arquivos1/d.png" border="0" class="move ui-draggable" style="z-index: 1; left: 0px; top: -90px; ">
<img id="2" src="./arquivos1/e.png" border="0" class="move ui-draggable" style="z-index: 2; left: 7px; top: -86px; ">
<img id="3" src="./arquivos1/a.png" border="0" class="move ui-draggable" style="z-index: 3; left: 48px; top: -7px; ">
<img id="4" src="./arquivos1/r.png" border="0" class="move ui-draggable" style="left: 50px; top: -9px; z-index: 5; ">
<img id="5" src="./arquivos1/p.png" border="0" class="move ui-draggable" style="left: 57px; top: -12px; z-index: 7; ">
<img id="6" src="./arquivos1/bola.png" border="0" class="move ui-draggable" style="left: 57px; top: -12px; z-index: 9; ">
<img id="7" src="./arquivos1/l.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8"
src="./arquivos1/v.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8" src="./arquivos1/colante8.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="10" src="./arquivos1/colante1.png" border="0" class="move ui-draggable" style="top:-15px;left:50px;z-index:7">
<img id="8" src="./arquivos1/s.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8" src="./arquivos1/colante4.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8" src="./arquivos1/colante2.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8" src="./arquivos1/colante3.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8" src="./arquivos1/colante5.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8" src="./arquivos1/colante6.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8" src="./arquivos1/logo.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; "><img id="8" src="./arquivos1/colante7.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8" src="./arquivos1/colante8.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8" src="./arquivos1/colante9.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8" src="./arquivos1/colante6.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8" src="./arquivos1/colante7.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8" src="./arquivos1/colante6.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8" src="./arquivos1/colante7.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8" src="./arquivos1/colante6.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8" src="./arquivos1/colante7.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8" src="./arquivos1/colante6.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8" src="./arquivos1/colante7.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8" src="./arquivos1/colante6.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8" src="./arquivos1/colante7.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
<img id="8" src="./arquivos1/colante6.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; "> <img id="8" src="./arquivos1/colante11.png" border="0" class="move ui-draggable" style="left: 63px; top: -10px; z-index: 11; ">
</div>
<br>
<br>
<div class="move ui-draggable" id="twtr-widget-1"><div class="twtr-doc" style="width: 100%;"> <div class="twtr-hd"><h3>Primeiro concurso do seu site , Faça sua home , a melhor estará levando o primeiro prêmio da #seu sitev1</h3><h4>Para enviar sua home , tira o print e mande para polvshabbo@hotmail.com , no campo em branco digite seu nick !</h4> </div> </div> </div> </div> </div></div>
</div>
<a href="http://www.twitter.com/seu site_" target="_blank" style="position:fixed;left:0;top:0;margin:5px"><img src="./arquivos1/twitter.png" width="48" height="48" border="0"></a>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-25631118-1']);
_gaq.push(['_setDomainName', '.seu site.com.br']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<div id="container"><embed type="application/x-shockwave-flash" src="player.swf" width="0" height="0" style="undefined" id="ply" name="ply" bgcolor="#FFFFFF" quality="high" allowfullscreen="true" allowscriptaccess="always" flashvars="file=http://69.162.90.148:8187/;stream.nsv&type=mp3&volume=90&autostart=true"></div>
<script type="text/javascript">
function player(v){
var s1 = new SWFObject("player.swf","ply","0","0","9","#FFFFFF");
s1.addParam("allowfullscreen","true");
s1.addParam("allowscriptaccess","always");
s1.addParam("flashvars","file=http://69.162.90.148:8187/;stream.nsv&type=mp3&volume="+v+"&autostart=true");
s1.write("container");
};
var player_ = {iniciar: function(){player_.play();},stop: function(){player(0);},play: function(){player(90);}}
var movimentos ={zindex:1,iniciar:function(){movimentos.drag();},drag:function(){$('.move').draggable({containment: '#movimentos',start: function(event, ui){$(this).css('z-index', movimentos.zindex++);},stop: function(event, ui){var top = $(this).css('top');var left = $(this).css('left');var index = $(this).css('z-index');var id= $(this).attr('id');var img= $(this).attr('src');var array_itens = [top, left, index, img];$.cookie("item-"+id+"", array_itens, { expires: 30 });}});$('.move').click(function(){$(this).css('z-index', movimentos.zindex++);});}}
$(document).ready(function(){movimentos.iniciar();player_.iniciar();$('#logo').hover(function (){$('#logo').animate({ opacity:1}, 800);}, function(){$('#logo').animate({ opacity:0.7}, 700);});});
$(".atu").click(function(){ var tipo = $(this).attr('rel');$(this).html('...').fadeOut().load('player.php?tipo='+tipo).fadeIn(700);});
</script>
<div id="aviN" style="display:none">Desenho , Codificação e programação por Agua.<br><br>Obrigado</div>
</body></html>
Está é minha programação , não é perfeita mais não sou perfeito .
3) Editando ->
Editando objetos a serem movidos e seus nomes ->
Dê um ctrl + f e procure por <div id="movimentos"> , Aparti daí aparecerá uma série de <img src> , tampouco é um simples <img src> , a sua class é move ui-draggable , conectado ao arquivo em JS localizado dentro da pasta "arquivos1" ele se transforma em uma imagem que pode se mover por todo o site , para mudar as imagens e seus nomes procure por <img src="nomedoarquivo.png"... e troque o nome da imagem pela foto que quiser ou por um colante habbo .
Mudando o fundo ->
Agora é um pouco mais simples , se a imagem for em PNG substitua a imagem "bg_preto.png" , caso for outro tipo de formato como .gif , .jpg , você deverá mudar o arquivo "estilo.css" onde nele terá o nome "bg_preto.png" , mude o formato e se quiser o nome .
Que mudar outra coisa? ensino pelos comentários . =D
Lembre-se , o que torna um arquivo como algo que possa ser movido pelo site é a seguinte class - "move ui-draggable" .
~ Download :
Arquivos e index.html ~ Clique aqui!
~ Prévia :
www.previajsdoagua.com.nu ~ EM BREVE
Os prints não faria diferença , até porque quero demonstrar os scripts , não o desing . =)
Última edição por Áφµล_ em 14.09.11 22:41, editado 1 vez(es)
Wirisson • 14.09.11 20:33
Brenin • 14.09.11 20:38
Hades • 14.09.11 20:39
