WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Sliders

jSimplePresentation

— Add-On til WorldWideScripts.net

Abonner på vores feed for at holde dig ajour !

Nyt! Følg os som du ønsker det!


jSimplePresentation - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Denne post repræsenterer en ny vision for et diasshow, tilbydes som et jQuery plugin.
Nogle af mulige anvendelser:

  • At bruge det i stedet for powerpoint for at præsentere dine ideer
  • At annoncere et produkt, et website,...
  • For at gøre en HTML designet bog
  • osv, osv

Egenskaber

  • Kunne anvende andre plugins ud af denne ene
  • Stand til at indlæse ubegrænset antal sider
  • Det kan indeholder, hvad du vil (en side er en simpel div)
  • Siderne (midt på siden) er automatisk skaleres med browseren
  • Fuldt og nemt kan tilpasses
  • Meget nem at bruge
  • Tastatur navigation (HØJRE / VENSTRE / SPACE / l)
  • Slideshow option
  • Autoplay option
  • Loop option
  • Billede forbelastning option
  • Gå til en bestemt side (med sikrede input kontrol)
  • W3C Valid
  • Arbejder på iOS (iPhone / iPad) og bestemt på Android
  • Tre temaer inkluderet (grå, blå, orange)
  • 4 overgang forudindstillinger
  • Du kan skrive din egen overgang med en simpel funktion i plugin opkald
  • Overgange kan være forskellige for den næste og tidligere aktioner
  • Godt kommenterede (de fleste handlinger i koden indeholder kommentarer)

Hvordan man bruger det

JS - Syntaks
 $ (Dokument).simplePresentation ({ autoplay: boolean, loop: boolean, intervalTime: heltal, forbelastning: boolean, transitionFct: funktion }); 

JS - Eksempel med en forudindstillet overgang
 var transitionFunction = funktion (ELT, kilde, transitionTime) { Transition.opacity (ELT, kilde, transitionTime); }; $ (Dokument).simplePresentation ({ autoplay: falsk, loop: falsk, intervalTime: 2000 forbelastning: false, transitionFct: transitionFunction }); 

JS - Eksempel med en overgang vi skriver
 var transitionFunction = funktion (ELT, kilde, transitionTime) { elt.css ("opacitet", "0"); // Hvis vi skal til den næste side if (kilde == "RIGHT") { elt.css ("marginLeft", "100%"); elt.animate ({ "Opacitet": 1, "MarginLeft": "0px" }, TransitionTime); } Else { elt.css ("marginRight", "100%"); elt.animate ({ "Opacitet": 1, "MarginRight": "0px" }, TransitionTime); } }; $ Præsentation = $ (dokument).simplePresentation ({ autoplay: falsk, loop: falsk, intervalTime: 4000, forbelastning: sandt, transitionFct: transitionFunction }); 

HTML
 <Div id = "container"> <Div id = "Page1"> ... </ Div> <Div id = "Side2"> ... </ Div> </ Div> 
Hver div med id = "pageX" repræsenterer en side.
Hver sider skal have et id, der starter med "side".

Kompatible browsere

Dette punkt fungerer med følgende browsere:
  • Firefox 4+
  • IE7 + (bruger en adskilt css stylesheet til IE mindre end V.9)
  • Opera
  • Chrome
  • Safari

Hent
Andre komponenter i denne kategoriAlle komponenter i denne forfatter
KommentarerOfte stillede spørgsmål og svar

Egenskaber

Oprettet:
15 December 11

Sidste Ændring:
N / A

Høj Opløsning:
Ingen

Kompatible Browsere:
IE7, IE8, IE9, Firefox, Safari, Opera, Chrome

Filer Inkluderet:
JavaScript JS, HTML, CSS

Software Version:
jQuery

Søgeord

eCommerce, eCommerce, Alle varer, animation, design, Power point, præ, sentation, slider, slideshow, overgang