CSS berøringshandling

Touch-Action CSS-egenskapen spesifiserer hvordan en berøringsskjermbruker kan kontrollere et elements region. Berøringsegenskapen brukes til å endre synet på et valgt element som svar på en endring i kontakten av brukeren som zooming, rulling og så videre. Det er handlingen som er tatt av en berøringsskjermbruker på en bestemt del av skjermen som er valgt. Når berøringsskjermbrukeren berører skjermen og ruller elementet, vil elementet bevege seg i samme retning som brukeren ønsker. Men det er noen forskjellige verdier for denne egenskapen som verdien “Pan-X”. Hvis vi setter denne verdien i egenskapen "Touch-Action", vil brukeren ikke i stand til å flytte elementet i Y-retningen. Dette elementet vil bare bevege seg i x-retningen på grunn av "pan-x" -verdien og det samme med "pan-y", "pan-høyre", "pan-venstre" og så videre.

I denne guiden vil vi vise deg hvordan du setter disse verdiene i egenskapen "Touch-Action" og hvordan den vil fungere. Vi vil diskutere verdiene til egenskapen "Touch-Action" i detalj i de forskjellige eksemplene i denne guiden. Se på de gitte eksemplene og les dem grundig.

Eksempel nr. 1:

Nå utfører vi vårt første eksempel ved å åpne den nye filen i programvaren Visual Studio Code. I Visual Studio -koden, når vi oppretter en ny fil, har vi et alternativ til å velge språket. Vi velger HTML. Først bygger vi HTML -koden. Visual Studio -koden gir oss anlegget til å få de grunnleggende kodene automatisk ved å bare sette “!”Og trykker deretter på“ Enter ”. Så vi bruker dette anlegget og får alle disse grunnleggende taggene.

Start nå fra kroppen og legg til en "div" -beholder som heter "Image Touch-Auto". Inne i denne "Image Touch-Auto" -beholderen bruker vi bildekoden for å legge til bildet. Vi bruker egenskapen "Touch-Action" på dette bildet. Vi legger til “Pic.PNG ”i denne HTML -koden. Etter å ha fullført denne koden, lagrer vi denne og går mot CSS -filen. Ikke glem å koble denne CSS -filen til den gjeldende HTML -filen. For å koble filene, bruker vi "link" -koden i "head" -egenskapen.

Vi setter "kroppen" først og bruker "display" -egenskapen. Verdien vi bruker her er "flex" som er en endimensjonal layout. Deretter setter vi "Flex-Wrap" -egenskapen til "Wrap". Det brukes til å spesifisere at gjenstandene til flex er pakket inn i flere linjer. Etter å ha satt kroppen, beveger vi oss mot "bildet" og begynner å bruke noen egenskaper som vi trenger her. Vi satte diven som heter “Image” “Margin” til “1REM”, og setter en "500px" -verdi for "bredden" på Div "image" og "500px" for "høyden". Vi bruker også egenskapen "over-flow" og setter den til "bla". Den legger til "rullefeltet" for div som heter "image". Vi setter sin "posisjon" til "relativ" og bruker "marginbottom" til "15px". Den brukes til å spesifisere bredden på bunnsiden.

Nå har vi "image img". Så for dette setter vi bare "bredden" og "høyden" og setter verdien til "600px" for hver av dem. Etter alle disse bruker vi egenskapen “Touch-Auto” og setter verdien til “Auto”. Denne bilen brukes til å flytte bildet i alle retninger og gir alle nettleseroperasjoner som gester og panorering. Når berøringsskjermbrukeren berører dette skjermen, vil dette bildet bevege seg i alle retninger.

Vi gir utgangen her der vi viste at dette bildet beveger seg i alle retninger. Vi har også en rullefelt her. Men når berøringsskjermbrukeren bruker dette og berører denne skjermen, vil han/hun flytte dette bildet i alle retninger uansett hvor han/hun vil.

Eksempel 2:

HTML -koden som vi bruker her er den samme som vi brukte i det første eksemplet. Men i dette eksemplet bruker vi egenskapen "Touch-Action" med "Pan-Y" -verdien.

Her setter vi "Display: Flex" og "Flex-Pwrap" for å "pakke" "kroppen". Deretter setter vi "margin" som "1REM" og "bredden" og "høyden" til henholdsvis "700px" og "500px". Nøkkelordet “rulle” er satt her for eiendommen “Overløp”. Og angi "relativ" nøkkelord for "posisjon" -egenskapen til "15px" i "marginbottom". "Bredde" og "høyde" -verdiene til bildet her er "600px" hver. Som vi diskuterte i overheadeksemplet.

