jQuery UI przykładem - efekty specjalne (Efekty)
Zastosowanie elementu efektów animacji.
Aby uzyskać więcej informacji na temat .effect() Szczegóły dotyczące metod można znaleźć w dokumentacji API .effect () .
.effect () Demo
Kliknij przycisk, aby wyświetlić podgląd efektów.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Effects - .effect () Demo </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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: 240 piks; height: 135px; padding: 0.4em; position: relative;}
#effect h3 {margin: 0; padding: 0.4em; text-align: center;}
.ui efekty przenikania {border: 2px przerywana szary;}
</ Style>
<Script>
$ (Function () {
// Uruchom aktualnie wybrany runEffect Funkcja Efekt () {
// Wyprowadź efektów typu var selectedEffect = $ ( "#effectTypes") .val ();
// Większość działań nie trzeba wpisywać opcje domyślne opcje wysyłki var = {};
// Niektóre efekty specjalne z wymaganymi parametrami if (selectedEffect === "skala") {
options = {procent: 0};
} Else if (selectedEffect === "przeniesienie") {
options = {z: "#button" className: "UI-efekty-transfer"};
} Else if (selectedEffect === "rozmiar") {
options = {z: {width: 200, wysokość: 60}};
}
// Run efekty $ ( "#effect") .effect (selectedEffect, opcje, 500, callback);
};
// Funkcja oddzwaniania Callback () {
setTimeout (function () {
$ ( "#effect") .removeAttr ( "Style") .hide () fadeIn () .;
}, 1000);
};
// Ustaw wartość w zależności od wybranych efektów menu $ ( "#button") .Kliknij (function () {
runEffect ();
return false;
});
});
</ Script>
</ Head>
<Body>
<Div class = "wahacz">
<Div id = "efekt" class = "widget-ui ui-content-corner-all">
<H3 class = "widget-ui ui-header-corner-all"> Efekty specjalne (efekt) </ h3>
<P>
Etiam libero neque, luctus a, eleifend, gdzie indziej niesklasyfikowane, sempre się, lorem. Sed pede. Nulla ipsum Metusa, adipiscing UT, luctus sed vitae, hendrerit, MI.
</ P>
</ Div>
</ Div>
<select name = "efekty" id = ""> effectTypes
<Option value = "ślepe"> Shades efekty (Blind skutku) </ option>
<Wartość Option = "bounce"> odbicia efekty (Bounce skutku) </ option>
<Wartość Option = "klip"> Efekty zacisk (klips Effect) </ option>
<Wartość Option = "drop"> Efekty Landing (spadek Effect) </ option>
<Option value = "wybuchnąć"> Efekty wybuchowości (Explode Effect) </ option>
<Wartość Option = "Fade"> Fade efekty (Fade Effect) </ option>
<Wartość Option = "spasować"> składane efekty (Fold Effect) </ option>
<Option value = "highlight"> Efekty podświetlenia (Highlight Effect) </ option>
<Wartość Option = "puff"> efekty rozszerzalności cieplnej (Puff skutku) </ option>
<Wartość Option = "pulsuje"> pokonać efekty (pulsować skutku) </ option>
<Wartość Option = "skala"> efekty powiększenia (skala efektu) </ option>
<Wartość Option = "wstrząsnąć"> efekty wibracji (drgań efektu) </ option>
<Wartość Option = "size"> Efekty Size (wielkość efektu) </ option>
<Wartość Option = "slide"> Efekty ślizgowe (zjeżdżalnia Effect) </ option>
<Wartość Option = "Transfer"> Efekty transferu (transfer skutku) </ option>
</ Select>
<a href="#" id="button" class="ui-state-default ui-corner-all"> prowadzone efekty </a>
</ Body>
</ Html>
złagodzenie Demo
Ten przykład używa elementu HTML Canvas, przyciągnę wszystkich wygładzanie jQuery UI oferuje. Kliknij na mapę, aby zobaczyć każde zachowanie łagodzenia. ,
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Effects - złagodzenie Demo </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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 (
"Twoja przeglądarka nie obsługuje płótno, to wskazuje na potrzebę wspierania płótno w przeglądarce."
( ") .appendTo #graphs");
return;
}
var i = 0,
width = 100,
height = 100;
$ .each ($ .easing, Function (nazwa, impl) {
Wykres var = $ ( "<div>") .addClass ( "Wykres") .appendTo ( "#graphs"),
text = $ ( "<div>") .text (++ i + "." + nazwa) .appendTo (wykres)
zawinąć = $ ( "<div>") .appendTo (wykres) .css ( "overflow", "ukryte"),
płótno = $ ( "<canvas>") .appendTo (Okład) [0];
canvas.width = szerokość;
canvas.height = wysokość;
var drawHeight = wysokość * 0,8,
cradius = 10;
ctx = canvas.getContext ( "2d");
ctx.fillStyle = "black";
// Rysowanie tła ctx.beginPath ();
ctx.moveTo (cradius, 0);
ctx.quadraticCurveTo (0, 0, 0, cradius);
ctx.lineTo (0, wysokość - cradius);
ctx.quadraticCurveTo (0, wysokość, cradius, wysokość);
ctx.lineTo (szerokość - cradius, wysokość);
ctx.quadraticCurveTo (szerokość, wysokość, szerokość, wysokość - cradius);
ctx.lineTo (szerokość, 0);
ctx.lineTo (cradius, 0);
ctx.fill ();
// Narysuj dolną linię ctx.strokeStyle = "# 555";
ctx.beginPath ();
ctx.moveTo (szerokość * 0,1 drawHeight + 0,5);
ctx.lineTo (szerokość * 0,9, drawHeight + 0,5);
ctx.stroke ();
// Narysuj górną linię ctx.strokeStyle = "# 555";
ctx.beginPath ();
ctx.moveTo (szerokość * 0,1 * 0,3 drawHeight - 0,5);
ctx.lineTo (szerokość * 0,9 * 0,3 drawHeight - 0,5);
ctx.stroke ();
// Rysowanie złagodzenie
ctx.strokeStyle = "white";
ctx.beginPath ();
ctx.lineWidth = 2;
ctx.moveTo (szerokość * 0,1 drawHeight);
$ .each (New Array (szerokość), function (pozycja) {
Stan var = pozycja / szerokość,
val = impl (stan, położenie, 0, 1, szerokość);
ctx.lineTo (pozycja * 0,8 + 0,1 * szerokość,
drawHeight - drawHeight * val * 0,7);
});
ctx.stroke ();
// Dynamicznie zmieniające kliknięć graph.click (function () {
owinąć
.animate ({height: "ukryj"}, 2000, nazwa)
.delay (800)
.animate ({height: "show"}, 2000, nazwa);
});
graph.width (szerokość) .height (wysokość + text.height () + 10);
});
});
</ Script>
</ Head>
<Body>
<Div id = "wykresy"> </ div>
</ Body>
</ Html>