hjemme jQuery Cycle Plugin. Sjekk ut Cycle2 den siste i Cycle Line of Slideshows. JQuery Cycle Plugin er et lysbildefremstillingsplugin som støtter mange forskjellige typer overgangseffekter. Det støtter pause-on-hover, auto-stopp, automatisk tilpasning, før etter tilbakeringinger, klikk triggere og mye mer. Det støtter også, men krever ikke, Easing Plugin. Hvordan fungerer det. Pluggen gir en metode som kalles syklus som påberopes på et beholderelement. Hvert barnelement i beholderen blir et lysbilde hvordan og når lysbildene er overført. skrollRight click. Images brukes i disse demoene fordi de ser kult ut, men lysbildefremvisninger er ikke begrenset til bilder. Du kan bruke hvilket som helst element du vil ha. Browse Effects. Use Effects Browser-siden for å forhåndsvise de tilgjengelige effektene. Se flere demoer og eksempler. Cycle Plugin gir mange muligheter for å tilpasse lysbildefremvisningen. Standardverdiene kan overstyres ved å sende et alternativobjekt til syklusmetoden ved å bruke metadata på containe r-elementet, eller ved å omdefinere verdiene i din egen kode. For mer om alternativer, se Valgreferanse-siden. Spesielt takket være Torsten Baldes Matt Oakes og Ben Sterling for de mange ideene som fikk meg til å begynne å skrive Cycle i 2007.A streng som indikerer hvilken lettelsesfunksjon som skal brukes til overgangen. Boolsk indikerer om du vil plassere animasjonen i effektkøen. Hvis falsk, begynner animasjonen umiddelbart. Ved jQuery 1 7 kan køalternativet også akseptere en streng, i hvilket tilfelle animasjonen legges til køen som er representert av den strengen Når et egendefinert kønavn brukes, starter animasjonen ikke automatisk. Du må ringe kjønnnavn for å starte den. Et objekt som inneholder en eller flere av CSS-egenskapene som er definert av egenskapsargumentet og deres tilhørende lettelsesfunksjoner versjon lagt til 1 4. En funksjon som skal kalles for hver animert egenskap av hvert animert element Denne funksjonen gir en mulighet til å endre Tween-objektet for å endre verdien av eiendommen før det settes. En funksjon som skal kalles etter hvert trinn av animasjonen, bare én gang per animert element uavhengig av antall animerte egenskaper versjon lagt til 1 8. En funksjon som kalles når animasjonen på et element er fullført. En funksjon å ringe når animasjonen på et element begynner versjon lagt til 1 8. En funksjon som skal kalles når animasjonen på et element fullfører sitt Promise-objekt er løst versjon lagt til 1 8. En funksjon som skal kalles når animasjonen på et element ikke fullfører Promise-objektet er avvist versjon lagt til 1 8. En funksjon som skal kalles når animasjonen på et element fullføres eller stopper uten å fullføre Promise-objektet, er enten løst eller avvist versjon lagt til 1 8. Metoden lar oss lage animasjonseffekter på en hvilken som helst tall CSS-egenskap Den eneste nødvendige parameteren er en vanlig gjenstand for CSS-egenskaper Dette objektet ligner på det som kan sendes til metoden, bortsett fra at rekkevidden av egenskaper er mer restriktiv. Annen prop erties og verdier. Alle animerte egenskaper skal animeres til en enkelt numerisk verdi unntatt som nevnt nedenfor. De fleste egenskaper som ikke er numeriske kan ikke animeres ved hjelp av grunnleggende jQuery-funksjonalitet. For eksempel kan breddehøyde eller venstre animeres, men bakgrunnsfarge kan ikke være, med mindre plugin er brukt Eiendomsverdier behandles som et antall piksler med mindre annet er angitt. Enhetene em og kan spesifiseres der det er aktuelt. I tillegg til stilegenskaper kan noen ikke-stilegenskaper som scrollTop og scrollLeft samt tilpassede egenskaper være animerte. Horthand CSS egenskaper, f. eks. skrift, bakgrunn, grense, er ikke fullt støttet. Hvis du for eksempel vil animere den gjengitte kantbredden, må minst en grenseform og grensebredde bortsett fra automatisk settes på forhånd. Eller, hvis du vil for å animere skriftstørrelsen, ville du bruke fontSize eller CSS-ekvivalent skriftstørrelse i stedet for bare font. In tillegg til numeriske verdier, kan hver egenskap ta strengene vise skjul og bytte The se snarveier tillater tilpassede gjemmer og viser animasjoner som tar hensyn til elementets skjermtype For å kunne bruke jQuery s innebygd svingstatistikksporing, må byttesøkeordet bli gitt konsekvent som verdien av eiendommen blir animert. Anslått egenskaper kan også være relativ Hvis en verdi leveres med en ledende eller - sekvens av tegn, beregnes målverdien ved å legge til eller trekke det oppgitte tallet fra den nåværende verdien av eiendommen. Notat I motsetning til shorthand animasjonsmetoder som og metoden gjør ikke gjør skjulte elementer synlige som en del av effekten. For eksempel, gitt noenElement, 500 animasjonen vil kjøre, men elementet vil forbli hidden. Durations er gitt i millisekunder høyere verdier indikerer langsommere animasjoner, ikke raskere Standardverdien er 400 millisekunder Den strenger raskt og sakte kan leveres for å indikere varighet på henholdsvis 200 og 600 millisekunder. Tilbakekallingsfunksjoner. Hvis det følger med, starter trinnet fremgang fullført ferdig feil og alltid tilbakeringinger kalles per element basis Dette er satt til DOM elementet blir animert Hvis ingen elementer er i settet, kalles ingen tilbakeringinger Hvis flere elementer blir animert, blir tilbakeringingen utført en gang per matchet element, ikke en gang for animasjonen som helhet Bruk metoden til å oppnå et løfte som du kan legge til tilbakeringinger som brann en gang for et animert sett av hvilken som helst størrelse, inkludert nullelementer. Basisk bruk. For å animere ethvert element, for eksempel et enkelt bilde. Figur 1 - Illustrasjon av den angitte animasjonseffekten. Merk at målverdien av høydeegenskapen er veksle Siden bildet var synlig før, krymper animasjonen høyden til 0 for å skjule den. Et andre klikk reverserer deretter denne overgangen. Figur 2 - Illustrasjon av den angitte animasjonseffekten. Opaciteten til bildet er allerede i målverdien, slik at denne egenskapen ikke animeres av andre klikk. Siden målverdien for venstre er en relativ verdi, beveger bildet seg enda lenger til Retten under denne andre animasjonen. Direksjonelle egenskaper øverst til høyre nederst til venstre har ingen merkbar effekt på elementer hvis deres posisjonstilstand er statisk som den er som standard. Merk jQuery UI-prosjektet utvider metoden ved å tillate noen ikke-numeriske stiler som farger å bli animert Prosjektet inneholder også mekanismer for å spesifisere animasjoner gjennom CSS klasser i stedet for individuelle attributter. Merk hvis du prøver å animere et element med en høyde eller bredde på 0px, der innholdet i elementet er synlig på grunn av overlasting, kan jQuery klippe denne overløp under animasjon Ved å fastsette dimensjonene til det opprinnelige elementet som er skjult, er det imidlertid mulig å sikre at animasjonen går jevnt. En clearfix kan brukes til å automatisk fikse dimensjonene til hovedelementet ditt uten å måtte sette denne manuelt. andre versjon av gir et trinnvalg en tilbakeringingsfunksjon som avfyres ved hvert trinn av animasjonen Denne funksjonen er nyttig for enabl ing egendefinerte animasjonstyper eller endre animasjonen som den forekommer Den aksepterer to argumenter nå og fx, og dette er satt til DOM-elementet som blir animert. Nå den numeriske verdien av egenskapen blir animert på hvert trinn. fx en referanse til prototypen objekt, som inneholder en rekke egenskaper som elem for det animerte elementet, start og slutt for den første og siste verdien av den animerte egenskapen, henholdsvis, og prop for at eiendommen blir animert. Merk at trinnfunksjonen kreves for hver animert Egenskapen på hvert animert element For eksempel, gitt to listeelementer, branner trinnfunksjonen fire ganger i hvert trinn av animasjonen. En fantastisk, fullt responsiv jQuery-skyveknappens toolkit. Simple, semantisk markup. Supported i alle de store nettleserne. Horisontal vertikal skyve og fade animasjoner. Multiple glidebryter støtte, Tilbakekallings API, og more. Hardware akselerert touch swipe support. Custom navigasjonsalternativerpatible med den nyeste versjonen av jQuery. Flexslider av WooThemes. This bilde er pakket inn i en link. Se etter å integrere Flexslider med WordPress. WooSlider Plugin. Integrér FlexSlider med WordPress. WooCommerce Slideshow Extension. Display produktene dine i en pent utformet og responsiv lysbildefremvisning innen WooCommerce. Kom i gang med FlexSlider i tre enkle trinn. Steg 1 Link files. Add disse elementene til hodet på dokumentet ditt Dette vil koble jQuery og CSS JS-filene til FlexSlider-kjerne til din nettside. Du kan også velge å være vert for jQuery på din egen server, men Google er fint nok til å ta vare på det for oss. Step 2 Legg til markup. The FlexSlider markup er enkelt og greit Først begynner du med et enkelt element, div class flexslider i dette eksempelet. Opprett deretter et ul klasse-lysbilder. Det er viktig å bruke denne klassen fordi skyveknappen målretter den klassen spesielt Put bildene dine og alt annet du ønsker i hver li, og du er klar til å rock. Step 3 Hakk opp skyveknappen. Legg til følgende linjer med Javascript i hodet på dokumentet ditt, belo w koblingene fra Trinn 1 Det kreves for å sikre at innholdet på siden er lastet før plugin initialiserer. og voila Det bryter opp den mest grunnleggende installasjonen av FlexSlider i din webside. Steg 4 Skreddersy dine behov. Liste nedenfor er alle alternativene som er tilgjengelige for å tilpasse FlexSlider for å dekke dine behov, sammen med standardverdiene. For eksempler på hvordan du bruker disse egenskapene for avanserte oppsett, sjekk avsnittet Avanserte alternativer. En liten informasjon om FlexSlider. Om FlexSlider. FlexSlider ble bygget for å betjene den beste responsive jQuery-glidebryteren rundt jeg hadde bygget noen få implementeringer av responsive skyveknapper på forskjellige klientprosjekter og la merke til at det var et grønt hull for plugin-støtte med konseptet jeg ønsket å bygge et plugin som ville tjene den nyeste av nybegynnere, samtidig som det ga krydret utviklere et verktøy de kunne bruke med tillit Hva har kommet fram er dette, FlexSlider Jeg planlegger å vedlikeholde denne plugin og gi støtte til brukere som implementerer FlexSlider til deres nettsteder Responsive webdesign kan være vanskelig, men jeg håper at FlexSlider tjener til å komplisere prosessen, bare litt. Browser Support. FlexSlider er verifisert i Safari 4, Chrome 4, Firefox 3 6, Opera 10 og IE7 IOS og Android-enheter støttes også jQuery-versjoner 1 3 støttes. Future Goals. Support for flere skyveknapper støttes som av v1 6.iOS swipe-bevegelser støttes som av v1 2.Callback API støttes som av v1 7.CSS3 overganger støttes som av v1 8.Addisjon av karusellalternativer synlige lysbilder, lysbilder for å bevege seg videre, etc. Custom konfigurasjonsstøtte for minste filstørrelser mulig. Flere temaalternativer. Kjente problemer. Ingen kjente problemer på dette tidspunktet. Feil å logge et problem på Github repository. v1 8 oktober 22, 2011- CSS3 transform3d-støtte for webkit-nettlesere kombinert med 1-til-1-swiping har blitt introdusert. Hele touch swipe-opplevelsen har blitt vesentlig forbedret utover sammenligning med tidligere versjoner. å nix den gamle oppførelsen Lysbildene forblir ikke på plass, i stedet for å bevege seg og deretter skyve tilbake. - Lagt til slideDirection-egenskapen for å støtte vertikale eller horisontale glidebeskrivelser. Tilfyllet mousewheel-egenskap for å støtte rulleskjuling av glidebeskyttelseselementer. Added som er angitt av pausePlay-elementet og kan stilles inn via tilbakeringings-API-en. Dette forhindrer pauseOnHover fra å gjenoppta på svingutgang. Slettet touchswipe-egenskap som tilpassbare alternativer. Fiksad oppførsel i lysbildene med bare to lysbilder. Rulling skal skje som tilsiktet. Fiksert pausePlay-element binder for å utløse både berøringsstart og klikke . Merk: En ødeleggelsesfunksjon har blitt lagt til hovedpluginfilen, men er kommentert og utelatt fra den beregnede versjonen. De interesserte kan finne funksjonen og dokumentasjonen for å implementere en tilpasset ødeleggelsesfunksjon basert på deres egne behovshendelser triggers. v1 7. september 10 , 2011- Tilbakeringings API-funksjoner med start-, før-, etter - og sluttalternativer Alle funksjoner skal inneholde en parameter for t han skyveelementet ex start funksjon skyveknappen - Crossfade har blitt introdusert gjennom nye CSS teknikker-pausePlay egenskap lagt til for å støtte en dynamisk pause spill element. animationLoop eiendom lagt til for å støtte ikke-looping glidere. FlexSlider CSS ytterligere forbedret, inkludert IE hacks å forbedre cross - nettleser design integity. v1 6 august 30, 2011-Vast forbedringer av plugin-arkitekturen - Flere forekomster av FlexSlider er nå mulig Vær så snill, vær oppmerksom på publikum før du blir gal med dette - fjernet alternativet for show animasjon i interesse for andre ting Bruk animasjonDurasjon 0, hvis nødvendig. FlexSlider CSS har blitt oppdatert. Bruk v1 6 stylesheet. v1 5. august 27, 2011- Forbedret mobil støtte ved å legge til touchstart til bundet hendelser-Implementert løsning for ikke javascript fallback er avhengig av brukeren og forbereder html5 boilerplate modernizr classes. v1 4. august 23, 2011- Lagt til manuellControls-egenskap for å tillate tilpasset, ikke-dynamisk kontrollnavigasjon - Lagt til animering for å tillate insta nt-overganger mellom slides. v1 3. august 18, 2011 - Gjør lysbilde animasjon en kontinuerlig rulleffekt, i stedet for å hoppe tilbake for å starte slutten - Ryddet kode og skapt bedre testtilfeller for forskjellige skyve scenarier Skyvekontrollen er mye mer bulletproof av dette update. v1 2 august 16, 2011 - Fiks noen kode redundanser - Lagt til tilfeldig randomiseringsegenskap for å randomisere lysbildet oder på pageLad-Add touchSwipe-egenskapen for å sveipe bevegelser på iOS og Android-enheter ingen Android-enhet for å teste dette, men det skal fungere. i jQuery 1 3 2 der navigasjonen ikke ble lagt til riktig. Fikset stor bug i jQuery 1 3 2 hvor lysbilde animasjon ikke var sliding. v1 0 Innledende utgivelse under MIT-lisensen. Administrering av dette prosjektet tar en betydelig del av tiden min utenom arbeidet, så jeg vil gjerne gi min oppriktige takk til de som har støttet FlexSlider. Andrew Fenenbock. Nicholas Frota. Datch Haven. Amber Weinberg. Daniel Evelina Barry. Justin Myers Zero Signal Productions. Ruth Elliot EDU Designs. Tim Hyde Hyde Internet. Shlomi Atar. Courtney Curtis. Simon Clayson. Martin Gartner. Mark Hild Nelson Design. Jeroen Wiersma.
Comments
Post a Comment