عمل Zoom للصوره عبر javascript

يمكنك عمل تقريب للصوره أو Zoom للصوره عبر جافاسكريبت بإستخدام اكواد قليله جدا لتحديد الصوره في الكود التالي سيتم إستدعاء مكتبات jquery imageLens  و العنصر العنصر Tool في Css لعمل إطار دائري يوضح تحديد جزء من الصوره و Class zoom لعمل حجم وإرتفاع للصوره.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/587992/jquery.imageLens.js'></script> <style> tool { height: 100vh; display: flex; justify-content: center; align-items: center; } .zoom { width: 550px; height: 580px; } </style> <tool> <img id="zoom" class="zoom" src="https://bit.ly/2UDfhue"> </tool> <script id="rendered-js"> $(function () { $("#zoom").imageLens({ borderSize: 1, lensSize: 250 }); });</script>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/587992/jquery.imageLens.js'></script> <style> tool { height: 100vh; display: flex; justify-content: center; align-items: center; } .zoom { width: 550px; height: 580px; } </style> <tool> <img id="zoom" class="zoom" src="https://bit.ly/2UDfhue"> </tool> <script id="rendered-js"> $(function () { $("#zoom").imageLens({ borderSize: 1, lensSize: 250 }); });</script>

 

Yehia Online

Start

 

 

إسم الملف Zoom.HTML الملف بحجم 1 KB

إذا لم يبدأ التحميل أنقر علي {..Start..}If the download does not start, click

يمكنك الحصول علي المزيد من الأكواد الجاهزه عبر : www.Yehia.online/code-html