JavaScript kan endre stilark informasjon på en webside , slik at et bilde skal flyttes til ulike posisjoner på siden, basert på brukerens input. Et eksempel på dette er en HTML , stil og JavaScript demonstrasjonen som gjør at et bilde som skal flyttes rundt på siden på en tilfeldig måte som musepekeren er plassert på den. For å oppnå dette, er de posisjonelle attributtene av bildet endret , som mus-over hendelser inntreffer. Du trenger
tekst editor
nettleser
Vis flere instruksjoner
en
Åpne et nytt dokument i teksteditoren . Lagre filen som " moveimage.html . "
2
Skriv dokument header koden
< DOCTYPE html PUBLIC "- . ! //W3C //DTD XHTML 1.0 Strict //EN "
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
< html xmlns = " http://www .w3.org/1999/xhtml " >
Flytt bilde < /title > <br> <p> < meta content = " text /html . charset = utf- 8 "http - equiv =" Content - Type " /> <br> 3 <p> Skriv dokument stil kode <br> <p> < style type = "text /css " > <br> <p> # image <br> <p> { <br> <p> posisjon: absolutt; <br> <p> z-index : 0 ; <br> <p> visibility: visible ; <br> <p> topp: 10em ; <br> <p> venstre: 10em ; <br> <p> bredde : 5em ; <br> <p> høyde: 5em <br> <p> } <br> <p> < /style > <br> 4 <p> Skriv dokument JavaScript -kode. <br> <p> <script type="text/javascript"> <br> <p> Var x ; <br> <p> Var y ; <br> <p> funksjon pause ( ms ) <br> <p> { <br> <p> Var date = new Date (); <br> <p> Var CURDATE = null; <br> <p> do { CURDATE = new Date () ;} <br> <p> while ( CURDATE -date < ms ) ; <br> <p> } <br> <p> funksjon moveImage ( ) <br> <p> { <br> <p> x = Math.floor ( Math.random ( ) * 40 ) ; <br> <p> y = Math.floor ( Math.random ( ) * 30 ) ; <br> <p> pause ( 300 ) ; . <br> <p> document.getElementById ( "image" ) style.top = y + " em "; <br> <p> document.getElementById ( " image em "") style.left = x + . "; <br> <p> } <br> <p> < /script > <br> <p> < /head> <br> 5 <p> Skriv dokument kroppen kode . <br> <p> <body> <br> <p> < img id = " image " src = " http://www.objcom.com/brianb.png " onmouseover = " moveImage ( )" /> <br> <p> < /body > <br> <p> < /html > <br> 6 <p> Åpne fil i nettleseren . Flytt musepekeren over bildet , og det vil flytte til en ny plassering på siden . <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/90986.html' >Slik skjuler av klasse i JavaScript </a></li></p></td>
</tr>
<tr>
<td width="49%"> Weiter： <a class='LinkNextArticle' href='http://www.datamaskin.biz/Programmering/javascript-programming/90988.html' >Hvordan Count Down Bruke JavaScript </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/90829.html" title="Slik viser Random Javascript Tekstutdrag " target="_self">Slik viser Random Javascript Tekstutdrag </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90988.html" title="Hvordan Count Down Bruke JavaScript " target="_self">Hvordan Count Down Bruke JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91018.html" title="Hvordan få tilgang Element attributter Med JavaScript " target="_self">Hvordan få tilgang Element attributter Med JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90868.html" title="Hvordan deaktivere rulling i Google Maps API V3 " target="_self">Hvordan deaktivere rulling i Google Maps API V3 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90852.html" title="Hvordan Fade Out når du forlater en side i jQuery " target="_self">Hvordan Fade Out når du forlater en side 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/90871.html" title="5 Bruk av JavaScript " target="_self">5 Bruk av JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91140.html" title="Hvordan beregne Skjermoppløsning Med Java Script " target="_self">Hvordan beregne Skjermoppløsning Med 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/90942.html" title="Hvordan Roter et Div. i JavaScript " target="_self">Hvordan Roter et Div. i JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91046.html" title="Hvordan bruke Regular Expressions Med JavaScript " target="_self">Hvordan bruke Regular Expressions Med JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90763.html" title="Slik bruker du flere Plugins Med JW Player " target="_self">Slik bruker du flere Plugins Med JW Player </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/ruby-programming/94253.html" title="Hvordan åpne VBS -filer " target="_self">Hvordan åpne VBS -filer </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/java-programming/89536.html" title="Slik importerer du en Android Sample til Eclipse " target="_self">Slik importerer du en Android Sample til Eclipse </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/visual-basics-programming/95209.html" title="Slik fjerner det siste tegnet i VB.Net " target="_self">Slik fjerner det siste tegnet i VB.Net </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/python-programming/93591.html" title="Python er ikke matchende en String " target="_self">Python er ikke matchende en String </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/visual-basics-programming/95188.html" title="Hvordan sjekke om en mappe finnes i Vb.Net " target="_self">Hvordan sjekke om en mappe finnes i Vb.Net </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/visual-basics-programming/94383.html" title="Hvordan få MP3 File Lengde av VBScript " target="_self">Hvordan få MP3 File Lengde av VBScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/perl-programming/93318.html" title="Hvordan finne Linjenumrene Bruke Perl " target="_self">Hvordan finne Linjenumrene Bruke Perl </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/computer-programming-languages/88087.html" title="Hvordan å generere et tilfeldig heltall i Ada " target="_self">Hvordan å generere et tilfeldig heltall i Ada </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/perl-programming/93307.html" title="Hvordan å feilsøke Perl " target="_self">Hvordan å feilsøke Perl </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/computer-programming-languages/86395.html" title="Forskjeller mellom Byte Array Vs . String " target="_self">Forskjeller mellom Byte Array Vs . String </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> 