Att göra en hemsida om dig med Visual Studio (HTML, CSS, JQUERY) (7 / 8 steg)
Steg 7: Lägga till Javascript (Jquery)
Du kan göra din webbplats ännu vackrare genom att göra den interaktiv. Vi kommer att göra detta genom att lägga till Jquery. JQuery är inte ett språk men det är ett bibliotek skrivet i Javascript. Du kan besöka Jquerys officiella hemsida genom att klicka på länken nedan.
Du behöver inte hämta det eftersom vi kan länka den med koden.
Kan börja med att lägga en acript länk till jquery. Lägg till detta under taggen länk vi använde sista steget.
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" >
Lägg sedan till skripttaggarna strax under det som du just lagt till:
< script >
< / script >
Inuti dessa taggar kommer vi att lägga till vår javascript-skript. Vi måste först uppdatera våra Indatatyp: "Skicka". Vi måste lägga till klassen: "inputMail". Så vår tagg bör se ut så här:
< input type = "Skicka" class = "inputMail" >
Nu ska vi lägga till javascript i script-taggen. Vi börjar med att lägga denna kod i script-taggen:
$(document).ready(function() {
});
Därmed kommer den att köra funktionen när dokumentet är fullastad. $(Document) innebär att den söker efter något som kallas dokument, då det använder funktionen redo att kontrollera om dokumentet är redo. Inuti dessa parentes sätter vi alla vår nästa Jquery kod. Så nu lägger vi till följande kod inom hakparenteserna:
$('.inputMail').click(function() {
});
Denna kod söker en klass som heter inputMail (pricken betyder det är en klass där vi söker). När Jquery hittade objektet kommer att det kontrollera om det som klickade. När det är utför att vara klickade det funktionen. Så inuti funktionen kan vi låta knappen gör ett litet trick. Så för tricken kommer vi lägga till denna kod inuti funktionen:
$('.inputMail').animate ({höjd: "+= 100px", opacitet: "0,4"}, "långsam");
$('.inputMail').animate ({bredd: "+= 100px", opacitet: "1.0"}, "långsam");
$('.inputMail').animate ({höjd: "-= 100px", opacitet: "0,4"}, "långsam");
$('.inputMail').animate ({bredd: "-= 100px", opacitet: "1.0"}, "långsam");
Nu ser det ut också för klass inputMail och körs en anpassad animering. Så kan kolla upp det! Detta är hur hela din script-taggen ska se ut:
< script >
$(dokument) .ready (funktion () {
$('.inputMail').click (funktion () {
$('.inputMail').animate ({höjd: "+= 100px", opacitet: "0,4"}, "långsam"); $('.inputMail').animate ({bredd: "+= 100px", opacitet: "1.0"}, "långsam");
$('.inputMail').animate ({höjd: "-= 100px", opacitet: "0,4"}, "långsam");
$('.inputMail').animate ({bredd: "-= 100px", opacitet: "1.0"}, "långsam");
});
});
< / script >
Thats det! Trevligt! Nästa steg vi ser hur till få HTML-filen.