Hvordan lage en DIV Utvid til venstre
De fleste Web-design innsnevre seg til en begrenset mengde plass vannrett på nettleserskjermbildet, typisk rundt 950 til 960 piksler. Sidefelt ta opp noen av denne plassen også. Når du ønsker å legge til en boks som inneholder innhold som er lettere å lese når det gis mer horisontal plass, noe som gjør div utvid er en løsning. Dette div kan utvides over sidelinjen og ta opp så mye plass som du vil, og du kan gjøre det utløse med en mus hover hendelse i jQuery, en Javascript-rammeverk som fungerer godt med animasjoner.
Bruksanvisning
1 Åpne websiden i Notepad eller en kode editor og finne "<div>" koder for div du ønsker å utvide til venstre. Få ID navn fra åpningen "<div>" tag.
2 Finn "<style>" tags mellom "<head>" koder i HTML-koden. Legg kodene hvis du ikke finner dem. Legg en stil regel som er rettet mot ID navnet på div. Bruk denne regelen til å angi bredden på div.
<Style type = "text / css">
utvide {
width: 300px;
}
</ Style>
Legg til "overflow: hidden» og en høyde hvis du ønsker å opprette en boks som kan utvides til å avsløre mer innhold.
3 Legg jQuery biblioteket filen mellom "<head>" koder, plassere den et sted under "<style>" tags:
<skriptkodene under jQuery biblioteket filen og skrive "dokument klar" funksjon som vil holde skriptet kjøres før siden er ferdig lasting:
<Script type = "text / javascript">
$ (Funksjon () {
});
</ Script>
Alle skriptkode vil gå mellom klammeparentes av denne funksjonen.
5 Målrette div bruke sin ID i en jQuery velger og legge til "hover ()" -funksjonen for å gjøre div gjøre noe når en bruker svever over det:
$ ( '# Utvide'). Sveve (function () {
} Function () {
});
Når du bruker "hover ()" du trenger to funksjoner: en for hva som skjer når brukeren svever over et element, og den andre for hva som skjer når brukeren beveger musepekeren bort.
6 Legg til "animere ()" -funksjonen til den første "hover ()" -funksjon. Sett bredde til "+ =" ekstra antall piksler du vil legge til bredden på div når den ekspanderer. Erstatt "500" i denne koden med antall millisekunder du ønsker animasjonen hastighet:
$ (This) .animate ({
bredde: '+ = 200'
}, 500, function () {});
Erstatt "200" med antall piksler du vil legge til div bredde. Denne koden prøven bruker "$ (denne)" for å velge den overordnede element, som er det div. Det er lik "$ ( 'div')" i dette skriptet.
7 Omvendt bredden voksende animasjon når brukeren mus vekk fra div:
$ (This) .animate ({
bredde: '- = 200'
}, 500, function () {});
Den ferdige manuset ser slik ut:
$ (Funksjon () {
$ ( '# Utvide'). Sveve (function () {
$(this).animate({
bredde: '+ = 200'
}, 500, function () {});
} Function () {
$('#expand').animate({
bredde: '- = 200'
});
});
});