JavaScript Raccolta javascript [In aggiornamento 24h/24h]

Error.System · 16 Aprile 2011

Eccomi qui a presentarvi la mia prima raccolta di javascript (la mia passione) Sempre in Aggiornamento 24h/24h :shock:

1_Sfondo in movimento:
Descrizione: Questo script agisce sullo sfondo di una pagina così da creare l'illusione dello scorrimento.
Demo :

Perfavore, Entra oppure Registrati per vedere i Link!

Passo 1: Copiate il codice qui di seguito riportato e incollatelo nella vostra pagina all'interno dei tag <body> e </body>:

<script language="JavaScript" type="text/javascript">
<!-- Start
// please keep these lines on when you copy the source
// made by: Nicolas -

Perfavore, Entra oppure Registrati per vedere i Link!

2_Cambia il colore dello sfondo della pagina web da bottoni :
Descrizione: Questo script agisce sullo sfondo di una pagina così da creare l'illusione da cambiare colore.
Demo :

Perfavore, Entra oppure Registrati per vedere i Link!

Passo 1: Copiate il codice qui di seguito riportato e incollatelo nella vostra pagina all'interno dei tag <body> e </body>:

3_Cursore mirino :
Descrizione: Questo script agisce sul cursore dando l'illusione di vedere un mirino apposta del cursore.
Demo : Demo :
Perfavore, Entra oppure Registrati per vedere i Link!

Si può cambiare colore dalla stringa var hairCol = "#ff0000";
Mettere il codice fra i tag <body></body> :

<body>
<script type="text/javascript">
//Crosshairs -
Perfavore, Entra oppure Registrati per vedere i Link!


</script>

<p><center>
</center><p>

4_Palline colorate che seguono il mouse:
Descrizione: Questo script agisce sul cursore di una pagina così da creare l'illusione delle palline colorate che ruotano.
Demo :
Perfavore, Entra oppure Registrati per vedere i Link!

Passo 1: Copiate il codice qui di seguito riportato e incollatelo nella vostra pagina all'interno dei tag <body> e </body>:
è possibile modificare i colori da questa stringa e si puo aggiungere unaltra pallina colorata aggiungendo questa stringa var aCol = "#ff0000"; alla seguente stringa:
var xCol = "#ff0000";
var yCol = "#00ff00";
var zCol = "#0000ff";

<body>
<script type="text/javascript">

</script>
<p><center>

5_Effetto fade orizzontale :
Descrizione: Questo script agisce sulla pagina aprendola orizzontalmente.
Demo :
Perfavore, Entra oppure Registrati per vedere i Link!

Passo 1: Copiate il codice qui di seguito riportato e incollatelo nella vostra pagina all'interno dei tag <head> e </head>:

<style>

</style>
</head>
<body>
<div id="i1" class="intro"></div><div id="i2" class="intro"></div>
<script language="JavaScript1.2">
/*
Left-Right Curtain Script- © Dynamic Drive (
Perfavore, Entra oppure Registrati per vedere i Link!
)
For full source code, 100's more free DHTML scripts, and TOS,
visit
Perfavore, Entra oppure Registrati per vedere i Link!

*/


</script>

6_Palline colorate in fila che seguono il mouse :
Descrizione: Questo script agisce sul cursone così da creare l'illusione del movimento.
Demo :
Perfavore, Entra oppure Registrati per vedere i Link!

Passo 1: Copiate il codice qui di seguito riportato e incollatelo nella vostra pagina all'interno dei tag <body> e </body>:

<script>

/******************************************
* Cross browser cursor trailer script- By Brian Caputo (bcaputo@icdc.com)
* Visit Dynamic Drive (
Perfavore, Entra oppure Registrati per vedere i Link!
) for full source code
* Modified Dec 30th, 02' by DD. This notice must stay intact for use
******************************************/

A=document.getElementById
B=document.all;
C=document.layers;
T1=new Array("http://www.massimo61.org/javascript/grafica/image/trail1.gif",38,35,"http://www.massimo61.org/javascript/grafica/image/trail2.gif",30,31,"http://www.massimo61.org/javascript/grafica/image/trail3.gif",28,26,"http://www.massimo61.org/javascript/grafica/image/trail4.gif",22,21,"http://www.massimo61.org/javascript/grafica/image/trail5.gif",16,16,"http://www.massimo61.org/javascript/grafica/image/trail6.gif",10,10)
var offsetx=15 //x offset of trail from mouse pointer
var offsety=10 //y offset of trail from mouse pointer

nos=parseInt(T1.length/3)
rate=50
ie5fix1=0;
ie5fix2=0;
rightedge=B? document.body.clientWidth-T1[1] : window.innerWidth-T1[1]-20
bottomedge=B? document.body.scrollTop+document.body.clientHeight-T1[2] : window.pageYOffset+window.innerHeight-T1[2]

for (i=0;i<nos;i++){
createContainer("CUR"+i,i*10,i*10,i*3+1,i*3+2,"","<img src='"+T1[i*3]+"' width="+T1[(i*3+1)]+" height="+T1[(i*3+2)]+" border=0>")
}

