Dator
 |  Startsida |  Hårdvara |  Nätverk |  Programmering |  Programvara |  Felsökning |  System |   
Programmering
  • C /C + + -programmering
  • Computer Programspråk
  • Delphi Programmering
  • Java Programming
  • JavaScript programmering
  • PHP /MySQL Programmering
  • perl Programmering
  • python Programming
  • Ruby programmering
  • Visual Basics Programmering
    		•
    * Dator Kunskap >> Programmering >> JavaScript programmering >> Content

    Hur man flyttar en bild från X & Y i JavaScript
    Javascript kan ändra överlappande uppgifter formatmall på en webbsida så att en bild som ska flyttas till olika positioner på sidan , baserat på användarens input . Ett exempel på detta är en HTML , stil och JavaScript demonstration som gör en bild som ska flyttas runt på sidan på ett slumpmässigt sätt som muspekaren är placerad på det . För att uppnå detta är de positionella attributen av bilden modifieras, såsom mus - över händelser inträffar. Saker du behöver
    Textredigerare
    webbläsare
    Visa fler instruktioner
    1

    Öppna ett nytt dokument i textredigeraren . Spara filen som " moveimage.html . "
    2

    Skriv dokumentets sidhuvud kod

    < 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 " >


    Flytta bild < /title > <br> <p> < meta content = " text /html ; . charset = utf - 8 " http -motsv = " Content - Type " /> Addera 3 <p> Skriv dokument stil kod <br> <p> < style type = " text /css " > <br> <p> # image <br> <p> { <br> <p> position: absolute ; <br> <p> z - index : 0 ; <br> <p> synlighet : synlig ; <br> <p> top : 10EM ; <br> <p> vänster : 10EM ; <br> <p> width : 5em ; <br> <p> höjd : 5em <br> <p> } <br> <p> < /style > <br> 4 <p> Skriv dokument JavaScript -kod . <br> <p> <script type="text/javascript"> <br> <p> var x ; <br> <p> var y , <br> <p> funktionen paus ( ms ) katalog <p> { <br> <p> var datum = new Date ( ) ; <br> <p> var CURDATE = null ; <br> <p> göra { CURDATE = new Date ( ) ;} <br> <p> samtidigt ( CURDATE - datum < ms ) , <br> <p> } <br> <p> funktionen moveImage ( ) katalog <p> { <br> <p> x = Math.floor ( Math.random ( ) * 40 ) ; <br> <p> y = Math.floor ( Math.random ( ) * 30 ) ; <br> <p> paus ( 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 koden dokument kroppen . <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> Öppna denna fil i webbläsaren . Flytta muspekaren över bilden , och det kommer att flytta till en ny plats på sidan . <br> <br> <div class=dad2><script language='javascript' src='http://www.dator.xyz/ad/201310/4.js'></script></div> <div class=dad3><script language='javascript' src='http://www.dator.xyz/ad/201310/33.js'></script></div> </div> </td> </tr> </table> <table class=dhang1 bgcolor="#DEE7EE"> <tr> <td></td> </tr> </table> <div class=dhang7></div> <table width="92%" height="51" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="50%"><p>Tidigare: <a class='LinkPrevArticle' href='http://www.dator.xyz/Programmering/javascript-programming/90986.html' >Hur dölja med klass i JavaScript </a></li></p></td> </tr> <tr> <td width="50%">nästa: <a class='LinkNextArticle' href='http://www.dator.xyz/Programmering/javascript-programming/90988.html' >Hur räkna ner Använda JavaScript </a></li></td> </tr> </table></td> </tr> </table> <div class=dhang7></div> <table class=s770x246 > <tr> <td class=s375x246 ><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"><table class=c1 > <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm"> relaterade artiklar </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="http://www.dator.xyz/Programmering/javascript-programming/90826.html" title="Hur man tar bort jQuery dragspel Styling " target="_self">Hur man tar bort jQuery dragspel Styling </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90884.html" title="Hur spåra med Java Script & PHP " target="_self">Hur spåra med Java Script & PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91019.html" title="Hur man skickar en JavaScript-funktion i en hyperlänk " target="_self">Hur man skickar en JavaScript-funktion i en hyperlänk </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90753.html" title="Hur man gör en meny Dockningsbar Med Javascript " target="_self">Hur man gör en meny Dockningsbar Med Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91127.html" title="Hur man skapar Silverlight Apps Med JavaScript " target="_self">Hur man skapar Silverlight Apps Med JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90781.html" title="Ett nytt fönster blockeras i JavaScript " target="_self">Ett nytt fönster blockeras i JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91036.html" title="Hur du spelar in på en webbkamera från Chatroulette " target="_self">Hur du spelar in på en webbkamera från Chatroulette </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91039.html" title="Hur Split Strängar i JavaScript " target="_self">Hur Split Strängar i JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91236.html" title="Hur vill kolla en ingång heltal JavaScript " target="_self">Hur vill kolla en ingång heltal JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90916.html" title="JavaScript nodtyperna " target="_self">JavaScript nodtyperna </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 class=c3 > <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm">Utvalda artiklarna </td> </tr> </table> <table class=c4 > <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.dator.xyz/Programmering/java-programming/90285.html" title="Definitionen av en begränsning Java Applet " target="_self">Definitionen av en begränsning Java Applet </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/php-mysql-programming/93045.html" title="Hur man skriver in XML-fil med PHP " target="_self">Hur man skriver in XML-fil med PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/94770.html" title="Hur man skapar ett tomt formulär med rullning Använda VB6 " target="_self">Hur man skapar ett tomt formulär med rullning Använda…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/88350.html" title="Hur man överför från Microcontrollers till persondatorer " target="_self">Hur man överför från Microcontrollers till persondat…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/php-mysql-programming/93123.html" title="Hur skapa PDF-filer i PHP " target="_self">Hur skapa PDF-filer i PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/python-programming/93898.html" title="Hur man tar bort Tomma Sublister med Python " target="_self">Hur man tar bort Tomma Sublister med Python </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/95473.html" title="Komma åt Query Uppdatera " target="_self">Komma åt Query Uppdatera </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/php-mysql-programming/92313.html" title="Hur man gör datorn Cookies " target="_self">Hur man gör datorn Cookies </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/96400.html" title="Egenskaperna hos en samling i VBS " target="_self">Egenskaperna hos en samling i VBS </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/96375.html" title="Ställa fastighetsvärden i Visual Basic " target="_self">Ställa fastighetsvärden i Visual Basic </a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table> <div class=dhang8></div> <div class=dhang1></div> <table class=b1> <tr> <td class=bs height=90 align=middle>Copyright © Dator Kunskap http://www.dator.xyz </td> </tr> </table> <div class=dhang1></div> </div> </body> </html>