Hvordan få Sparkles som følger musen på Tumblr

For å legge til en interessant effekt på Tumblr bloggen vurdere å få gnistrer til å følge musen. På denne måten når en besøkende beveger henne markøren over området en linje av glitter følger hennes bevegelser. Tumblr gir deg tilgang til bloggen din kode slik at du kan legge til Javascript som produserer denne forbedringen. Rediger Tumblr-kode for å tildele en glittereffekt til musepekeren.

Bruksanvisning

1 Logg deg på Tumblr-konto. Klikk bloggens navn i menylinjen øverst.

2 Klikk på "Tilpass utseende" -knappen som vises på høyre side av siden og klikk på "Theme" linken øverst. Bloggens kode vises i en tekstboks.

3 Plasser markøren før den avsluttende </ head> tag. Kopier og lim inn følgende Javascript-kode:
<Script type = "text / javascript">
// <! [CDATA [
Var color = "# BD3EA8";
Var glitrer = 50;

var x = okse = 400;
Var y = oy = 300;
Var swide = 800;
Var shigh = 600;
Var sleft = sdown = 0;
Var liten = new Array ();
Var stjerne = new Array ();
Var starv = new Array ();
Var starx = new Array ();
Var Stary = new Array ();
Var tinyx = new Array ();
Var tinyy = new Array ();
Var tinyv = new Array ();

window.onload = function () {if (document.getElementById) {
Var jeg, rotter, rlef, rdow;
for (var i = 0; i <glitrer; i ++) {

var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);

}
set_width ();
glitre();
}}

funksjon gnisten () {
Var c;
if (x! = okse || y! = oy) {

ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}

}
for (c = 0; c <glitrer, c ++) {

if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);

}
setTimeout ( "gnisten ()", 40);
}

funksjon update_star (i) {
if (--starv [i] == 25) stjerners [i] .style.clip = "rect (1px, 4px, 4 piksler, 1 px)";
if (starv [i]) {

stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}

}
else {

tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"

}
}

funksjon update_tiny (i) {
if (--tinyv [i] == 25) {

tiny[i].style.width="1px";
tiny[i].style.height="1px";

}
if (tinyv [i]) {

tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}

}
ellers lite [i] .style.visibility = "skjult";
}

document.onmousemove = mus;
funksjon mus (e) {
set_scroll ();
y = (e) e.pageY: event.y + sdown;
x = (e) e.pageX:? event.x + sleft;
}

funksjon set_scroll () {
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;

}
}

window.onresize = set_width;
funksjon set_width () {
if (typeof (self.innerWidth) == "number") {

swide=self.innerWidth;
shigh=self.innerHeight;

}
else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;

}
else if (document.body.clientWidth) {

swide=document.body.clientWidth;
shigh=document.body.clientHeight;

}
}

funksjon createDiv (høyde, bredde) {
Var div = document.createElement ( "div");
div.style.position = "absolutt";
div.style.height = høyde + "px";
div.style.width = bredde + "px";
div.style.overflow = "skjult";
div.style.backgroundColor = farge;
avkastning (div);
}
//]]>
</ Script>

4 Klikk på "Update preview" -knappen nederst i vinduet for å teste ut markøren. Klikk på "Lagre + Close" -knappen øverst til å publisere sparkles.

Hint

• Du kan endre fargen på sparkles ved å legge en ny HTML-fargeverdi i tredje linje med kode. For eksempel vil endre standard rosa "var color =" # BD3EA8 ";" til "var color =" # FFFF00 ";" for å vise en gul nyanse.