function createContainer(N,Xp,Yp,W,H,At,HT,Op,St){
with (document){
write((!A && !B) ? "<layer id='"+N+"' left="+Xp+" top="+Yp+" width="+W+" height="+H : "<div id='"+N+"'"+" style='position:absolute;left:"+Xp+"; top:"+Yp+"; width:"+W+"; height:"+H+"; ");
if(St){
if (C)
write(" style='");
write(St+";' ")
}
else write((A || B)?"'":"");
write((At)? At+">" : ">");
write((HT) ? HT : "");
if (!Op)
closeContainer(N)
}
}

function closeContainer(){
document.write((A || B)?"</div>":"</layer>")
}

function getXpos(N){
if (A)
return parseInt(document.getElementById(N).style.left)
else if (B)
return parseInt(B[N].style.left)
else
return C[N].left
}

function getYpos(N){
if (A)
return parseInt(document.getElementById(N).style.top)
else if (B)
return parseInt(B[N].style.top)
else
return C[N].top
}

function moveContainer(N,DX,DY){
c=(A)? document.getElementById(N).style : (B)? B[N].style : (C)? C[N] : "";
if (!B){
rightedge=window.innerWidth-T1[1]-20
bottomedge=window.pageYOffset+window.innerHeight-T1[2]
}
c.left=Math.min(rightedge, DX+offsetx);
c.top=Math.min(bottomedge, DY+offsety);
}
function cycle(){
//if (IE5)
if (document.all&&window.print){
ie5fix1=document.body.scrollLeft;
ie5fix2=document.body.scrollTop;
}
for (i=0;i<(nos-1);i++){
moveContainer("CUR"+i,getXpos("CUR"+(i+1)),getYpos("CUR"+(i+1)))
}
}

function newPos(e){
moveContainer("CUR"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2)
}

function getedgesIE(){
rightedge=document.body.clientWidth-T1[1]
bottomedge=document.body.scrollHeight-T1[2]
}

if (B){
window.onload=getedgesIE
window.onresize=getedgesIE
}

if(document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=newPos
setInterval("cycle()",rate)
</script>
<body>

7_Testo Dinamico:
Descrizione: Questo script agisce sul testo di una pagina così da creare l'illusione dello scorrimento.
Demo :
Perfavore, Entra oppure Registrati per vedere i Link!

Passo 1: Copiate il codice qui di seguito riportato e incollatelo nella vostra pagina all'interno dei tag <body> e </body>:

<script language="JavaScript">


</script>
</head>
<body>
<span id="testo"></span>
<p><center>
<font face="Verdana" size="-2">Free JavaScripts da<br>
<a href="http://www.massimo61.org/">Free Web Upgrade</a></font>
</center><p>

8_Effetto Bubble:
Descrizione: Questo script agisce sullo sfondo di una pagina così da creare l'illusione dello scorrimento delle bollicine.
Demo :
Perfavore, Entra oppure Registrati per vedere i Link!

Passo 1: Copiate il codice qui di seguito riportato e incollatelo nella vostra pagina all'interno dei tag <body> e </body>:

<script type="text/javascript">
// <![CDATA[
var colours=new Array("#a6f", "#60f", "#60f", "#a6f", "#ccc"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=66; // how many bubbles are moving at any given time

/****************************
* JavaScript Bubble Bath *
* (c) 2010 mf2fm web-design *
*
Perfavore, Entra oppure Registrati per vedere i Link!
*
* DON'T EDIT BELOW THIS BOX *
****************************/
/* prelevato ed illustrato su Web-Link.it
******************************************/

var swide=800;
var shigh=600;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();

window.onload=function() { if (document.getElementById) {
var b, i;
b=document.createElement("div");
i=b.style;
i.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();

var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";

b.appendChild(rats);
bubb=rats.style;
}
bubble();
}}

function bubble() {
var c;
for (c=0; c<bubbles; c++) if (!bubby[c] && Math.random()<0.333) {
bubb[c].left=(bubbx[c]=Math.floor(swide/6+Math.random()*swide/1.5)-10)+"px";
bubb[c].top=(bubby[c]=shigh)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}

function update_bubb(i) {
if (bubby) {
bubby-=bubbs/2+i%2;
if (bubby>0) {
if (Math.random()<bubbs/shigh*2 && bubbs++<8) {
bubb.width=bubbs+"px";
bubb.height=bubbs+"px";
}
bubb.top=bubby+"px";
bubbx+=(i%5-2)/5;
bubb.left=bubbx+"px";
}
else {
bubb.visibility="hidden";
bubby=0;
return;
}
}
}

window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}

window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
document.getElementById("bod").style.top=sdown+"px";
document.getElementById("bod").style.left=sleft+"px";
}

function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}
// ]]>
</script>

9_Effetto scritta Neon :
Descrizione: Questo script agisce sulla scritta di una pagina così da creare l'illusione del cambiamento di colore.
Demo :
Perfavore, Entra oppure Registrati per vedere i Link!

