اليوم سأشارككم مثالًا صغيرًا على استخدام تحريك لتحقيق تأثير التبديل المنزلق
يعلم الجميع أن jQuery يوفر بعض الطرق لتحقيق تأثير الانزلاق:
1.Slidedown ()
2. slideup ()
3.Slidetoggle ()
ومع ذلك ، فإن الانزلاق أعلاه ليس مناسبًا للسيطرة على اتجاه انزلاقه ، لذلك دعونا نكتب واحدًا بأنفسنا. . .
الرمز كما يلي:
<! doctype html> <html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-contable" content = "ie = edge ، chrome = 1"> <title> أمثلة </title> <meta name = "description =" الجسم {العرض: 100 ٪ ؛ الارتفاع: السيارات ؛ } .Content {width: 150px ؛ الارتفاع: 50 بكسل ؛ الموقف: مطلق ؛ أعلى: 20 بكسل ؛ اليسار: 20 بكسل ؛ الفائض: مخفي. لون الخلفية: أحمر. } .slide-box {width: 300px ؛ الموقف: قريب } .slide1 {width: 150px ؛ الارتفاع: 50 بكسل ؛ تعويم: اليسار. العرض: كتلة مضمنة. ارتفاع الخط: 50 بكسل ؛ محاذاة النص: المركز ؛ خلفية اللون: #BDD8CF ؛ } .slide2 {width: 150px ؛ الارتفاع: 50 بكسل ؛ تعويم: صحيح. العرض: كتلة مضمنة. ارتفاع الخط: 50 بكسل ؛ محاذاة النص: المركز ؛ لون الخلفية: #C1C4C4 ؛ } </style> </head> <body> <viv> <viv> <span> العنصر على العنصر الأيسر </span> <span> على اليمين </span> </viv> </viv> <script src = "js/jquery-1.11.2.min.js" type = "text/javascript" charset = "utf-8" $ (function () {$ (". content"). hover (function () {$ (". </body> </html>يمكن أن يحقق الرمز أعلاه تأثيرًا كاملًا. ولكن شيء واحد يجب ملاحظته ،
كما هو موضح في الشكل أعلاه ، يجب إضافة حدث STOP () لمنع الأحداث المتعددة التي تم إنشاؤها عند تحرك الماوس بسرعة ، مما يسبب فريق المكدس ، مما يتسبب في تأثير الانزلاق أو حتى الوميض بعد إزالة الماوس.
تدرك المقالة أعلاه تحريك التأثير المنزلق [مثال رمز] كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.