jQuery UI esempio - effetti speciali (effetto)
Applicazione di un elemento di effetti di animazione.
Per ulteriori informazioni sulla .effect() i dettagli dei metodi, consultare la documentazione API .effect () .
.effect () Demo
Fare clic sul pulsante per visualizzare in anteprima gli effetti.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Effetti - .effect () Demo </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.toggler {width: 500px; height: 200px; position: relative;}
#button {padding: .5em 1em; text-decoration: none;}
#effect {width: 240px; height: 135px; padding: 0.4em; position: relative;}
h3 #effect {margin: 0; padding: 0.4em; text-align: center;}
.ui-effects-trasferimento {border: 2px grigia punteggiata;}
</ Style>
<Script>
$ (Function () {
// Eseguire la funzione di effetto runEffect attualmente selezionata () {
// Derivate effetti di tipo var selectedEffect = $ ( "#effectTypes") .VAL ();
// La maggior parte degli effetti non hanno bisogno di digitare le opzioni Opzioni di consegna predefinito var = {};
// Alcuni effetti speciali con i parametri richiesti se (selectedEffect === "scala") {
Opzioni = {cento: 0};
} Else if (selectedEffect === "trasferimento") {
options = {a: "#button", className: "ui-effects-trasferimento"};
} Else if (selectedEffect === "dimensione") {
options = {a: {width: 200, height: 60}};
}
// effetti Run $ ( "#effect") .effect (selectedEffect, opzioni, 500, callback);
};
// Funzione di Callback callback () {
setTimeout (function () {
$ ( "#effect") .removeAttr ( "Style") .nascosto () fadeIn () .;
}, 1000);
};
// Imposta il valore in base agli effetti menu selezionate $ ( "#button") .Click (function () {
runEffect ();
return false;
});
});
</ Script>
</ Head>
<Body>
<Div class = "toggler">
<Div id = "effetto" class = "ui-widget di contenuto ui-angolo-all">
<H3 class = "ui-widget di intestazione-ui-angolo-all"> effetti speciali (effetto) </ h3>
<P>
Etiam libero neque, luctus una, eleifend nca, sempre a, lorem. Sed pede. Metus Nulla lorem, adipiscing ut, luctus sed, hendrerit vitae, mi.
</ P>
</ Div>
</ Div>
<select name = "effetti" id = ""> effectTypes
<Option value = "alla cieca"> Shades effetti (non vedenti effetto) </ option>
<Option value = "rimbalzo"> rimbalzo effetti (Bounce Effect) </ option>
<Option value = "clip"> effetti clip (Effetto della clip) </ option>
<Option value = "goccia"> effetti Landing (effetto goccia) </ option>
<Option value = "esplodere"> effetti di esplosione (Explode Effect) </ option>
<Option value = "fade"> Fade effetti (Fade Effect) </ option>
<Option value = "piegare"> effetti pieghevole (Fold Effect) </ option>
<Option value = "highlight"> effetti di evidenziazione (Evidenziare Effect) </ option>
<Option value = "soffio"> effetti di espansione (Puff effetto) </ option>
<Option value = "pulsare"> battere effetti (pulsare effetto) </ option>
<Option value = "scala"> effetti di zoom (scala di effetto) </ option>
<Option value = "scuotere"> effetti vibrazione (Agitare effetto) </ option>
<Option value = "size"> effetti di formato (formato effetto) </ option>
<Option value = "slide"> effetti di scorrimento (slide Effect) </ option>
<Option value = "trasferimento"> effetti di trasferimento (Transfer effetto) </ option>
</ Select>
<a href="#" id="button" class="ui-state-default ui-corner-all"> effetti correre </a>
</ Corpo>
</ Html>
Facilitare Demo
Questo esempio utilizza elemento canvas HTML, disegnare tutte le interpolazioni jQuery UI fornisce. Clicca su ogni mappa per vedere il comportamento di andamento. .
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Effetti - Facilitare Demo </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.graph {
float: left;
margin-left: 10px;
}
</ Style>
<Script>
$ (Function () {
if (! $ ( "<canvas>") [0] .getContext) {
$ ( "<Div>") .text (
"Il tuo browser non supporta tela, ciò dimostra la necessità di sostenere la tela nel browser."
) .appendTo ( "#graphs");
tornare;
}
var i = 0,
larghezza = 100,
height = 100;
$ .each ($ .easing, Funzione (nome, impl) {
grafico var = $ ( "<div>") .addClass ( "grafico") .appendTo ( "#graphs"),
text = $ ( "<div>") .text (++ i + "." + nome) .appendTo (grafico),
avvolgere = $ ( "<div>") .appendTo (grafico) css ( 'overflow', 'nascosto'),
tela = $ ( "<canvas>") .appendTo (involucro) [0];
canvas.width = larghezza;
canvas.height = altezza;
var drawHeight = altezza * 0.8,
cradius = 10;
CTX = canvas.getContext ( "2D");
ctx.fillStyle = "nero";
// Disegna sfondo ctx.beginPath ();
ctx.moveTo (cradius, 0);
ctx.quadraticCurveTo (0, 0, 0, cradius);
ctx.lineTo (0, altezza - cradius);
ctx.quadraticCurveTo (0, altezza, cradius, altezza);
ctx.lineTo (larghezza - cradius, altezza);
ctx.quadraticCurveTo (larghezza, altezza, larghezza, altezza - cradius);
ctx.lineTo (larghezza, 0);
ctx.lineTo (cradius, 0);
ctx.fill ();
// Disegna la linea di fondo ctx.strokeStyle = "# 555";
ctx.beginPath ();
ctx.moveTo (larghezza * 0.1, drawHeight + 0,5);
ctx.lineTo (larghezza * 0.9, drawHeight + 0,5);
ctx.stroke ();
// Disegnare la linea superiore ctx.strokeStyle = "# 555";
ctx.beginPath ();
ctx.moveTo (larghezza * 0.1, drawHeight * 0,3-0,5);
ctx.lineTo (larghezza * 0.9, drawHeight * 0,3-0,5);
ctx.stroke ();
// Disegna facilitando
ctx.strokeStyle = "bianco";
ctx.beginPath ();
ctx.lineWidth = 2;
ctx.moveTo (larghezza * 0.1, drawHeight);
$ .each (New Array (larghezza), la funzione (posizione) {
var stato = posizione / larghezza,
val = impl (stato, posizione, 0, 1, larghezza);
ctx.lineTo (posizione * 0,8 + larghezza * 0.1,
drawHeight - drawHeight * val * 0.7);
});
ctx.stroke ();
// Scatti che cambiano dinamicamente graph.click (function () {
avvolgere
.animate ({height: "nascondere"}, 2000, nome)
.delay (800)
.animate ({height: "spettacolo"}, 2000, nome);
});
graph.width (larghezza) .height (altezza + text.height () + 10);
});
});
</ Script>
</ Head>
<Body>
<Div id = "grafici"> </ div>
</ Corpo>
</ Html>