Γίνετε μέλος του Dr-blogger στο fb.Απλά πατήστε like από κάτω

photto




3 Floating Hover Text (κείμενο στον κέρσορα)

Νέοι bloggers γεια σας...

Σήμερα θα δούμε πως βάζουμε ένα κείμενο, να ακολουθεί τον κέρσορα του ποντικιού σας...Είναι πολύ απλό, και εύκολο, αλλά και εντυπωσιακό ! Μπαίνει σαν gadget !  DEMO ΕΔΩ





Kάντε αντιγραφή-επικόλληση τον παρακάτω κώδικα (μέσα στο HTML/JavaScript) :



<script language="javascript">

// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.

var text=' TO KEIMENO ΣΑΣ ΕΔΩ...';

var delay=40; // SPEED OF TRAIL
var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)
var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)
var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
var beghtml='<font color="#00436e"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.

//********** NO NEED TO EDIT BELOW HERE **********\\

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';
for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer name="txt'+i+'" top="-100" left="0" width="'+txtw+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);
function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}
function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}
function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}
function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}
function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}
function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}
window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>

(*...και αλλάξτε τη κόκκινη φράση TO KEIMENO ΣΑΣ ΕΔΩ... με τη φράση που θέλετε εσείς...)

Πατήστε ΑΠΟΘΗΚΕΥΣΗ, και είστε έτοιμοι...
(***επειδή πολλά JavaScript δεν λειτουργούν σε μερικά "παραφορτωμένα" blogs, η "συγκρούονται " με άλλα, η κάνουν το blog σας να ανοίγει πιο αργά,...δοκιμάστε το, και αν δείτε κάποιο πρόβλημα, τότε βγάλτε το....αν και δεν νομίζω να συμβεί με το εν λόγω JavaScript)
ΠΛΗΡΟΦΟΡΙΕΣ ΑΠΟ : royaltutor.net  (είναι πολύ διαδεδομένο, και υπάρχει κώδικας σε πολλά blogs)


{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Related Posts Plugin for WordPress, Blogger...
Print Friendly and PDF

3 σχόλια:

Tromero.eu είπε...

kalispera parakolouthaw ta panta edw kai kairo kai se eyxaristw pollh gia olla!!ayto pou ithela na rwthsw einai oti to kano kai mou katebenei se allo shmeio to onoma kseris ti na allaksw kai pali ena megalo eyxaristw

pandelees karagiann είπε...

...δυστυχως, δεν εχω εμπειρια στα script...φανταζομαι οτι συγκρουεται με αλλο script στο προτυπο σου...και να το εβλεπα στο blog σου, ισως παλι δεν μπορουσα να το βρω...παντως, δοκιμασε να αλλαξεις τις τιμες: top:ΧΧΧpx; left:ΧΧΧpx; η και οτι παρομοιες τιμες βλεπεις μεσα στο κωδικα πχ var Xoff=0 var Yoff=-30...αν αλλαξεις τα νουμερα, προσεκτικα καθε φορά, μπορει να ελθει κοντα στο κερσορα...καποτε ειχα το ιδιο προβλημα σε καποιο μπλογκ, αλλα παει καιρος, και δεν θυμαμαι τι εκανα...το εκανα εμπειρικά, οπως σου γραφω πιο πανω

Tromero.eu είπε...

file pantelh kalispera den to petyxa malon kati to empodizei pantos se euxaristw polh eisai katapliktikos ena kalo apogeyma na exeis