تحقيق تأثير التشطيب الجذاب باستخدام jQuery [مرفق ملف الشيفرةDEMOS لتحميل]

هذا المقال يشرح كيفية تحقيق تأثير جدار العطلات القابلة للسحب باستخدام jQuery. أشارككم هذا لأخذ فكرة، كما يلي:

إليك صورة للنتائج بعد التشغيل:

سأقوم بشرح النقاط الرئيسية للوظيفة:

① عرض خلفية عشوائية أو لون خلفي
② الموقع يظهر عشوائيًا
③ يمكن تغيير الموقع عن طريق السحب

حسنًا، هنا الكود المرفق:

<!doctype html>
<html lang="ar">
<head>
  <meta charset="UTF-8"/>
  <title>الجدار العاطفي</title>
  <link rel="stylesheet" href="base.min.css"/>
  <style>
  #wish{height:650px;margin:20px;position:relative;width:960px;}
  .wish{background:url(wish_bg.png) no-repeat 0 0;color:#000;height:166px;padding:10px 20px 30px 20px;width:185px;}
  .wish-close{background:url(wish_close_bg.png) no-repeat 0 0;display:none;position:absolute;right:5px;top:-5px;width:17px;height:17px;}
  </style>
</head>
<body>
  <ul id="wish">
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
    <li>55555</li>
  </ul>
</body>
</html>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="wish.js"></script>
<script>
$(function(){
  $('#wish').wish();
  $('.wish').draggable({containment:'#wish',scroll:false});
});
</script>

ملاحظة:

يجب تحميل draggable و scale Effect من jqueryui، حيث أن draggable يدعم التمرير، بينما scale Effect هو تأثير إغلاق عند النقر.

انقر هنا للحصول على رمز المثال الكاملتحميل الموقع.

يمكن للقراء المهتمين بجوانب jQuery المزيد من المعلومات في قسم الموقع الخاص بنا: 'تجميع تقنيات وتكتيكات تمرير jQuery'، 'تجميع البرامج المدمجة والاستخدامات الشائعة لـ jQuery'، 'تجميع استخدامات Ajax في jQuery'، 'تجميع تقنيات معالجة جدول HTML (table) في jQuery'، 'تجميع تقنيات التوسيع في jQuery'، 'تجميع تقنيات الأثر المعتادة في jQuery'، 'تجميع استخدامات التحريك والإثراء في jQuery'، و 'تجميع استخدامات محددة في ميزات jQuery'.

آمل أن يساعدك محتوى هذا المقال في تصميم برامج jQuery.

بيان: محتوى هذا المقال تم جمعه من الإنترنت، ويتمتع ملكية حقوق الطبع والنشر للمالك الأصلي، تم جمع المحتوى من قبل المستخدمين عبر الإنترنت بشكل متعاوني وتم تحميله بشكل مستقل، ويتمتع هذا الموقع بملكية حقوق الملكية، لم يتم تعديل المحتوى بشكل إنساني، ولا يتحمل هذا الموقع أي مسؤولية قانونية متعلقة بذلك. إذا رأيت محتوى يشتبه في انتهاك حقوق الطبع والنشر، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال #بـ @) لإبلاغنا، وقدم الدليل على أدلةك، إذا تم التحقق من صحة المعلومات، سيتم حذف المحتوى المزعوم فورًا.

تعليمية الأساس

تحب أن تراه