VaihtaminenHiiren osoitin Javascript

muuttaminen hiiren kursori on helppo tapa piristää Web-sivun hauskoja erikoistehosteita.Hiiren kursori tyylejä voidaan parantaa Web-sivun käytettävyyttä tarjoamalla käyttäjille ylimääräisiä visuaalista palautetta, erityisesti monimutkaisempia käsikirjoittanut verkkosivuja kuten pelejä ja vuorovaikutteisia karttoja.Javascript voidaan muuttaa hiiren kursori tyyli, joten voit muuttaa hiiren kursori perustuu tänä päivänä, säätiedotus tai lähes mitään muuta voit kuvitella.Tekniikka JavaScriptin avulla, HTML ja CSS yhdessä luoda dynaamisia Web-sivuja on DHTML (Dynamic HTML).

Perus hiiri Osoittimet

  • On olemassa useita oletus hiiren kursoria, jota voidaan käyttää muuttamalla tyyli sivun elementin tai dokumentin runko.Näitä kohdistin tyylit ovat oletuksena, ristikko, käsi, liikkua, tekstiä, wai ja apua.Katso "CSS kursori Property" sidoksissa Resurssit täydelliset tiedot kaikista perus kursorin tyylejä.Kursori tyyli näkyviin, kun leijailee yli elementti voidaan asettaa CSS, kuten täs

    sä esimerkissä:

    & lt; style = \ "kursori: ristikko \" href = \ "# \" & gt; Cross-hiukset & lt; / a & gt;

Custom hiiren kursoria

  • lisäksi perus osoittimet, custom osoittimet voidaan käyttää asettamalla kursori tyyli osoitteen kohdistin tiedoston tai kuvan, kuten seuraavassa esimerkissä:

    & lt; tyyli= \ "kohdistin: URL (arrow.cur), default \" href = \ "# \" & gt; muokatuista & lt; / a & gt;

    Selain tukee kursorin tyylejä ja tiedostotyyppejä on epäjohdonmukainen.Esimerkiksi Internet Explorer odottaa kursori tiedostoja .cur tai ANI laajennuksia.Firefox ei pidä animoituja kursoreita (ANI tiedostot), ja odottaa perus kursori on lueteltu lisäksi osoitin tai kuvatiedoston.Saat parhaat tulokset keskuudessa selaimet, tarjoavat kursori tiedosto (.cur tai ANI), kuvatiedosto (PNG, JPEG tai GIF), ja perus kursori tyyppi siltä varalta.Tämä esimerkki käyttää animoitu kursori sen ensimmäinen valinta, tavallinen kursori tiedosto toinen vaihtoehto ja oletuksena perus kursori kuin lopullinen alibi.Selain yrittää kukin vaihtoehto, kunnes se löytää yhden se voi käyttää.

    & lt; style = \ "kohdistin: URL (arrow.ani), URL (arrow.cur), default \" href = \ "# \" & gt; muokatuista & lt; / a & gt;

    "Avaa Cursor Library" liittyy Resurssit osio tarjoaa ilmaisen ja vaivattoman hiiren kursori kokoelmista.

muuttaminen kohdistimen tyyli kanssa Inline Javascript

  • Voit muuttaa hiiren osoittimen CSS Javascript.On olemassa useita HTML attribuutteja liittyvät hiiritoiminnot voit suorittaa Javascript kun hiiri on napsautetaan, siirretty tai pysytellyt yli sivun elementti.Muutama näistä ominaisuuksista ovat:

    onmouseover: Hiiren osoitin leijuu elementti
    onmousedown: hiiren painiketta painettuna
    onmouseup: hiiren painike vapautetaan
    onmouseout: Hiiren osoitin liikkuu pois elementin
    onclick: Hiiri-painiketta napsautetaan
    ondblclick: Hiiri-painikettakaksinkertainen napsautetaan

    Katso "Tapahtuma määritteet" linkkiä Resurssit lisää tapahtuma attribuutteja voit lisätä Javascript toimia.

    Lisää Javascript toimia tapahtuman, kuten hiiren-over, yksinkertaisesti asettamalla määritteen arvoksi JavaScript-koodia haluat suorittaa.Tässä esimerkissä, kursori muuttuu perus "auttaa" kohdistin kun hiiren leijuu linkin:

    & lt; onmouseover = \ "this.style.cursor =" auttaa "; \" href = \ "# \"& gt; Apua & lt; / a & gt;

