تحريك الصورة بنقرة: دليل تنفيذ لتحقيق موقع مركزي على اليسار

من الواضح أنك تواجه تحدياً في تنفيذ وظيفة تحريك الصورة عند النقر عليها لتتحرك إلى الوسط الأيسر من الصفحة. للقيام بذلك، يمكنك استخدام الجافا سكريبت لتطبيق وظيفة النقر وتغيير موقع الصورة. فيما يلي كود يمكن أن يساعدك في تحقيق هذا الهدف:

HTML:

htmlCopy code
<div id="myanm">
    <a href="#" onclick="moveImageLeftCenter()">
        <img src="img/home/Services.png" class="service animated fadeInUp img_move">
        <h2 class="txt1 shadow animated fadeInUp">SERVICESh2>
    a>
div>

CSS:

cssCopy code
.service {
    position: absolute;
    left: 0px;
    bottom: 0;
    z-index: 1;
    animation-delay: 3.5s;
    height: 324px;
    width: 433px;
    cursor: pointer; /* إضافة خاصية المؤشر لتشير إلى أنه يمكن النقر عليها */
}

JavaScript:

javascriptCopy code
function moveImageLeftCenter() {
    var image = document.querySelector('.service');
    var windowWidth = window.innerWidth;

    // حساب موقع الوسط الأيسر
    var leftCenter = (windowWidth - image.width) / 2;

    // تحريك الصورة إلى الوسط الأيسر مع تأثير إضافي
    image.style.transition = 'left 0.5s ease';
    image.style.left = leftCenter + 'px';
}

يرجى إضافة هذا الكود إلى ملف الجافا سكريبت الخاص بك. عند النقر على الصورة، ستقوم الوظيفة moveImageLeftCenter() بحساب الموقع الجديد وتحريك الصورة إلى الوسط الأيسر بشكل أنيق.

بالطبع، دعونا نوسع على الحل الذي قدمته لك ونضيف المزيد من المعلومات حول الكود وكيف يعمل:

1. الوسوم HTML:

   • : تُستخدم لإنشاء رابط.
   • : تُستخدم لعرض الصور.
   • : تستخدم لتعريف قسم في الصفحة.

2. الخصائص CSS:

   • position: absolute;: تحدد الموقع المطلوب للعنصر بناءً على الإحداثيات النسبية للعنصر الذي يحتوي عليه.
   • left: 0px;: تحدد المسافة بين العنصر والحافة اليسرى للعنصر الأب (في هذه الحالة، الصفحة).
   • bottom: 0;: تحدد المسافة بين العنصر والحافة السفلية للعنصر الأب.
   • z-index: 1;: تحدد ترتيب التراكب للعناصر.
   • animation-delay: 3.5s;: يُؤخر بدء تأثير الرسوم المتحركة لمدة 3.5 ثانية.
   • height: 324px; width: 433px;: تحدد ارتفاع وعرض الصورة.

3. الخصائص JavaScript:

   • querySelector('.service'): تحديد العنصر الذي يحمل الفئة .service.
   • window.innerWidth: العرض الإجمالي لنافذة المتصفح.
   • transition: تحدد التأثير المستخدم للتحول.
   • left: تحدد الموقع الجديد للعنصر على المحور الأفقي.

4. الوظيفة moveImageLeftCenter():

   • تُستدعى عند النقر على الصورة.
   • تقوم بحساب موقع الوسط الأيسر.
   • تحدد التحول لتحريك الصورة بسلاسة إلى الموقع الجديد.

5. Cursor property:

   • تمت إضافة cursor: pointer; للعنصر .service لتحويل المؤشر إلى علامة يد تشير إلى أن الصورة يمكن النقر عليها.