مسج واجهة المستخدم سبيل المثال - المؤثرات الخاصة (تأثير)
تطبيق عنصر من تأثيرات الحركة.
لمزيد من المعلومات حول .effect() تفاصيل الأساليب، راجع وثائق API .effect () .
.effect () عرض توضيحي
انقر فوق الزر لمعاينة آثار.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم الأثر - .effect () عرض توضيحي </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
.toggler {العرض: 500px؛ الطول: 200px؛ الموقف: النسبية؛}
#button {الحشو: .5em 1em؛ النص الديكور: لا شيء؛}
#effect {العرض: 240px؛ الطول: 135px؛ الحشو: 0.4em، موقع: نسبي؛}
#effect H3 {هامش: 0؛ الحشو: 0.4em؛ مواءمة النصوص: مركز؛}
.ui آثار نقل {الحدود: 2px رمادي منقط؛}
</ النمط>
<script>
$ (وظيفة () {
// تشغيل المحدد حاليا وظيفة تأثير runEffect () {
// اشتقاق آثار نوع فار selectedEffect = $ ( "#effectTypes") .val ()؛
// معظم الآثار لا تحتاج إلى كتابة خيارات خيارات التسليم الافتراضي فار = {}؛
// بعض المؤثرات الخاصة مع المعلمات المطلوبة إذا (selectedEffect === "على نطاق") {
خيارات = {المئة: 0}؛
} آخر إذا (selectedEffect === "نقل") {
خيارات = {ل: "#button"، اسم_الفئة: "واجهة المستخدم آثار نقل"}؛
} آخر إذا (selectedEffect === "حجم") {
خيارات = {ل: {عرض: 200، الطول: 60}}؛
}
// آثار تشغيل $ ( "#effect") .effect (selectedEffect، خيارات، 500، رد)؛
}؛
// وظيفة استدعاء الاستدعاء () {
setTimeout (وظيفة () {
$ ( "#effect") .removeAttr ( "ستايل") .hide () fadeIn ()؛
}، 1000)؛
}؛
// تعيين القيمة وفقا لاختيار الآثار القائمة $ ( "#button"). انقر (وظيفة () {
runEffect ()؛
عودة كاذبة.
})؛
})؛
</ script>
</ رئيس>
<body>
<div الطبقة = "toggler">
<شعبة معرف = "تأثير" الطبقة = "واجهة المستخدم القطعة-المحتوى واجهة المستخدم الزاوية للجميع">
<H3 الطبقة = "واجهة المستخدم القطعة-رأس واجهة المستخدم الزاوية للجميع"> المؤثرات الخاصة (تأثير) </ H3>
<P>
Etiam يبيرو neque، luctus لذلك، eleifend اللجنة الوطنية للانتخابات، سمبر في، أبجد. سد الر. metus لا عقوبة أبجد، adipiscing التحرير، luctus الحوار الاقتصادي الاستراتيجي، hendrerit الذاتية، ميل.
</ P>
</ div>
</ div>
<اختر اسم = "الآثار" معرف = "effectTypes">
<قيمة الخيار = "العمياء"> ظلال الآثار (مكفوفين تأثير) </ خيار>
<الخيار قيمة = "ترتد"> حدوث آثار ارتدادية (ترتد تأثير) </ خيار>
<الخيار قيمة = "كليب"> آثار كليب (كليب تأثير) </ خيار>
<قيمة الخيار = "قطرة"> آثار الهبوط (قطرة تأثير) </ خيار>
<الخيار قيمة = "تنفجر"> آثار الانفجار (تنفجر تأثير) </ خيار>
<الخيار قيمة = "تتلاشى"> تتلاشى آثار (تتلاشى تأثير) </ خيار>
<الخيار قيمة = "اضعاف"> آثار للطي (أضعاف تأثير) </ خيار>
<الخيار قيمة = "تسليط الضوء"> تأثيرات الإضاءة (تسليط الضوء على تأثير) </ خيار>
<الخيار قيمة = "نفخة"> آثار التوسع (النفخة تأثير) </ خيار>
<الخيار قيمة = "خفق"> فاز الآثار (خفق تأثير) </ خيار>
<الخيار قيمة = "نطاق"> آثار تكبير (مقياس تأثير) </ خيار>
<الخيار قيمة = "زعزعة"> آثار الاهتزاز (اهتز تأثير) </ خيار>
<الخيار قيمة = "حجم"> آثار الحجم (حجم تأثير) </ خيار>
<الخيار قيمة = "الانزلاق"> آثار شريحة (الشرائح تأثير) </ خيار>
<الخيار قيمة = "نقل"> آثار نقل (تأثير نقل) </ خيار>
</ تحديد>
<a href="#" id="button" class="ui-state-default ui-corner-all"> تشغيل آثار </A>
</ الجسم>
</ HTML>
تخفيف تجريبي
يستخدم هذا المثال عنصر قماش HTML، رسم كل الإرخاء يوفر مسج واجهة المستخدم. انقر على كل الخريطة لمعرفة سلوك التيسير. .
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم الأثر - تخفيف تجريبي </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
.graph {
تطفو: اليسار،
هامش اليسار: 10px؛
}
</ النمط>
<script>
$ (وظيفة () {
إذا (! $ ( "<قماش>") [0] .getContext) {
$ ( "<div>") .text (
"متصفحك لا يدعم قماش، وهذا يدل على الحاجة إلى دعم قماش في المتصفح."
) .appendTo ( "#graphs")؛
العودة؛
}
فار ط = 0،
عرض = 100،
ارتفاع = 100؛
$. كل ($ .easing، وظيفة (الاسم، impl) {
فار الرسم البياني = $ ( "<div>") .addClass ( "الرسم البياني") .appendTo ( "#graphs")،
النص = $ ( "<div>") .text (++ ط + "." + اسم) .appendTo (الرسم البياني)،
التفاف = $ ( "<div>") .appendTo (الرسم البياني). المغلق ( 'تجاوز'، 'الخفية')،
قماش = $ ( "<قماش>") .appendTo (التفاف) [0]؛
canvas.width = العرض.
canvas.height = ارتفاع.
فار drawHeight = ارتفاع * 0.8،
cradius = 10؛
CTX = canvas.getContext ( "2D")؛
ctx.fillStyle = "السوداء".
// رسم خلفية ctx.beginPath ()؛
ctx.moveTo (cradius، 0)؛
ctx.quadraticCurveTo (0، 0، 0، cradius)؛
ctx.lineTo (0، ارتفاع - cradius)؛
ctx.quadraticCurveTo (0، والطول، cradius والارتفاع).
ctx.lineTo (عرض - cradius والارتفاع).
ctx.quadraticCurveTo (العرض والطول، العرض، الارتفاع - cradius)؛
ctx.lineTo (العرض، 0)؛
ctx.lineTo (cradius، 0)؛
ctx.fill ()؛
// رسم خط القاع ctx.strokeStyle = "# 555؛"
ctx.beginPath ()؛
ctx.moveTo (العرض * 0.1، drawHeight + 0.5)؛
ctx.lineTo (العرض * 0.9، drawHeight + 0.5)؛
ctx.stroke ()؛
// رسم السطر العلوي ctx.strokeStyle = "# 555؛"
ctx.beginPath ()؛
ctx.moveTo (العرض * 0.1، drawHeight * 0،3-0،5)؛
ctx.lineTo (العرض * 0.9، drawHeight * 0،3-0،5)؛
ctx.stroke ()؛
// رسم تخفيف
ctx.strokeStyle = "الأبيض".
ctx.beginPath ()؛
ctx.lineWidth = 2؛
ctx.moveTo (العرض * 0.1، drawHeight)؛
$. كل (صفيف جديد (العرض)، وظيفة (موقف) {
الدولة فار = موقف / العرض،
فال = impl (الدولة، والموقف، 0، 1، عرض)؛
ctx.lineTo (موقف * 0.8 + عرض * 0.1،
drawHeight - drawHeight * فال * 0.7)؛
})؛
ctx.stroke ()؛
// نقرات تغيير حيوي graph.click (وظيفة () {
لف
.animate ({الطول: "الاختباء"}، 2000، اسم)
.delay (800)
.animate ({الطول: "عرض"}، 2000، اسم)؛
})؛
graph.width (العرض) .height (الطول + text.height () + 10)؛
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "الرسوم البيانية"> </ div>
</ الجسم>
</ HTML>