JavaScript kan ændre cascading style sheet på en webside , så et billede, der skal flyttes til forskellige positioner på siden, baseret på brugerens input. Et eksempel på dette er en HTML , stil og JavaScript demonstration , der giver et billede , der skal flyttes rundt på siden på en tilfældig måde , som musemarkøren er placeret på den. For at opnå dette, er de positionelle egenskaber af billedet modificeret som muse -over begivenheder indtræffer . Ting du skal
Text editor en Web browser
Vis Flere Instruktioner
1
Åbn et nyt dokument i teksteditoren . Gem filen som " moveimage.html ".
2
Skriv dokumentets sidehoved kode
< 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 " >
Move Image < /title > <br> <p> < meta content = " text /html . charset = utf- 8 " http-ækvivalent =" Content-Type "/> <br> 3 <p> Skrivedokument style kode <br> <p> < style type = "text /css " > <br> <p> # billedet <br> <p> { <br> <p> position : absolute; <br> <p> z- index: 0 ; <br> <p> visibility: visible ; <br> <p> top: 10em ; <br> <p> venstre : 10em ; <br> <p> bredde: 5em ; <br> <p> højde: 5em <br> <p> } <br> <p> < /style > <br> 4 <p> Skrivedokument JavaScript-kode . <br> <p> <script type="text/javascript"> <br> <p> var x ; <br> <p> var y , <br> <p> funktion pause (ms) <br> <p> { <br> <p> var dato = new date (); <br> <p> var CURDATE = null ; <br> <p> gøre { CURDATE = new date ( );} <br> <p> while ( CURDATE -date < ms ) <br> <p> } <br> <p> funktionen 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 ( " billede em "") style.left = x + . " <br> <p> } <br> <p> < /script > <br> <p> < /head> <br> 5 <p> Skriv dokumentet krop 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> Åbn denne fil i webbrowseren . Flyt musen hen over billedet , og det vil flytte til en ny placering på siden . <br> <br>
<div class=ad2><script language='javascript' src='/ad/201310/4.js'></script></div>
</div>
</td>
</tr>
</table>
<table width="95%" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#DEE7EE">
<tr>
<td></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="91%" height="52" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="51%"><p>Forrige ： <a class='LinkPrevArticle' href='/Programmering/javascript-programming/90986.html' >Hvordan man kan skjule af klasse i JavaScript </a></li></p></td>
</tr>
<tr>
<td width="49%"> næste ： <a class='LinkNextArticle' href='/Programmering/javascript-programming/90988.html' >Sådan Count Down Brug JavaScript </a></li></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="770" height="246" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="375" height="246" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm"> Relaterede artikler </td>
</tr>
</table>
<table width="95%" height="209" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="201"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/91168.html" title="Sådan fjernes en Adresselinien i HTML " target="_self">Sådan fjernes en Adresselinien i HTML </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/91200.html" title="Hvordan man omdirigerer en webside ved hjælp Javascript " target="_self">Hvordan man omdirigerer en webside ved hjælp Javascrip…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/91119.html" title="Sådan deaktiverer Print Screen JavaScript " target="_self">Sådan deaktiverer Print Screen JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/90881.html" title="Forskellen mellem Pop & Splice i Javascript " target="_self">Forskellen mellem Pop & Splice i Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/91274.html" title="Sådan Sammenlign Strings i JavaScript " target="_self">Sådan Sammenlign Strings i JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/90981.html" title="Sådan Begrænse en variabel længde i Javascript " target="_self">Sådan Begrænse en variabel længde i Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/91118.html" title="Sådan Update A Display Field Brug JavaScript " target="_self">Sådan Update A Display Field Brug JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/91196.html" title="Hvordan til at bære en Shift Dress " target="_self">Hvordan til at bære en Shift Dress </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/91139.html" title="Sådan oprettes en Vista Sidebar Gadget " target="_self">Sådan oprettes en Vista Sidebar Gadget </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/91222.html" title="Sådan oprettes en billedsøgning på en hjemmeside " target="_self">Sådan oprettes en billedsøgning på en hjemmeside </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="20" valign="top"></td>
<td width="375" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm">Anbefalede Artikler </td>
</tr>
</table>
<table width="95%" height="207" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/visual-basics-programming/95089.html" title="Sådan omdøbes en mappe i VB6 " target="_self">Sådan omdøbes en mappe i VB6 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/cc-programming/85494.html" title="Sådan bruges OpenGL til C Sprog " target="_self">Sådan bruges OpenGL til C Sprog </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/java-programming/90340.html" title="Sådan bruges Stregkoder i Java " target="_self">Sådan bruges Stregkoder i Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/php-mysql-programming/91673.html" title="Hvordan kan man se DB2 til Round et nummer " target="_self">Hvordan kan man se DB2 til Round et nummer </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/php-mysql-programming/91635.html" title="Antallet af ord i en PHP String " target="_self">Antallet af ord i en PHP String </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/php-mysql-programming/91710.html" title="Sådan Drej MySQL Slow Query Log " target="_self">Sådan Drej MySQL Slow Query Log </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/java-programming/90557.html" title="Java GUI Design Tutorial " target="_self">Java GUI Design Tutorial </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/computer-programming-languages/88149.html" title="Sådan Sortere Silverlight DataGrid " target="_self">Sådan Sortere Silverlight DataGrid </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/90984.html" title="Sådan bruges DIV med JavaScript " target="_self">Sådan bruges DIV med JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/computer-programming-languages/86681.html" title="COBOL Tutorial " target="_self">COBOL Tutorial </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="980" height="8" border="0" cellpadding="0" cellspacing="0">
<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=middle>Copyright © Computer Viden http://www.computerdk.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html> 