Muutuv hiirekursori Javascript

muutmine hiirekursori on lihtne viis jazz veebilehe jahedad eriefektid.Hiirekursori stiile saab parandada oma veebilehe kasutatavust, pakkudes oma kasutajatele täiendavat visuaalset tagasisidet, eriti keerulisemate kirjutasid veebilehti nagu mängud ja interaktiivsed kaardid.Javascript saab muuta hiirega stiili, lastes teil muuta hiirekursori põhineb tänase kuupäevaga, ilmateade või peaaegu kõike muud, mida võib ette kujutada.Tehnikat kasutades Javascript, HTML ja CSS koostööd, et luua dünaamilisi veebilehti on DHTML (Dynamic HTML).

Basic hiirekursorid

  • On mitmeid vaikimisi hiirekursorid, mida saab kasutada, muutes stiili lehe element või dokumendi keha.Need kursor stiilid sisaldavad default, Ristiku küljest liikuda, teksti, wai ja abi.Vaadake "CSS kursor Property" seotud Resources kõik üksikasjad kõigi põhiline kursor stiile.Kursor stiilis kuvatakse varjutavad elemendi abil saab seada CSS, nagu see näiteks:

    & lt; a style = \ "kursori: ristikujuline \" href = \ "# \" &

    gt; Cross-juuksed & lt; / a & gt;

Custom hiirekursorid

  • Lisaks põhi kursorid, custom kursorid saab kasutada seades kursor stiilis aadressile kursor fail või pilt, nagu näiteks:

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

    Browser toetust kursor stiile ja failitüüpe on vastuoluline.Näiteks Internet Explorer ootab kursor faile .cur või .ani laiendusi.Firefox ei meeldi animeeritud kursorid (.ani faile), ning loodab põhi kursor loetleda lisaks kursor või pildifail.Parima tulemuse hulgast brauserid, annab kursori faili (.cur või .ani), pildifail (PNG, JPEG või GIF) ning põhilised kursori tüüp varuvariant.See näide kasutab animeeritud kursor selle esimene valik, sile kursor faili teine ​​valik ja vaikimisi põhi kursor viimaseks varuvariant võimalus.Brauser püüab iga võimalust, kuni ta leiab ühe ta saab kasutada.

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

    Rubriigis "Avalikud kursor Library" seotud Resources pakub tasuta, no-kiusame hiirekursori kogudest.

muutmine kursori Style koos Inline Javascript

  • saab muuta hiirega CSS ja JavaScript.On mitmeid HTML seotud tunnused hiir meetmeid saate täita Javascript kui hiir on klõpsatud, liigutada või hõljus veebilehe element.Paar need omadused on:

    onmouseover: hiirekursorit hõljub üle element
    onmousedown: hiirenuppu all
    onmouseup: Mouse nuppu vabaneb
    onMouseOut: liigub hiir ära elemendi
    onclick: Mouse nuppu klõpsanud
    ondblclick: Mouse nupputopelt klõpsatud

    Vaadake "Event atribuudid" link Resources rohkem sündmus atribuute saate lisada Javascript tegevusi.

    Lisa Javascript meetmeid sündmus, nagu hiir üle, seades lihtsalt atribuudi väärtust Javascript koodi soovid täide.Selles näites kursor muutub põhi "abi" kursor, kui hiirekursor lingile:

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

Fun funktsioonid

  • Mõnikord sa tahad teha rohkem kui mahub hästi hiire tegevus atribuut.Kirjutades kõik oma tegevused Javascript funktsiooni, saate tuupima kõik oma koodi ülaosas oma HTML dokumenti ning põhjustada kursori magic juhtuda lihtne funktsioon kõne korral atribuut.See lihtne Javascript funktsiooni kursor stiili veebilehe element möödunud aastal, kui parameeter "el":

    funktsiooni setElementCursor (el) {
    el.style.cursor = \ & amp; quot; URL (3DArrow.cur), ristikujuline \ & amp; quot;

    GO

    }

    See funktsioon asub skript osa päises dokument (& lt; head & gt; ja & lt; / head & gt; sildid) või välise Javascript koodi faili viidatud dokumendi päises.Et seda funktsiooni kasutada, kõne funktsioon märgusõnaga "see" on sündmus atribuut HTML tag.Funktsiooni saab viitega veebilehe element seotud hiirega juhul ja muudab kursor stiilis.Näiteks siis, kui hiirekursor see seotud teksti, kursor ekraanil on määratud funktsiooni:

    & lt; a onmousemove = \ "javascript: setElementCursor (seda); \" href = \ "# \" & gt;Seadke kursor selle link & lt; / a & gt;

    Saate muuta ka peamine kursor mis kuvatakse kursor varjutavad veebilehe tausta.See Javascript funktsioon, mis seab hiirekursori peamise veebilehe keha põhineb väärtus läks funktsiooni parameeter "curtype":

    funktsiooni setMainCursor (curtype) {
    lüliti (curtype) {
    juhul \ & amp; quot; laadimine\ & amp; quot;: Document.body.style.cursor = \ & amp; quot; URL (working.ani), URL (working.png), oodake \ & amp; quot;;murda

    GO

    juhul \ & amp; quot; keelatud \ & amp; quot ;: document.body.style.cursor = \ & amp; quot; URL (unavailable.ani), URL (unavailable.png), default \ & amp; quot;;murda

    GO

    juhul \ & amp; quot; default \ & amp; quot ;:
    default: document.body.style.cursor = \ & amp; quot; URL (arrow.cur), default \ & amp; quot;

    GO

    }
    }

    Et seda funktsiooni kasutada, kõne funktsiooni väärtus "laadimist" "keelatud" või "default" sündmusest atribuut HTML tag.Näiteks seda vormi esitama nuppu kutsub funktsioon seada kursor "laadimine", kui klõpsad nupule:

    & lt; input type = \ "esitada \" onclick = \ "javascript: setMainCursor (" laadimist "); \"/ & gt;

    Ei ole piiranguid, mida saate teha Javascript funktsioonid.Sõna funktsiooni täidab pöördloendusega muutes peamised hiirekursori iga teine ​​oma kursoripildi praeguse seotud count.SetTimeout funktsiooni kasutatakse põhjustada funktsiooni magada üheks sekundiks enne seda nimetatakse uuesti ajakohastatud count.

    funktsiooni doCountdownCursor (loe) {
    document.body.style.cursor = \ & amp; quot; URL (\ & amp; quot; + count + \ & amp; quot; .ani), URL (\ & amp; quot; + count +\ & amp; quot; .png), oodake \ & amp; quot;

    GO

    count--

    GO

    if (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), default \ & amp; quot;

    GO

    }
    }

    On veebilehel, siis kasutage seda funktsiooni on hiirekursori loendama alates 10. kui vormis esitada nupule vajutamist.

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

Resources

  • CSS kursor Property
  • Event atribuudid
  • Open kursor Raamatukogu
257
0
2
Java Script Programmeerimine