تكبير صفحة الانترنت عند النقر على زر التكبير، وتصغيرها بالنقر على الزر تصغير zoom in and zoom out Buttons

مرحباً محمد ..
يمكنك عمل هذا عن طريق إضافة 3 أزرار بهذا الشكل مثلاً

<a class="btn zoom"><i class="fas fa-search-plus"></i></a>
<a class="btn zoom-out"><i class="fas fa-search-minus"></i></a>
<a class="btn zoom-init"><i class="fas fa-recycle"></i></a>

<!-- إضافة بوكس لرؤية نتيجة التكبير و التصغيير -->
<div class="box">
  <h3>Title</h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a ligula dictum, elementum arcu quis, scelerisque lacus. Donec ut semper nunc, sed ultricies velit. Donec id malesuada metus
  </p>
</div>

يُرجى إضافة مكتبة fontawesome من أجل الأيقونات بعدها إضافة بعض التنسيقات للعناصر بهذا الشكل مثلاً

body {
  margin: 30px;
}

.box {
  background: linear-gradient(25deg, #3a6186, #89253e); 
  color: white;
  font-size: 25px;
  padding: 40px;
  width: 50%;
  margin: auto;
}

.btn {
  width: 30px;
  height: 30px;
  background: #FFF;
  border: 1px solid #005bac;
  border-radius: 50%;
  color: #005bac;
  padding: 15px 10px 5px;
  position: fixed;
  text-align: center;
  transition: all 0.3s ease;
}

.btn:hover {
  background: #eef;
}

.zoom {
  bottom: 190px;
}

.zoom-out {
  bottom: 120px;
}
.zoom-init {
  bottom: 50px;
}

و الآن نأتي إلى إستعمال جافاسكربت عند الضغط على الأزرار نقوم بالتكبير والتصغير إعتماداً على خاصية الCss أي: "zoom" 

var zoom = 1;
		
$('.zoom').on('click', function(){
	zoom += 0.1;
  	$('body').css('zoom', zoom);
});

$('.zoom-init').on('click', function(){
  	zoom = 1;
  	$('body').css('zoom', zoom);
});
$('.zoom-out').on('click', function(){
  	zoom -= 0.1;
  	$('body').css('zoom', zoom);
});

لقد قمت بإستعمال مكتبة جيكويري بإمكانك تجربة الأكواد على codepen من خلال هذا الرابط: إضغط هنا

بالتوفيق

شكرا لك اخي عبود سمير ولاجابتك وشرحك المفيد 

هذا هوا بالضبط مااحتاج اليه 
لكن يوجد مشكلة صغيرة عند التكبير والتصغير الازرار ايضا يكبر حجمها ويصغر 

مااريده في هذه النقطة بالتحديد انا يكون التاثير فقط على محتوى الصفحة والازرار يكون حجمها ثابت .. هل لديك اي فكرة 

شكرا جزيلا لك كانت اجابة مفيدة جدا 

@عبود سمير

بتاريخ 12 دقائق مضت قال Mohamad Alhaj Mohamad:

شكرا لك اخي عبود سمير ولاجابتك وشرحك المفيد 

هذا هوا بالضبط مااحتاج اليه 
لكن يوجد مشكلة صغيرة عند التكبير والتصغير الازرار ايضا يكبر حجمها ويصغر 

مااريده في هذه النقطة بالتحديد انا يكون التاثير فقط على محتوى الصفحة والازرار يكون حجمها ثابت .. هل لديك اي فكرة 

شكرا جزيلا لك كانت اجابة مفيدة جدا 

@عبود سمير

هذا لأن الزوم مطبق على العنصر body و الأزرار تنتمي إلى الbody فإذا أردنا تطبيق خاصية الزوم فقط على البوكس فإننا نغير كود الجافاسكربت بهذا الشكل مثلاً 

var zoom = 1;

$('.zoom').on('click', function(){
	zoom += 0.1;
	$('.box').css('zoom', zoom);
});

يمكنك إلقاء نظرة على نفس الرابط السابق لتجربة النتيجة و لرؤية الكود كامل إضغط من فوق على زر change view ثم editor view و سيتغير المظهر للأكواد 
بالتوفيق

شكرا لك اخي عبود وتسلم ايدك تم حل المشكلة وحصلت على المطلوب بفضل اجابتك 

اتمنى لك الافضل بالتوفيق 

@عبود سمير