hauskaa Toiminnot

  • Joskus haluat tehdä enemmän kuin mukavasti mahtuu hiiri ominaisuus.Kirjoittamalla kaikki toimia JavaScript-toiminto, voit ahtaa kaikki koodi yläreunassa HTML asiakirjan, ja aiheuttaa kohdistin taikuutta tapahtuu yksinkertainen funktio puhelun tapahtuma ominaisuus.Tämä yksinkertainen JavaScript-toiminto kursori muuttuu tyyli sivun elementti hyväksyttiin kuin parametri "el":

    toiminto setElementCursor (EL) {
    el.style.cursor = \ & amp; quot; URL (3DArrow.cur), ristikko \ & amp; quot;

    GO

    }

    Tämä toiminto sijaitsee kirjoitus osassa otsikossa asiakirjan (& lt; head & gt; & lt; / head & gt; tunnisteet), tai ulkoisen JavaScript-koodia tiedosto viitataan otsikossa asiakirjan.Voit käyttää tätä toimintoa, soita toiminto kanssa avainsanan "tämä" tapahtumasta määritteen HTML-koodi.Funktio vastaanottaa viittaus sivun liittyvälle hiiren tapahtumaan, ja muuttaa kursori tyyli.Esimerkiksi kun hiiren osoitin liikkuu tänä liittyy teksti, kohdistin näytössä voi vahvistaa toiminto:

    & lt; onmousemove = \ "javascript: setElementCursor (tämä), \" href = \ "# \" & gt;Aseta kursori tämän linkin & lt; / a & gt;

    Voit myös muuttaa tärkein kohdistin joka näytetään, kun kohdistin leijuu sivun tausta.Tämä JavaScript-toiminto, joka asettaa hiiren kursori varten web-sivun rungon arvon perusteella johdetaan toimivat parametri "CurType":

    toiminto setMainCursor (CurType) {
    kytkin (CurType) {
    tapauksessa \ & amp; quot; loading\ & amp; quot;: Document.body.style.cursor = \ & amp; quot; URL (working.ani), URL (working.png), odota \ & amp; quot;;rikkoa

    GO

    tapauksessa \ & amp; quot; kielletty \ & amp; quot ;: document.body.style.cursor = \ & amp; quot; URL (unavailable.ani), URL (unavailable.png), oletus \ & amp; quot;;rikkoa

    GO

    tapauksessa \ & amp; quot; oletus \ & amp; quot ;:
    oletusarvo: document.body.style.cursor = \ & amp; quot; URL (arrow.cur), oletus \ & amp; quot;

    GO

    }
    }

    haluat käyttää tätä toimintoa, soita toiminnon arvoa "loading", "kielletty" tai "default" tapahtumasta määritteen HTML-koodi.Esimerkiksi tämä lomake Lähetä-painiketta puhelut toiminto asettaa kursori "loading" kun nappia painetaan:

    & lt; input type = \ "Lähetä \" onclick = \ "javascript: setMainCursor (Ladataan); \"/ & gt;

    Ei mitään rajaa, mitä voit tehdä Javascript-toimintoja.Seuraavat toiminto tekee lähtölaskenta muuttamalla tärkein hiiren kursori joka toinen kohdistin liittyvä kuva nykyinen määrä.SetTimeout toimintoa käytetään aiheuttamaan toiminto nukkua toinen ennen sitä kutsutaan jälleen päivitetty määrä.

    toiminto doCountdownCursor (count) {
    document.body.style.cursor = \ & amp; quot; URL (\ & amp; quot; + count + \ & amp; quot; ANI), URL (\ & amp; quot; + count +\ & amp; quot; .png), odota \ & amp; quot;

    GO

    count--

    GO

    jos (count & gt; 0) {
    setTimeout (\ & amp; quot; doCountdownCursor (\ & amp; quot; + count + \ & amp; quot;) \ & amp; quot ;, 1000)

    GO

    }
    else {
    document.body.style.cursor = \ & amp; quot; URL (arrow.cur), oletus \ & amp; quot;

    GO

    }
    }

    Webissä sivulla, käytä tätä toimintoa on hiiren kursori laskea alaspäin 10 kun lomake Lähetä-painiketta napsautetaan.

    & lt; input type = \ "Lähetä \" onclick = \ "javascript: doCountdownCursor (10); \" / & gt;

Resurssit

  • CSS Cursor Kiinteistön
  • Tapahtuma määritteet
  • Open Cursor Kirjasto
625
0
2
Java Script Ohjelmointi