Šajā stundā mēs uzskatām, ka loga objekta īpašības, ar kurām jūs varat iegūt pārlūkprogrammas loga darba zonas lielumu (innerwidth un innerheight), paša loga lielums (ārējais un ārējais stāvoklis), tās atrašanās vieta Attiecībā uz lietotāja ekrāna augšējo kreiso stūri (ekrānuzdevējs un ekrāns) un pozīcijas ritiniet (pagathffset un pagelyoffset).
Innerwidth un Innerheight īpašības
Tie ir paredzēti, lai iegūtu pārlūkprogrammas redzamā darbvietas loga izmērus. Tiem. Innerwidth un Innerheight īpašības ir paredzētas, lai iegūtu platumu un augstumu platības, kurā tiek parādīts HTML dokuments. Šīs īpašības ir tikai lasāmas un atgriežas pikseļos.
Piemēram, iegūstiet pārlūkprogrammas redzamā darbvietas loga augstumu un platumu:
Redzamā skata loga platums (widthcontenarea):
Redzamā skata loga platums (augstumscontenarea):
Ātrās un ārējās īpašības
Tie ir paredzēti, lai iegūtu visu pārlūkprogrammas loga lielumu, t.i. Ieskaitot rīkjoslas, ritināšanas joslu, statusa joslu, logu robežas utt. Ārējais un ārējās īpašības ir tikai lasāmas un atgriezās loga platums un augstums pikseļos.
Piemēram, iegūstiet pārlūkprogrammas loga augstumu un platumu:
Pārlūka Windows platums (WIDTHWINDOW):
Pārlūka logu augstums (Heighvindow):
Rekvizīti Screenleft (Screencx) un Screenont (Screeny)
Tie ir paredzēti, lai iegūtu pārlūka loga vai dokumenta kreisā augšējā leņķa koordinātas lietotāja ekrāna augšējā kreisajā stūrī.
Šajā gadījumā ekrānuzdevējs darbojas programmā Internet Explorer, un ekrāna īpašības un ekrānšā Mozilia Firefox. Chrome, Safari pārlūkprogrammās un citās līdzīgās pārlūkprogrammās var izmantot gan ekrānuzju un Screenont īpašības, gan ekrāna un ekrānšo īpašību īpašības.
Lietojot šīs īpašības, ir jāņem vērā fakts, ka dažas pārlūkprogrammas var atgriezt dokumenta augšējā augšējā leņķa koordinātu, un dažas pārlūkprogrammas koordinē loga augšējo kreiso stūri. Screenleft Rekvizīti (Screencx) un Screenont (Screency) ir tikai lasāmi un atgriezās attāluma vērtības salīdzinājumā ar kreiso stūri horizontāli un vertikāli pikseļos.
Piemēram, izņemiet ziņojuma X un pašreizējā pārlūkprogrammas loga kreisajā stūrī, salīdzinot ar ekrāna augšējo kreiso stūri:
Uzziniet koordinātas
PageXoffset īpašības (Scrollx) un Pagetyoffs (Scrollx)
Tie ir paredzēti, lai iegūtu vairākus pikseļus, uz kuriem dokuments tika ritināts horizontālā (pagNeffs) vai vertikālā (pagetyoffs) virzienā relatīvā augšējā kreisā stūrī loga. Īpašības Scrollx un ritināšana ir ekvivalenti atbilstoši Pagexoffseta un Page tiedoffeta īpašībām. Šīs īpašības ir lasīt tikai.
Piemēram, lai parādītu to pikseļu skaitu, uz kuru dokuments tika ritināts horizontālā (PageXoffset) un vertikālā (pagetyoffset) virzienā.
Uzziniet ritināšanas joslas pozīcijas
Sveiki! Turpinot tēmu šajā nodarbībā, mēs izskatīsim šādu jautājumu kā tīmekļa lapu, ritinot un manipulēt pārlūkprogrammas izmērus. Kā es varu atrast pārlūkprogrammas platumu? Kā ritināt JavaScript mājas lapu? Atbildes uz šiem jautājumiem, es domāju, ka jūs atradīsiet šajā nodarbībā.
Browser loga redzamās daļas platums / augstums
Elementa klientu / augstuma īpašības ir tikai redzamās loga platuma platums / augstums.
Nav logs.Innerwidth / augstums
Jāatzīmē, ka visas pārlūkprogrammas, izņemot IE8, var arī atbalstīt logu īpašības.Innerwidth / Innerheighight. Tie saglabā pašreizējo loga izmēru.
Kāda ir atšķirība? Tu jautā. Tas noteikti ir mazs, bet ārkārtīgi svarīgs.
Clientwidth / Augstuma rekvizīti, ja ir ritināšanas josla, atgrieziet platumu / augstumu iekšpusē, kas ir pieejama visam dokumentam un logiem. Iernerwidth / augstums - ignorēs tās klātbūtni.
Ja lapas labajā pusē ir ritināšanas josla, tad šīs līnijas noņems atšķiras:
Brīdinājums (logs.innerwidth); // visu pilnu brīdinājuma loga platumu (document.dvumentelement.clientwidth); // Platums Mazāk ritiniet
Parasti mēs esam ieinteresēti tikai pieejamajā loga platumā, piemēram, lai izdarītu kaut ko, tas ir, mīnus ritjosla. Tādēļ bieži tiek izmantots dinamentelement.Clientwidth.
Web lapas platums / augstums, ņemot vērā ritināšanu
Jā, teorētiski, redzamā lapas daļa ir dinamonelement.clientwidth / augstumu, bet pilna izmēra, ņemot vērā ritjoslu, ir pēc analoģijas, dinamelement.scrollwidth / scrolleight.
Tas attiecas uz visiem parastajiem posteņiem.
Bet lapā ar šīm īpašībām var būt problēma, kad ritināšana ir tur, tad tas nav. Šajā gadījumā viņi strādā nepareizi. Man jāsaka, ka Chrome / Safari un Opera pārlūkprogrammās, ja nav ritināšanas joslas, vērtība Dokumentelement.Scrolleight šajā gadījumā var pat būt mazāks par dumentselement.clientheight, kas, protams, izskatās kaut kas nav loģisks
Šī problēma var rasties konkrēti dokumentuelementam.
Bet ir iespējams droši noteikt lapas lielumu, ņemot vērā ritināšanu, vienkārši veicot maksimumu šīm vairākām īpašībām:
Var scrollvisota \u003d math.max (document.by.scrollvisota, doctor.documentelement.Scrolleight, doctod.by.offsetvisota, doctor.documentelement.offsetheight, document.body.clientvisota, doctor.documentelement.ClientVisight); Brīdinājums ("augstums, ņemot vērā ritiniet:" + scrollvisota);
Pašreizējā ritināšanas iegūšana
Ja parastajam elementam ir pašreizējais ritināšana Scrolllft / Scrollopop.
Kā ar lapu?
Fakts ir tāds, ka lielākā daļa pārlūkprogrammu pareizi apstrādās dokumentuelement.Scrolllell / top vaicājumu, tomēr Safari / Chrome / Opera ir kļūdas, jo jums vajadzētu izmantot Document.Byting.
Nu, lai pilnībā apietu šo problēmu, varat izmantot loga īpašības.Pagexoffset / pagetyoffset:
Brīdinājums ("pašreizējā ritināšana no augšas:" + window.pageyoffs); Brīdinājums ("Pašreizējā ritināšana pa kreisi:" + Window.Pagexoffset);
Šīs visas īpašības:
- IE8 netiek atbalstīts.
- Viņi var tos izlasīt tikai, bet nav iespējams mainīt.
Ja IE8 nav noraizējusies, mēs vienkārši izmantojam šīs īpašības.
Pārrobežu pārlūkprogrammas versija ar IE8 nodrošina iespēju uz dokumentuelementu:
Var scrolltop \u003d window.pageyoffset || document.documentelement.Scrolltop; Brīdinājums ("Pašreizējais ritināšana:" + ScrollTop);
Ritiniet Mainging Lapa: Scrollto, Scrollby, Scrollintoview
Lai ritinātu lapu, izmantojot JavaScript, tas viss elements ir pilnībā piekrauts.
Parastajiem ScrollTop / Scrolleft elementiem principā varat mainīt, un tajā pašā laikā vienums ritinās.
Neviens neļauj jums tāpat un ar lapu. Visās pārlūkprogrammās, papildus Chrome / Safari / Operai, jūs varat ritināt vienkāršu instalācijas document.Documentelement.Scrolltop, un norādītajā - jums vajadzētu izmantot document.body.scrolltop par to. Un viss darbosies perfekti.
Bet ir vēl viens, universāls risinājums - īpašs ritināšanas metodes lapas logu.Scrollby (X, Y) un logu.Scrollto (Pagec, Paget).
- Scrollby (X, Y) metode ritinās pašreizējās koordinātas.
- Scrollto (pagex, pagverne) metode ritina lapu uz norādītajām koordinātām, salīdzinot ar visu dokumentu. Tas būs līdzvērtīgs Scrollft / ScrollTop īpašību uzstādīšanai. Lai ritinātu sākumā dokumenta, jūs varat norādīt koordinātas (0,0).
scrollindoview.
Elem.Scrolllintoview metode (top) ir jāsauc uz elementa un ritina lapu, lai elements ir līdz augšpusē, ja augšējais parametrs ir taisnība, un apakšā, ja top ir vienāds ar nepatiesu. Turklāt, ja šis top parametrs nav norādīts, tas būs vienāds ar patiesu.
Aizliegums ritiniet
Ir situācijas, kad ir nepieciešams veikt dokumentu ", kas nav saspiests". Piemēram, ja lielais dialoglodziņš tiek parādīts virs dokumenta, lai apmeklētājs varētu ritināt šo logu, bet ne pats dokuments.
Lai aizliegtu lapas ritināšanu, tas ir pietiekami, lai piegādātu dokumentu.Byty.style.overflow \u003d "slēptā" īpašumu.
Dokumenta vietā.Byting, var būt jebkurš elements, kura ritināšana ir jāaizliedz.
Bet šīs metodes trūkums ir tas, ka ritināšanas josla pati pazūd pats. Ja viņa aizņēma kādu platumu, tad tagad šis platums ir atbrīvots, un lapas saturs tiks paplašināts, teksts "Jump", ņemot visu brīvo vietu.
Rezultāti
- Lai iegūtu loga redzamās daļas izmērus, izmanto īpašumu: Document.Dentelement.Clientwidth / Augstums
- Lai ņemtu vērā ritināšanas joslas lielumu, var izmantot: Var scrollheight \u003d math.max (document.by.scrollheight, document.documelement.scrollheight, doctor.body.offsetheight, doctor.doc tabbyeight.offsetheight, doctor.body.clientheight , document.dvumentelement .Clientheight);
Attīstot saskarnes vietnēm, bieži vien ir jāizmanto JavaScript. Protams, tas ir slikti, bet kādā situācijā ir vienkārši neiespējami pilnībā īstenot visu CSS.
Visbūtiskākais vajadzīgs man ir noteikt pārlūka loga platumu vai augstumu turpmākām manipulācijām. Saskaņā ar visu informāciju par šo tēmu.
Kur tas var būt parocīgs?
Es nerunāšu par visiem, bet man ir pārsteigts par integrāciju ar tekstuspattern` visu galeriju veidiem, slīdņiem utt., Kur viss ir rakstīts uz tīra JS. Lietas, kas ir cieši saistītas ar JS ir reti, bet joprojām tiekas, tāpēc šī piezīme parādījās.
Jūs varat definēt 2 veidus: JS vai jQuery.
Platuma vai augstuma noteikšana, izmantojot tīru JS
Tas ir vispiemērotākais veids, jo JavaScript dzinējam ir gandrīz katra mūsdienu pārlūkprogramma. Pat mobilās pārlūkprogrammas iemācījās strādāt ar JS.
Protams, ir iespēja, ka lietotājs apstrādā, lai izslēgtu JS apstrādi pārlūkprogrammā, bet man šķiet, ka šādi "dīvaini cilvēki" nav tik daudz, jo gandrīz katra vietne izmanto visus risinājumus, kas strādā pie JS.
JS, lai noteiktu ekrāna izmēriJums ir jāizmanto funkcijas:
Screen.width // ekrāna platums screen.Height // ekrāna augstums
Šeit ir bezjēdzīga piemērs, izmantojot:
Ja jūs to izmantojat, lai novietotu dažus vienumus lapā, tad labākais risinājums tiks izmantots nevis ekrāna izmērs, bet pārlūkprogrammas logu izmēri. JS tas tiek darīts šādi:
Doctorbody.clientwidth // pārlūkprogrammas platums doctory.body.clientheight // pārlūkprogrammas augstums
Attiecīgi šeit ir bezjēdzīga lietošanas piemērs:
Pārlūka izmēru definīcija, izmantojot jQuery
Personīgi es izmantoju turpmāk aprakstīto metodi. Šī metode darbojas tikai tad, ja esat iepriekš pievienojis Jquery bibliotēku vietnē. Visās vietnēs, kas man jādara šī bibliotēka, ir standarta de / infact.
Lai izmantotu mūsu jQuery uzdevumu, jums jāizmanto kods:
$ (Logs). Platums (); // pārlūkprogrammas platums $ (logs) .Height (); // pārlūkprogrammas augstums
Un beigās es gribētu teikt, ka, ja ir iespējams veikt bez JS un jQuery kopumā vai daļēji, tad ir nepieciešams rīkoties.
Pastāstīt sociālajā. Tīkli
Kas tas ir nepieciešams? Piemēram, mums ir skaists vietnes izkārtojums, ko visi tās skaistumkopšanas eksponāti tikai tad, ja to atrisina, piemēram, 1600 par 1200., piemēram, viņam ir ļoti liela skaista cepure. Kas notiks, ja persona dodas uz vietni ar izšķirtspēju 1024 līdz 768? Jā, tikai cepure būs redzama. Nav labi? Varbūt. Tad kāpēc ne padarīt šādu lietu, ka tad, kad pārlūkprogrammas augstums / ekrāns, cepure vienkārši nogrieztu un devās uz izvēlni un pārējo vietni? In, kas ir nepieciešams.
Patiesībā es aprakstīju vienu no piemēriem, ko es sastopos praksē (skat. Cartigintka). Atrisināja problēmu vienkārši - izmantojot JavaScript. Un varbūt caur jQuery, es neatceros. Es aprakstīšu abas metodes šeit.
Pirmkārt, ir nepieciešams atšķirt definīciju " ekrāna izšķirtspēja"Un" pārlūkprogrammas loga izmērs"(Tā kā dažos rakstos tur bija incidenti - krusa atsevišķi metodes, tie tika piedāvāti citi, lai gan vienā gadījumā es novērtēju pārlūkprogrammas izšķirtspēju, otrā - monitora rezolūciju).
Ir nepieciešams, lai noteiktu no paša sākuma, ka tas ir svarīgāks jums. Šajā gadījumā, piemēram, ar vāciņu, es koncentrējos uz ekrāna izšķirtspēju (monitors): viss tāds pats, vietne ir skaista, ja pārlūkprogrammas logs tiek samazināts manuāli, tad ļaujiet pārlūkprogrammai sākt, skatoties šo vietni (nav nekas ēst apm.). Bet, piemēram, lai pielāgotu paplašināto tēlu Jquery Lightbox galerijā, es izmantoju pārlūkprogrammas platumu un augstumu.
Un pēc tam, kad esat izvēlējies, uzrakstiet kodu, jūs varat vietnes galvenē. Pirmkārt, piemērs orientēts uz ekrāna izšķirtspēja.
3-6 līnijas - tīra JavaScript, 7-11 līnijas - piemērs jQuery. JavaScript metodes tiek izmantotas, lai noteiktu platumu un augstumu. Platums un ekrāns.Height metodes. Kādas rindas ir izgatavotas, skaidras: pirmais skripts nosaka ceļu uz izvēles CSS failu, bet otrs - par kopējo identifikatora bloku, CSS "fona stāvoklis" īpašums atrodas.
Mēs skatāmies uz otro piemēru, bet kas koncentrēsies uz pārlūkprogrammas izšķirtspēju. Tas pats, metodes ir mainījušās.
Tātad, no diviem piemēriem, īss pārskats - ko izmantot, ko:
- screen.width.. Nosaka ekrāna platumu (monitoru).
- screen.Height. Nosaka ekrāna augstumu (monitoru).
- doctor.body.clientwidth.. Nosaka pārlūkprogrammas platumu.
- document.Bybody.Clientheight. Nosaka pārlūkprogrammas augstumu.
- $ (Logs) .Width (). Nosaka pārlūkprogrammas platumu, bet tikai tad, ja jums ir jQuery.
- $ (Logs) .Height (). Nosaka pārlūka augstumu, bet tikai tad, ja jums ir jQuery.
Ir skaidrs, ka, ja izmantojat jQuery, tas ir vēlams 5 opciju nekā 3, un 6, nevis 4 - tie ir īsāki. Nu, un tā - garša un krāsa.
Attiecībā uz konkrētiem augstuma ierakstiem un jQuery - tad, patiesībā, es nezinu tos. Teorētiski 5-6. Tipa rindu dizains būtu, bet kaut kā tas nenotika uz praksi, es dodu man, viņi nav. Jā, un nav nepieciešams, screen.width ir pietiekami īss dizains, tas ir pietiekami.
Jā, joprojām ir $ (dokuments) .Width () - nosaka HTML dokumenta platumu. Izmantojiet praksē - kaut kas apšaubāms. Kas zina - es būšu priecīgs, ja jūs dalīsieties.
Šodien viss! Sekojiet līdzi nedēļas nogalei un masveidā iet uz kebabiem! (Ja vien neesat slims ar kaut ko līdzīgu - apm.). Veiksmi!
