Pridėkite didinimo efektą savo tinklalapyje, naudodami jfMagnify
Yra daug nemokami priartinimo priedai tai puikiai veikia. Tačiau dauguma jų yra sukurta vaizdams ir jie nurodo Tik vaizdo turinys.
Ką daryti, jei galėtumėte pridėti didinamąjį efektą prie kiekvienos svetainės dalies? Ačiū jfMagnify, tu gali.
Tai yra nemokamas jQuery įskiepis kuri palaiko ne tik vaizdo priartinimą, bet ir visą puslapio mastelio keitimą. Tai vienas iš nedaugelio įskiepių, kurie taip pat leidžia jums pasirinkite didinimo lygį ir palaiko liesti įvykius mobiliesiems vartotojams.
Atminkite, kad šis įskiepis gali jaustis šiek tiek sunkus, nes jis priklauso nuo dviejų priklausomybių: reguliarus jQuery ir jQuery UI. Šie abu veiksmai yra būtini norint, kad jfMagnify veiktų tinkamai. Jau nekalbant apie faktinis jfMagnify scenarijus turėsite įtraukti į savo puslapį.
Sąranka yra šiek tiek sudėtinga, nes galite nukreipti tik padidintus elementus konteinerio viduje. Jei norite nukreipti visą puslapį, kurį reikia įtraukti visą savo svetainę.
Štai kaip viena „JQuery“ linija atrodytų:
$ („. didinti“). jfMagnify ();
Šie tikslai visi elementai .padidinti
konteinerį kuris paprastai yra a div
elementas.
Šie vidiniai elementai gali būti vaizdai, bet taip pat apima nedidelį spausdinimą, pvz., svetainių sąlygose arba privatumo politikos puslapiuose. Visi dokumentai yra „GitHub“ repo, taigi, kai ją nustatysite, visas procesas tampa daug paprastesnis.
Be to, šis įskiepis yra labai nepastovus ir ateina daug konteinerių taisyklių. Pavyzdžiui, konteinerio elementas negali turėti statinės CSS pozicijos, todėl jis turi būti santykinis, absoliutus arba fiksuotas.
Tu gali suraskite visas numatytųjų stiliaus taisykles „GitHub“ repo, tačiau gali būti sunku pritaikyti, jei jūsų išdėstymas jau yra sukurtas ir veikia. JfMagnify nauda yra man verta. Tikrai tai priklauso nuo jūsų poreikių ir ar jums patinka sąsaja.
Pažvelkite į „GitHub“ dokumentus, kad pamatytumėte, ką manote. Ir jūs taip pat galite peržiūrėti sąsają „CodePen“, jei prieš diegdami ją norite matyti biblioteką.