Javascript in grado di modificare le informazioni del foglio di stile CSS in una pagina Web , che consente un'immagine per essere spostato in diverse posizioni sulla pagina , in base all'input dell'utente . Un esempio di questo è un HTML , stile e JavaScript dimostrazione che permette un'immagine per essere spostata la pagina in un modo casuale come il cursore del mouse viene posizionato su di esso. Per ottenere ciò, gli attributi posizionali dell'immagine vengono modificate , come si verificano eventi mouseover. Cose che ti serviranno
Text Editor
Browser Web
Show More Istruzioni
1
Aprire un nuovo documento nell'editor di testo . Salvare il file come " moveimage.html . "
2
Scrivi documento codice intestazione
< DOCTYPE HTML PUBLIC " - . ! //W3C //DTD XHTML 1.0 Strict //IT "
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
< html xmlns = " http://www .w3.org/1999/xhtml ">
Sposta immagine < /title> <br> <p> < contenuto meta = " text /html ; . charset = utf-8 "http - equiv =" Content-Type " /> <br> 3 <p> scrittura di codice di stile documento <br> <p> < style type = "text /css " > <br> <p> # immagine <br> <p> { <br> posizione <p> : absolute ; <p> <br> z -index : 0 ; <br> <p> visibility: visible ; <br> <p> top : 10em ; <br> <p> sinistra : 10em ; <br> larghezza <p> : 5em ; <br> altezza <p> : 5em <br> <p> } <br> <p> < /style > <br> 4 <p> Scrivi documento di codice JavaScript . <br> <p> <script type="text/javascript"> <br> <p> var x ; <br> <p> var y ; <br> <p> funzione di pausa ( ms ) per <p> { <br> <p> var data = new Date ( ) ; <br> <p> var CURDATE = null; <br> <p> do { CURDATE = new date (); } <br> <p> mentre ( CURDATE - data < ms) ; <br> <p> } <br> <p> funzione moveImage ( ) per <p> { <br> <p> x = Math.floor ( Math.random ( ) * 40) ; <br> <p> y = Math.floor ( Math.random ( ) * 30 ) ; <br> <p> pausa ( 300 ) . <br> <p> document.getElementById ( "immagine" ) style.top = y + "em" ; <p> <br> document.getElementById ( " immagine em " " ) style.left = x + . " ; <br> <p> } <br> <p> < /script> <br> <p> < /head> <br> 5 <p> Scrivi codice corpo del documento . <br> <p> <body> <br> <p> < img src id = "image" = " http://www.objcom.com/brianb.png " onmouseover = " moveImage ( ) " /> <br> <p> < /body> <br> <p> < /html > <br> 6 <p> Apri questo file nel browser . Spostare il puntatore del mouse sull'immagine , ed esso si sposterà in una nuova posizione sulla pagina . <br> <br>
<ul class="mhjkhjlj">
<li> <a class='LinkPrevArticle' href='/Programmazione/Programmazione-Javascript/1181972.html' >Come nascondere da Class in JavaScript </a></li>
<li> <a class='LinkNextArticle' href='/Programmazione/Programmazione-Javascript/1181976.html' >Come Count Down Utilizzando Javascript </a></li>
</ul>
<div class="deep">
<div class="guanggadsadswqew"><script language='javascript' src='/AD/it3.js'></script></div>
<div class="guanggadsadswqew1"></div>
</div>
<div class="xiangguanleitong">
<div class="vbfdghgjt65f"><h4>Informazioni correlate</h4></div>
<ul>
<li><a href="/Programmazione/Java-Programming/1178190.html" target="_blank">Come Scrivi la tua Simple Message Queue Java </a></li><li><a href="/Programmazione/Java-Programming/1178382.html" target="_blank">Come costruire un file jar con build.xml </a></li><li><a href="/Programmazione/Nozioni-di-base-di-Visual-Programming/1190572.html" target="_blank">Come verificare se un TextBox è vuota in VB </a></li><li><a href="/Programmazione/Computer-Programming-Languages/1177404.html" target="_blank">Informatica Fondamenti Tutorial </a></li><li><a href="/Programmazione/Java-Programming/1177978.html" target="_blank">Java non trova il simbolo con Metodo Out </a></li><li><a href="/Programmazione/Nozioni-di-base-di-Visual-Programming/1190070.html" target="_blank">Come usare i loop in VB6 </a></li><li><a href="/Programmazione/Computer-Programming-Languages/1176036.html" target="_blank">Come utilizzare Xcopy per clonare un disco </a></li><li><a href="/Programmazione/Nozioni-di-base-di-Visual-Programming/1191482.html" target="_blank">Come caricare più immagini in ASP Net </a></li>
</ul>
</div>
</div>
</div>
<div class="woshiyouleirog">
<div class="zxtjianasd">
<div class="bidssdfjm3"><h4>Articoli consigliati</h4></div>
<div class="dasdcdfurit33">
<ul>
<li><a href="/Programmazione/Programmazione-Javascript/1181630.html" target="_blank">Come fare tutti i pulsanti radio Falso in JavaScript </a></li><li><a href="/Programmazione/Programmazione-Javascript/1182094.html" target="_blank">Come prova di un array vuoto con JavaScript </a></li><li><a href="/Programmazione/Programmazione-Javascript/1181702.html" target="_blank">Come aggiornare le variabili di sessione </a></li><li><a href="/Programmazione/Programmazione-Javascript/1182300.html" target="_blank">Come implementare un distruttore di base in Javascript </a></li><li><a href="/Programmazione/Programmazione-Javascript/1182574.html" target="_blank">Come utilizzare più file JavaScript in coordinamento con l'altro </a></li><li><a href="/Programmazione/Programmazione-Javascript/1182426.html" target="_blank">Come controllare per vuoto VAR in Javascript </a></li><li><a href="/Programmazione/Programmazione-Javascript/1182256.html" target="_blank">Perché ricevo un messaggio di Javascript Void </a></li><li><a href="/Programmazione/Programmazione-Javascript/1181816.html" target="_blank">Come fare il supporto JavaScript per annunci di scorrimento </a></li><li><a href="/Programmazione/Programmazione-Javascript/1181848.html" target="_blank">Definizione di variabile esiste in JavaScript </a></li><li><a href="/Programmazione/Programmazione-Javascript/1181914.html" target="_blank">Onmouseover Stili </a></li>
</ul>
</div>
</div>
<div class="guanggandgsa32a"> </div>
<div class="huosirengs">
<li><a class='childclass' href='/Programmazione/C--C-----Programming/' target="_self">C /C + + Programming</a></li> <li><a class='childclass' href='/Programmazione/Computer-Programming-Languages/' target="_self">Computer Programming Languages</a></li> <li><a class='childclass' href='/Programmazione/Delphi-Programming/' target="_self">Delphi Programming</a></li> <li><a class='childclass' href='/Programmazione/Java-Programming/' target="_self">Java Programming</a></li> <li><a class='childclass' href='/Programmazione/Programmazione-Javascript/' target="_self">Programmazione Javascript</a></li> <li><a class='childclass' href='/Programmazione/PHP--MySQL-Programmazione/' target="_self">PHP /MySQL Programmazione</a></li> <li><a class='childclass' href='/Programmazione/Perl-Programming/' target="_self">Perl Programming</a></li> <li><a class='childclass' href='/Programmazione/Python-Programming/' target="_self">Python Programming</a></li> <li><a class='childclass' href='/Programmazione/rubino-Programmazione/' target="_self">rubino Programmazione</a></li> <li><a class='childclass' href='/Programmazione/Nozioni-di-base-di-Visual-Programming/' target="_self">Nozioni di base di Visual Programming</a></li>
</div>
</div>
</div>
<div class="dsadsafa-da">
<p class="sdqwfwe42"> </p>
<p class="vbnhg654">Programmazione © www.354353.com</p>
<p class="iop8iud"> </p>
</div>
</div>
</body>
</html>