Nå bruker vi "Pan-Y" -verdien for "berørings-handling" -egenskapen. Denne "pan-y" begrenser berøringsskjermbrukeren til å flytte dette bildet til Y-retningen. Berøringsskjermbrukeren vil ikke flytte dette bildet i x-retningen fordi vi bruker "Pan-y" som verdien av denne "berørings-handling" -egenskapen.

I utgangen presenterer vi bare en rullefelt for å forstå dette “Pan-Y” -konseptet at det bare vil bevege seg i y-aksen og ikke i x-aksetetningen.

Eksempel nr. 3:

Her er all koden den samme som i forrige eksempel. Men her bruker vi "Pan-X" som verdien av "Touch-Action" -egenskapen. Når vi setter verdien av denne egenskapen som "Pan-X", begrenser den berøringsskjermbrukeren til å flytte dette bildet i x-aksetetningen bare. Hvis brukeren ønsker å flytte dette bildet i y-aksen, skjer det ingenting, og dette bildet vil ikke bevege seg i y-aksen på grunn av "pan-x" -verdien.

Vi gir denne utgangen for deg, slik at du lærer denne "Pan-X" -verdien og ser rullefeltet som viser deg at den bare beveger seg i x-aksen. Når berøringsskjermbrukeren berører dette og flytter den til x-aksen, beveger bildet seg i denne retningen. Men når berøringsskjermbrukeren beveger dette bildet i y-aksen, vil bildet ikke bevege seg i denne y-aksen.

Eksempel 4:

Vi endrer HTML -koden. Her legger vi til et nytt bilde og legger litt avsnitttekst på dette bildet. Vi bruker "Pan-Right" -verdien av egenskapen "Touch-Action" i dette eksemplet.

Alle egenskapene som vi bruker her til "Body", "Image" og "Image IMG" er de samme som det vi brukte i de forrige kodene. Vi legger til de nye egenskapene for teksten som vi skrev på bildet. Vi setter "posisjonen" til avsnittet som heter "type-touch" til "absolutt" og setter sin "bredde" til "100%". Vi justerer teksten i "senteret" ved å bruke "tekst-align" og sette "fontvekt" -egenskapen til "fet" som er et nøkkelord her. Vi setter "130px" "toppen" for avsnittteksten.

Etter dette bruker vi egenskapen "Font-size" og setter "24px" som dens verdi. Vi endrer "font-familiens" i denne avsnittteksten til "Algerie". Deretter bruker vi "Pan-Right" -verdien for "berøringsaksjonen". Når denne verdien brukes til denne egenskapen, lar den berøringsskjermbrukeren bare flytte elementet i riktig retning. Når vi bruker denne eiendomsverdien, vil ikke berøringsskjermbrukeren flytte dette elementet eller bildet i noen annen retning bortsett fra høyre side.

Denne utgangen er gitt slik at du kan lære om "pan-høyre" -verdien og se rullefeltet, som indikerer at den bare vil reise i riktig retning. Bildet beveger seg i denne retningen når berøringsskjermbrukeren beveger det og flytter den til høyre og ikke beveger seg i noen annen retning. Når berøringsskjermbrukeren bruker dette, vil den ikke kunne flytte den til venstre, opp, til høyre eller annen retning bortsett fra riktig retning.

Konklusjon

Hensikten med å skrive denne guiden er å gi deg et klart konsept av "Touch-Action" -egenskapen i CSS. Vi forklarte dette konseptet i detalj og ga deg de forskjellige eksemplene der vi benyttet denne "berørings-action" -egenskapen. Vi brukte også de forskjellige verdiene for denne egenskapen i hvert eksempel. Vi diskuterte at denne egenskapen brukes til å spesifisere hvordan en berøringsskjermbruker kan kontrollere elementets region. Når vi bruker denne egenskapen med forskjellige verdier, vil det spesifiserte elementet bevege seg i henhold til den verdien som vi setter i denne "berørings-action" -egenskapen. Vi brukte de fire forskjellige verdiene i de fire forskjellige eksemplene. De resterende verdiene fungerer på samme måte som navnene deres som verdien “pan-up” bare beveger seg i oppadgående retning. Jeg håper du vil lære denne "Touch-Action" CSS-egenskapen etter den dype læringen av denne guiden, og det vil være nyttig for deg.