jueves, 11 de agosto de 2011

Corazoncitos de colores cayendo del cursor

chicas desde hace dias que estaba editando este script para que salieran los corazoncitos de colores y no lo lograba x.x y es que tanto codigo a veces da dolor de cabeza o.O y hoy quiero contarles queeee por fiiiiiiiin lo logreeeeeeeee *aplausos* siii fue algo dificil pero al fin me salio xD!!! ojala les guste este efecto tanto como a mi ^v^ (no lo veras en otro blog) a menos que lo copien :)!













copia el codigo y pegalo en un gadget Htlm/javascript ^^



<script type='text/javascript'>

// <![CDATA[

function initCursor() {

if (document.getElementById) {

var i, rats, rlef, rdow;

for (var i=0; i<sparkles; 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();

sparkle();

}}



var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")

var r=1

var g=1

var b=1

var seq=1

var sparkles = 35;

/****************************

* JavaScript corazones multicolor *

* (c) 2011 Annyz Blog*

* http://www.annyz-kawaii.blogspot.com*

* No cambies la informacion*

****************************/

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var tiny=new Array();

var star=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();



function sparkle() {



var c;



if (x!=ox || 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<sparkles; c++) {



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



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



}



setTimeout("sparkle()", 40);



}



function update_star(i) {



if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";



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"



}



}



function 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;



}



}



else tiny[i].style.visibility="hidden";



}



document.onmousemove=mouse;



function mouse(e) {



set_scroll();



y=(e)?e.pageY:event.y+sdown;



x=(e)?e.pageX:event.x+sleft;



}



function 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;



function 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;



}



}



function createDiv(height, width) {



var div=document.createElement("div");

rainbow="#"+hex[r]+hex[g]+hex[b]

if (seq==6){

b--

if (b==0)

seq=1

}

if (seq==5){

r++

if (r==12)

seq=6

}

if (seq==4){

g--

if (g==0)

seq=5

}

if (seq==3){

b++

if (b==12)

seq=4

}

if (seq==2){

r--

if (r==0)

seq=3

}

if (seq==1){

g++

if (g==12)

seq=2

}



div.style.position="absolute";



div.style.height=height+"49px";



div.style.width=width+"50px";



div.style.overflow="hidden";



div.style.backgroundColor=rainbow;



return (div);



}

window.onload=function()

{

initCursor()

initImage()

startTime()

}



function initImage() {

imageId = 'menu'

image = document.getElementById(imageId);

setOpacity(image, 0);

image.style.visibility = "visible";

fadeIn(imageId,0);

}

function fadeIn(objId,opacity) {

if (document.getElementById) {

obj = document.getElementById(objId);

if (opacity <= 100) {

setOpacity(obj, opacity);

opacity += 10;

window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 120);

}

}

}

function setOpacity(obj, opacity) {

opacity = (opacity == 100)?99.999:opacity;

// IE/Win

obj.style.filter = "alpha(opacity:"+opacity+")";

// Safari<1.2, Konqueror

obj.style.KHTMLOpacity = opacity/100;

// Older Mozilla and Firefox

obj.style.MozOpacity = opacity/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3

obj.style.opacity = opacity/100;

}



function changeNav(id) {

document.getElementById('content').innerHTML=document.getElementById(id).innerHTML;

document.getElementById('main').innerHTML=document.getElementById('home').innerHTML;

document.getElementById('rabbit').style.top="275px"

document.getElementById('penguin').style.top="532px"

}



function hidestatus(){

window.status=""

return true

}

// ]]>

</script>



<script type="text/javascript">

if (window.jstiming) window.jstiming.load.tick('headEnd');

</script>



<div class='navbar section' id='navbar'><div class='widget navbar' id='navbar1'><script type="text/javascript">

function setAttributeOnload(object, attribute, val) {

if(window.addEventListener) {

window.addEventListener("load",

function(){ object[attribute] = val; }, false);

} else {

window.attachEvent('onload', function(){ object[attribute] = val; });

}

}

function showRelatedContent(args) {

var el = document.getElementById('related-iframe');

if (el.parentNode.style.display != 'none') {

el.parentNode.style.display = 'none';

document.onclick = showRelatedContent.prevOnClick;

return;

}



var match = /(?:^[?]|&)c=([0-9]+)(?:&|(?!.))/.exec(args);

if (match !== null) {

document.getElementById('related-loading').style.left = match[1] + 'px';

el.style.left = Math.max(0, match[1] - parseInt(el.width) / 2) + 'px';

}



// Hide related-content dropdown when clicking anywhere but on it.

document.onclick = function() {

var el = document.getElementById('related-iframe');

if (el.parentNode.style.display != 'none') {

el.parentNode.style.display = 'none';

}

document.onclick = showRelatedContent.prevOnClick;

};

}

</script></div></div>




24 comentarios:

  1. Wow super! me encanto ^w^ es super kawaii

    ResponderEliminar
  2. haha arigato chicas, me alegra que les haya gustado ^v^ valio la pena hacerlo

    ResponderEliminar
  3. waaaa que lindo *____________*
    me encantaa >w<

    ResponderEliminar
  4. *U* genia annyz, te felicito portu esfuerzo ^^ gracias por el material -U-

    ResponderEliminar
  5. O_O que lindo! gracias por compartir =)

    ResponderEliminar
  6. Muchísimas gracias Annyz, de verdad! :)

    ResponderEliminar
  7. ooooh que lindo muchas gracias.
    En verdad te admiro yo nunca fui buena para esto... es muy dificil :S.
    Eres genial *aplausos y una porra :D*

    ResponderEliminar
  8. n.n, un poco largo el codigo xD, pero creo que para quienes quieren este efecto en sus blogs vale la pena, ya que se ve muy lindo, bueno yo estoy trabajando en el mio propio, gracias por afiliarme, en seguida te afilio tambien, besotes y pataditas.

    ResponderEliminar
  9. Muy buen tuto espero q nadie lo copie en fin ya te afilie besos

    ResponderEliminar
  10. BUAH! Qué preciosidad *OOOOOOOO* En cuanto termine las reformas en un blog que tengo en layout, y lo ponga con plantilla normal, lo pongo lo primero XD juasjuas.

    En serio, muchas gracias. Aunque no te comente, me paso muchísimo por tu blog ^^

    ResponderEliminar
  11. q lindo !! que bueno poder hacer esas cosas, yo odio los codigos jajaj
    lo probe en mi blog, poniendo los creditos, ta bn?
    saludos!

    ResponderEliminar
  12. haha sip todo bien no te preocupes.. !!! te comente en tu bloggui ^^ me traje una imagen q me encanto xD

    ResponderEliminar
  13. gracias =D me da gusto que te hayas animado a comentar ^^!!no muerdo xD

    ResponderEliminar
  14. arigatoo nena.. y suerte en tu script luego me paso para ver como te quedo ^^

    ResponderEliminar
  15. no tenes uno de estrellas o algo asii? :D

    ResponderEliminar
  16. no.. sorry ^^ en tutoriales esta uno que dice brillitos en tu cursor quiza ese te guste mas ^^!

    ResponderEliminar
  17. porque no te queda ailu?? solo copia el codigo completo y pegalo en un gadget html javascript si sigues con problemas no dudes en decirme ^^

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.