|
|
|
| Hvordan Roter et Div. i JavaScript |
|
Hjemmesiden for mange nettsteder i dag inneholder en rekke bilder som roterer eller gli inn og ut på siden. Denne funksjonaliteten er implementert ved å opprette en enkelt tag med flere bilder og bruke JavaScript " setInterval "-metoden for å rotere på en tidsbestemt planlegge slik at bare ett bilde vises på en gang . JavaScript- rotasjon er ofte ledsaget av animasjonseffekter som fade eller lysbilde bilder eller tekst i og ut av . JQuery biblioteket gir en enkel måte å velge bilder og implementere en animert rotasjon . Instruksjoner en Lag en ny HTML- dokument ved hjelp av Notepad eller en HTML- editor. Sett inn HTML overskrifter i dokumentet : < ! DOCTYPE HTML >
< p> Roter Div < /title> <br> 2 <p> Lag CSS styling for <div> til roteres. Angi posisjonen , bredde , høyde og bakgrunnsfarge for <div> . Deaktiverer visning av bilder i <div> og aktivere visning av bildet med klassen navnet " aktiv" : en <p> <style> <br> <p> # rotere { <br> < p > position: relative ; <br> <p> bredde : 979 ; <br> <p> høyde: 349 ; <br> <p> background- color: # 999999 ; <br> <p> } <br> < p > # rotere img { <br> <p> display: none ; <br> <p> posisjon: absolutt; <br> <p> topp: 0 ; <br> <p> igjen : 0 ; <br> < p > } <br> <p> # rotere img.active { <br> <p> display: block ; <br> <p> } <br> <p> < /style > <br> <br > 3 <p> Sett jQuery biblioteket inn i dokumentet ved å inkludere det fra en offentlig kilde, for eksempel Google API : en <p> < script src = " https://ajax.googleapis.com/ajax/libs /jquery/1.6.1/jquery.min.js "> < /script > <br> 4 <p> Legg til JavaScript -kode for å rotere bildene i <div> . Finn ut bildet med den "aktive " class og velg neste bilde i listen . Hvis størrelsen på det neste bildet er null , starter tilbake i begynnelsen av listen med det første bildet : en <p> funksjon roter ( ) { <br> <p> Var aktiv = $ ("# rotere aktiv . "); <br> <p> if ( $ (" . . . # rotere aktiv " ) . . neste ( ) lengde > 0 ) <br> <p> Var next = $ ( " # rotere aktiv " ) ved (); <br> <p> annet <br> <p> Var next = $ ( "# rotere img : først "); <br> 5 <p> Fade bildet med den "aktive " class ut og visne neste bilde i. Ta den "aktive " class fra gjeldende bilde og tilordne den til neste bilde : en <p> active.fadeOut ( "fast " , function () <br> 6 <p> Sett en timer å rotere bildene hvert femte sekund ved hjelp av " setInterval "-metoden : . <br> <p> $ (dokument) klar ( function () { <br> <p> setInterval ( " rotere ( ) " , 5000 ) ; <br> <p> }); <br> <p> < /script > <br> <p> < /head> <br> 7 <p> Insert den <div> inn i kroppen av dokumentet og gi den "aktive " class til det første bildet : en <p> <body> <br> <p> <div id="rotate"> <br> <p> < img src = " http://l.yimg.com/g/images/soup-discover.jpg " width = " 979 " height = " 349 " alt = " Image1 " class = "aktiv " > <br> <p> < img src = " http://l.yimg.com/g/images/soup_hero_124.jpg.v1 "width = " 979 "height = " 349 " alt = " Image2 " > <br> <p> src="http://l.yimg.com/g/images/soup_hero_jessica.jpg.v1" width="979" height="349" alt="Image3"> ; <br> <p> src="http://l.yimg.com/g/images/soup_hero_alejokirchuk.jpg.v1" width="979" height="349" alt="Image4"> <br> <p> < /div > <br> <p> < /body > <br> <p> < /html > <br> 8 <p> Lagre dokumentet . Åpne den i en nettleser og se bildene i <div> rotere på skjermen ved fading inn og ut hvert femte sekund . <br> <br>
<div class=ad2><script language='javascript' src='/ad/201310/4.js'></script></div>
</div>
</td>
</tr>
</table>
<table width="745" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ecf0f4">
<tr>
<td bgcolor="#ecf0f4"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="7">
<tr>
<td></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="95%" align="center" height="26">
<tr>
<td width="51%"><p>früher ： <a class='LinkPrevArticle' href='http://www.datamaskin.biz/Programmering/javascript-programming/90941.html' >Hvordan du kan overføre JSON data med JavaScript </a></li></p></td>
</tr>
<tr>
<td width="49%"> Weiter： <a class='LinkNextArticle' href='http://www.datamaskin.biz/Programmering/javascript-programming/90943.html' >The Best Javascript Bilde Sliders </a></li></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="7">
<tr>
<td></td>
</tr>
</table></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" height=7>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=770 align=center height=246>
<tr>
<td height=246 vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=380>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><strong>Relatert Artike</strong></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=209>
<tr>
<td height=201>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91119.html" title="Hvordan deaktivere Print Screen JavaScript " target="_self">Hvordan deaktivere Print Screen JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91271.html" title="Hvordan skrive Java Script " target="_self">Hvordan skrive Java Script </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90931.html" title="Slik bygger du inn videoer i en Pop- Up With JavaScript " target="_self">Slik bygger du inn videoer i en Pop- Up With JavaScript…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91086.html" title="Hvor å Endre Javascript passord på en Aptiva IBM PC " target="_self">Hvor å Endre Javascript passord på en Aptiva IBM PC </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91074.html" title="Hvordan legge inn en kobling i AS2 " target="_self">Hvordan legge inn en kobling i AS2 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91272.html" title="Hvordan legge til en blogg knapp med tekst Box Underneath for kode " target="_self">Hvordan legge til en blogg knapp med tekst Box Undernea…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90793.html" title="Hvordan legge til kontroller i Google Maps API " target="_self">Hvordan legge til kontroller i Google Maps API </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90943.html" title="The Best Javascript Bilde Sliders " target="_self">The Best Javascript Bilde Sliders </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90899.html" title="Sekvensielle Effekter i jQuery " target="_self">Sekvensielle Effekter i jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91139.html" title="Hvordan lage en Vista Sidebar Gadget " target="_self">Hvordan lage en Vista Sidebar Gadget </a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td vAlign=top width=20></td>
<td vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=380>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><strong>Anbefalte artikler </strong></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=207>
<tr>
<td height=199>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/cc-programming/85445.html" title="Viktigheten av variabler i 'C' programmering " target="_self">Viktigheten av variabler i 'C' programmering </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/java-programming/89011.html" title="Java Metode til Split i Comma i en Separert Linje " target="_self">Java Metode til Split i Comma i en Separert Linje </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91125.html" title="Hvordan aktivere eller deaktivere Form Button i Javascript " target="_self">Hvordan aktivere eller deaktivere Form Button i Javascr…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/visual-basics-programming/96064.html" title="Hvordan å kompilere Visual Basic 6.0 " target="_self">Hvordan å kompilere Visual Basic 6.0 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/php-mysql-programming/92316.html" title="Slik fjerner klasse i PHP " target="_self">Slik fjerner klasse i PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/computer-programming-languages/87941.html" title="Silverlight Sockets Tutorial " target="_self">Silverlight Sockets Tutorial </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/visual-basics-programming/95029.html" title="Hvordan Bestem antall linjer med kode i en NET Project " target="_self">Hvordan Bestem antall linjer med kode i en NET Project </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/visual-basics-programming/95998.html" title="Hvordan åpne et Word- dokument i Visual Basic " target="_self">Hvordan åpne et Word- dokument i Visual Basic </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/computer-programming-languages/87136.html" title=". Hvordan bruke DataGridView Sett inn " target="_self">. Hvordan bruke DataGridView Sett inn </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/python-programming/93708.html" title="Hvordan kode Whois Oppslag i Python " target="_self">Hvordan kode Whois Oppslag i Python </a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=980 height=8>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=980 bgColor=#36506e height=90>
<tr>
<td class=bs height=90 align=center>Copyright © Datamaskin http://www.datamaskin.biz/
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html> | | |