Passo 1: Copiate il codice qui di seguito riportato e incollatelo nella vostra pagina all'interno dei tag <body> e </body>:
Si può modificare colore dalle seguenti stringhe :

var message="Demo"

var neonbasecolor="#0000ff"

var neontextcolor="#ffff00"

<center>
<body>
<script language="JavaScript1.2">





var message="Demo"

var neonbasecolor="#0000ff"

var neontextcolor="#ffff00"

var flashspeed=250 //in milliseconds

///No need to edit below this line/////

var n=0

if (document.all||document.getElementById){

document.write('<font color="'+neonbasecolor+'">')

for (m=0;m<message.length;m++)

document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')

document.write('</font>')

}

else

document.write(message)

function crossref(number){

var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)

return crossobj

}

function neon(){

//Change all letters to base color

if (n==0){

for (m=0;m<message.length;m++)

//eval("document.all.neonlight"+m).style.color=neonb asecolor

crossref(m).style.color=neonbasecolor

}

//cycle through and change individual letters to neon color

crossref(n).style.color=neontextcolor

if (n<message.length-1)

n++

else{

n=0

clearInterval(flashing)

setTimeout("beginneon()",1500)

return

}

}

function beginneon(){

if (document.all||document.getElementById)

flashing=setInterval("neon()",flashspeed)

}

beginneon()
</script>
</center>

10_Testo stile matrix :
Descrizione: Questo script agisce sul testo di una pagina così da creare l'illusione dello scorrimento delle lettere e formare la parola desiderata.
Demo :
Perfavore, Entra oppure Registrati per vedere i Link!

Passo 1: Copiate il codice qui di seguito riportato e incollatelo nella vostra pagina all'interno dei tag <body> e </body>:
Modificare testo finale dalla seguente stringa : <div id="matrix">Testo desiderato</div>

<center>
<style type="text/css">
.matrix { font-family:Lucida Console, Courier, Monotype; font-size:10pt; text-align:center; width:10px; padding:0px; margin:0px;}
</style>
</head><body bgcolor="#FFFFFF" link="#333399" vlink="#550000" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<script type="text/javascript" language="JavaScript">


</script>
</head>
<body>
<div id="matrix">Testo desiderato</div>

11_Testo che gira intorno al cursore :
Descrizione: Questo script agisce sul testo di una pagina così da creare l'illusione dello scorrimento delle parole intorno al cursore.
Demo :
Perfavore, Entra oppure Registrati per vedere i Link!

Passo 1: Copiate il codice qui di seguito riportato e incollatelo nella vostra pagina all'interno dei tag <head> e </head>:
Modificare testo finale dalla seguente stringa : var msg = "Testo desiderato";

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #000;
/* End Optional */

/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">

/* Circling text trail- Tim Tilton
Website:
Perfavore, Entra oppure Registrati per vedere i Link!

Visit:
Perfavore, Entra oppure Registrati per vedere i Link!
for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in
Perfavore, Entra oppure Registrati per vedere i Link!

username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Your message here (QUOTED STRING)
var msg = "Testo desiderato";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y = Y += (y[i-1] - Y) * speed;
x = X += (x[i-1] - X) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg));
oi.appendChild(d); y = x = Y = X = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();

</script>

Fonte : Web

orlando1994 · 16 Aprile 2011

Riferimento: Raccolta javascript [In aggiornamento 24h/24h]

Buona come guida Bravo

Lore. · 21 Aprile 2011

Riferimento: Raccolta javascript [In aggiornamento 24h/24h]

Buona raccolta bravo ;)

XFossaDeiLeoniX · 21 Aprile 2011

Riferimento: Raccolta javascript [In aggiornamento 24h/24h]

Ottima raccolta, ma funzionano solo con IE o anche gli altri browser?

Neaples · 21 Aprile 2011

Riferimento: Raccolta javascript [In aggiornamento 24h/24h]

XFossaDeiLeoniX ha detto:
Ottima raccolta, ma funzionano solo con IE o anche gli altri browser?

E' anche possibile adattarli.
In ogni caso, ottimo thread.

gabriele26 · 10 Maggio 2011

Riferimento: Raccolta javascript [In aggiornamento 24h/24h]

Bella la Guida Error ^_*

salvo-formi · 10 Maggio 2011

Riferimento: Raccolta javascript [In aggiornamento 24h/24h]

grande amichetto

chukie100 · 10 Maggio 2011

Riferimento: Raccolta javascript [In aggiornamento 24h/24h]

Edit by Mirkuzzo

Cerca

JavaScript Raccolta javascript [In aggiornamento 24h/24h]

Error.System

Utente bannato

orlando1994

Utente Mitico

Lore.

Utente Mitico

XFossaDeiLeoniX

Utente Guru

Neaples

Utente Strepitoso

gabriele26

Utente Normale

salvo-formi

Utente bannato

chukie100

Utente bannato