Dynamiczny text-shadow + Drag&Drop

Dziś trochę eksperymentalnie, w myśl zasady „sharpen your saw” ;] Złap napis i przeciągaj. Możesz poniżej ramki w inpucie podać swój tekst.

Log – This . com

No i kod do tego

$j = jQuery.noConflict();

pageY = null;
pageX = null;
drag = 0;
pY = 2;
pX = 2;

lightX = $j('#lightBulb').position().left + ($j('#lightBulb').width()/2);
lightY = $j('#lightBulb').position().top + ($j('#lightBulb').height()/2);

$j(document).mousemove(function(e){      
      pageY = e.pageY;
      pageX = e.pageX;

 $j('#test').mousedown(function(){
     if(drag == 0 ){
     offsetX = pageX - $j('#test').position().left;
     offsetY = pageY - $j('#test').position().top;
     drag = 1;
     }

 });

 $j(document).mouseup(function(){
     drag = 0;
 });

     pX = (pageX - lightX)/10;
     pY = (pageY - lightY)/10;
if(drag == 1)
 $j('#test').attr('style','top:'+(pageY-offsetY)+'px;left:'+(pageX-offsetX)+'px; text-shadow: '+pX+'px '+pY+'px 2px black');


   });

$j('#customContent').keyup(function(){
$j('#test').html($j(this).val());
})

About the author

Logos

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>