افکت ذره بین جی کوئری. افکت ذره بین با استفاده از جی کوئری افزونه جی کوئری "Zoomy"

افزونه بزرگنمایی تصویر Zoomy که یک ذره بین واقعی را شبیه سازی می کند بررسی شد. در برخی موارد، استفاده از آن ناخوشایند است، زیرا ذره بین تصویر اصلی را می پوشاند و تمرکز بر روی ناحیه مورد نظر را دشوار می کند. برای تعیین موقعیت دقیق نقطه بزرگنمایی، می توانید از نسخه دیگری از ذره بین - jLoupe استفاده کنید. این افزونه برای کتابخانه رایگان اسکریپت جی کوئری توسط طراح وب کریس یوفر توسعه داده شده است. تنظیمات بسیار بیشتری دارد و به شما امکان می دهد جلوه های زیبایی ایجاد کنید که یک ذره بین را شبیه سازی می کند و یک قطعه تصویر بزرگ شده را در کنار مکان نما نشانگر نمایش می دهد.

سه گزینه برای پلاگین jLoupe در شکل نشان داده شده است. در سمت چپ یک ذره بین قطره ای و پیوندی به خروجی یک تصویر در مقیاس کامل است، در مرکز یک ذره بین مستطیلی بدون پیوند، در سمت راست یک ذره بین به شکل دایره است. متأسفانه، گرد کردن، درست مانند افزونه ذره بین Zoomy که قبلاً مورد بحث قرار گرفت، در مرورگرهای IE6 - IE8 کار نمی کند. به همین دلیل است که ذره بین آنها همیشه مستطیل شکل است و نسخه مناسب به طور کلی یک شرمساری کامل است.

نمونه هایی از پلاگین jLoupe نصب افزونه ذره بین jLoupe

ابتدا آرشیو را دانلود کنید. سپس، مانند همیشه، برای جلوگیری از سردرگمی، بیایید یک پوشه جدید در سایت ایجاد کنیم که آن را jloupe نامگذاری کنیم و آرشیو دانلود شده را در آن باز کنیم. سه فایل دریافت خواهیم کرد:
jquery-1.8.3.min.js، jquery.jloupe.js و یک تصویر پشتیبان برای ذره بین گرد loupe-trans.png.

برای اینکه افزونه کار کند، فقط باید class="jloupe" را برای تصویر تنظیم کنید و خروجی ذره بین خود را می توان به چندین روش سازماندهی کرد:
1. دو تصویر ایجاد کنید - تصویر اصلی (image.jpg) و بزرگ شده (image_big.jpg). در تگ تصویری که در صفحه قرار داده شده است، مسیر نسخه بزرگ شده را با استفاده از ویژگی data-original مشخص کنید:
.
2. فقط از یک تصویر بزرگ شده استفاده کنید و برای کاهش آن در مرورگر، با استفاده از ویژگی های عرض و ارتفاع، ابعاد مورد نیاز صفحه را تنظیم کنید. فقط به یاد داشته باشید که مقیاس گذاری انجام شده توسط مرورگر معمولاً کیفیت تصویر را کاهش می دهد:
.
3. در صورت لزوم، لینک کشف را ارائه دهید تصویر بزرگیا به یک شی دیگر، سپس استفاده کنید فرم زیر:
.

این کار نصب پلاگین jLoupe را تکمیل می کند و با باز کردن صفحه با تصویر در مرورگر می توانید نحوه عملکرد آن را مشاهده کنید.

نکته مهم:اگر سایت شما از چندین پلاگین jQuery استفاده می کند، راحت تر است که فایل jquery.js (ترجیحا آخرین نسخه) را به پوشه root منتقل کنید تا چندین بار آن را دانلود نکنید. در این صورت خط دسترسی به آن برای همه افزونه ها یکسان خواهد بود. به طور خاص، برای مثال ما به این صورت معلوم می شود:
.
استفاده از چندین در یک صفحه توصیه نمی شود نسخه های مختلف jQuery تا با هم تضاد نداشته باشند. در عین حال، حتماً عملکرد افزونه ها را با نسخه نصب شده jQuery، زیرا همه نسخه ها قابل تعویض نیستند.

تنظیم پارامترهای افزونه jLoupe

تنظیمات اولیه برای ذره بین jLoupe در فایل jquery.jloupe.js تنظیم شده است. برای تغییر آنها، آن را در هر ویرایشگر HTML یا Notepad باز کنید. در همان ابتدای فایل خطوطی با تنظیمات موجود وجود دارد که می توان آنها را تغییر داد:

تنظیمات پیش فرض ویژگی توضیحات تنظیم ذره بین

عرض	200	عرض
ارتفاع	200	ارتفاع
حاشیه	6	تورفتگی در اطراف ذره بین
cursorOffsetX	10	فاصله افقی از مکان نما
نشانگر OffsetY	10	فاصله عمودی از مکان نما
رنگ	نادرست	اجازه دادن به رنگ ها
مرز رنگ	"#999"	رنگ حاشیه
رنگ پس زمینه	"#ddd"	رنگ پس زمینه
radiusLT	0	شعاع بالا سمت چپ گرد ذره بین
radiusLB	100	شعاع پایین سمت چپ گرد ذره بین
radiusRT	100	شعاع بالا سمت راست گرد ذره بین
شعاع RB	100	شعاع پایین سمت راست گرد شدن ذره بین
تصویر	نادرست	آدرس تصویر خارجی برای ذره بین (url تصویر) - نوع ذره بین را تعیین می کند. در مثال درست، این یک تصویر دایره ای است loupe-trans.png
تکرار کن	نادرست	تصویر پس زمینه تکراری
محو شدن	درست است	استفاده از تاریکی هنگام خروجی ذره بین
fadeIn	درست است	زمان تاریک شدن هنگام باز شدن (ms)
محو شدن	درست است	زمان تاریک شدن هنگام بسته شدن (ms)

به عنوان مثال، برای ذره بین قطره ای شکل که در بالای مقاله (سمت چپ) نشان داده شده است، از تنظیمات پیش فرض و برای تصویر سمت راست از موارد زیر استفاده می شود:
شعاعLT: 100
حاشیه: 12،
رنگ حاشیه: نادرست،
رنگ پس زمینه: "#ffffee"،
image: "jloupe/loupe-trans.png"

برای گزینه ذره بین مستطیلی (در مرکز)، هیچ تصویر خارجی مورد نیاز نیست (تصویر: نادرست):
شعاعLT: 0،
شعاعRT: 10
شعاع RB: 0،
شعاعLB: 10،
عرض: 300
ارتفاع: 150
borderColor: "#f2730b"،
رنگ پس زمینه: "#000"،
محو شدن: نادرست،
تصویر: نادرست

برای سایر برنامه های بزرگنمایی تصاویر و همچنین ایجاد گالری عکس، چرخ فلک و نمایش اسلاید در سایت، به بخش " مراجعه کنید.

افزونه زومی جلوه زیبایی از شناور ذره بین روی تصویر را پیاده سازی می کند. همه چیز در سطح بالا- ذره بین "شبیه" به نظر می رسد.

تست شده در:

IE 6-8
فایرفاکس 4
Opera 9.5-10
سافاری 4
کروم

چه چیزی را دانلود کنیم؟

کتابخانه jquery یا .
(10.99 Kb) - افزونه یا آن (4.49 Kb).
سبک های (2.87 کیلوبایت) برای ذره بین.

شروع سریع

ما کتابخانه ها و شیوه نامه ها را به هم وصل می کنیم:

HTML ساده و شهودی است - یک تصویر کوچک که با یک پیوند به یک بزرگتر پیچیده شده است. برای سهولت در مقداردهی اولیه، بزرگنمایی کلاس را به پیوند اختصاص می دهیم.

پلاگین را راه اندازی کنید:

jQuery(function())( jQuery(."zoom").zoomy(); ));

همین.

و اکنون با جزئیات بیشتر

در طول مقداردهی اولیه، می توانید پارامترهای زیر را ارسال کنید:

پارامترهای zoomy() رویدادها

می توانید ذره بین را پیکربندی کنید تا بسته به عملکرد کاربر روشن شود. چهار رویداد در دسترس است:

نمونه هایی از مقداردهی اولیه با پارامترها

نصب ذره بین اندازه را تنظیم می کنیم، کتیبه را Russify می کنیم، ویژگی را با آدرس تصویر بزرگ تغییر می دهیم.

1. افزونه jQuery ذره بین

بزرگ کردن مساحت مربع

2. زوم ابری

این افزونه به هیچ وجه از نظر کیفیت کمتر از اسکریپت های مقیاس بندی تصویر تجاری مانند Magic Zoom نیست. بسیاری از ویژگی های مختلف و سازگاری با محبوب ترین مرورگرها. توصیه می کنم این اسکریپت را به صورت عملی در صفحه نمایشی تماشا کنید. فکر می کنم او شما را بی تفاوت نخواهد گذاشت.

3. پلاگین jQuery برای بزرگ کردن متن یا قسمت تصویر زیر ماوس

اسکریپت نسبتاً انعطاف پذیر. مناطق نمایش به راحتی با استفاده از CSS قابل تنظیم هستند. این افزونه یک ناحیه کوچک زیر بغل را بزرگ می کند. با دوبار کلیک کردن، بین اندازه بزرگ و کوچک همه محتوا جابه‌جا شوید

4. پلاگین جی کوئری برای بزرگنمایی تصویر

به شکل صفحه نمایش آیفون ساخته شده است.

5. افزونه MooTools Zoomer

برای مشاهده جزئیات یک تصویر، به سادگی ماوس خود را روی آن قرار دهید.

6. نمونه کارها جی کوئری با جلوه زوم

یک پیاده‌سازی جالب از یک نمونه کار که با اتصال دو پلاگین جی کوئری ایجاد شده است: Cloud Zoom و Fancybox. هنگامی که ماوس خود را روی یک تصویر کوچک قرار می دهید، یک کپی بزرگ شده از ناحیه زیر مکان نما ظاهر می شود. با کلیک بر روی یک تصویر کوچک، یک گالری Fancybox باز می شود که به شما امکان می دهد چندین تصویر در اندازه کامل آن پروژه را در نمونه کار خود مشاهده کنید.

7. افزونه جی کوئری “Easy Image Zoom”

ناحیه زیر مکان نما را بزرگ می کند.

8. افزونه جی کوئری "Zoomy"

افکت ذره بین برای بزرگنمایی بخشی از تصویر.

9. پلاگین جی کوئری "BeZoom" 10. پلاگین جی کوئری "ImageLens"

جلوه ذره بین هنگام قرار دادن ماوس روی تصویر. با استفاده از jQuery پیاده سازی شده است.

11. افزونه jQuery “Magnifier”

تاثیر افزایش مساحت تصویر بر شناور.

12. زنگ تصویر برای فروشگاه اینترنتی "jqZoom"

می توان از آن برای اجرای مشاهده دقیق محصولات در فروشگاه های آنلاین استفاده کرد.

13. یک تصویر بزرگ را در یک منطقه محدود مشاهده کنید

پلاگین jQuery امکان اجرای نمایش یک تصویر بزرگ را در یک بلوک محدود فراهم می کند. در این مورد، ناوبری با حرکت دادن مستطیل در سراسر تصویر کوچک انجام می شود.

14. افزونه AJAX-zoom

AJAX-zoom یک پلاگین گالری بسیار کاربردی با طیف گسترده ای از ویژگی ها است. این افزونه بر روی JQuery و PHP اجرا می شود و دارای بیش از 250 گزینه نمایش است. این افزونه علاوه بر عملکرد، یک افزونه بسیار انعطاف پذیر است که می تواند در هر وب سایتی ادغام شود.

در این آموزش به ایجاد افکت ذره بین برای یک تصویر ثابت تنها با استفاده از jQuery و CSS خواهیم پرداخت.

مرحله 1. XHTML

نشانه گذاری برای دستیابی به اثر بسیار ساده است. ما فقط از چند مورد استفاده می کنیم بخشو تصویر

دمو.html

بخش#iphone قاب آیفون را نمایش می دهد. داخل آن قرار دارد بخش#صفحه وب با اسکرین شات از صفحه. اسکرین شات به نصف اندازه واقعی خود نشان داده می شود، بنابراین برای نسخه کوچک (نشان داده شده در قاب آیفون) و نسخه بزرگ که در پنجره گرد نشان داده شده است، از همان تصویر استفاده می کنیم.

نیز وجود دارد بخش#retina که با استفاده از CSS3 به شکل گرد تنظیم شده است. یک نسخه بزرگتر از اسکرین شات صفحه را به عنوان پس زمینه نمایش می دهد و با حرکت مکان نما ماوس حرکت می کند.

مرحله 2: CSS

بیایید استایل ها را برای بخش#iphone، #صفحه وب و #رتینا که امکان تحقق اثر مورد نظر را فراهم می کند.

style.css #iphone( /* Frame div iphone */ width:750px; height:400px; background:url("img/iphone_4G.png") no-repeat center center; position:relative; ) #webpage( /* حاوی اسکرین شات */ عرض: 499 پیکسل; بنابراین می‌توانیم آن را جابه‌جا کنیم */ position:absolute; عرض: 180px .cur")، پیش‌فرض؛ /* سایه CSS3 */ -moz-box-shadow:0 0 5px # 777، 0 0 10px #aaa inset؛ -webkit-box-shadow:0 0 5px #777؛ box-shadow: 0 0 5px #777, 0 0 10px #aaa inset -webkit-border-radius:90px ; ), پیش فرض ) #main( /* Main Div * /margin:40px auto;

موقعیت:نسبی; بخشعرض: 750 پیکسل )

بخشبا تعیین موقعیت مطلق بخشدر صفحه، می‌توانیم از تکنیک وسط عمودی و افقی استفاده کنیم، که به طور موثر اسکرین شات را در مرکز قاب آیفون قرار می‌دهد. بخش#رتینا همچنین موقعیت‌یابی مطلق را دریافت می‌کند، بنابراین می‌توان آن را در قسمت‌های jQuery به سادگی با تنظیم یک افست از بالا و چپ حرکت داد. داده شده است

همچنین دارای یک اسکرین شات از صفحه به عنوان پس زمینه (در اندازه اصلی آن). جابجایی پس زمینه هنگام حرکت بخشاین توهم بزرگ شدن یک قطعه کوچک از اسکرین شات پشت آن را ایجاد می کند. همچنین#رتینا شعاع حاشیه ای با مقداری معادل دقیقاً نصف عرض آن دارد که آن را دقیقاً گرد می کند (حداقل در مرورگرهایی که این ویژگی را پشتیبانی می کنند.

شعاع مرزی CSS3 - کروم، سافاری، اپرا و فایرفاکس).و در نهایت نشانگر ماوس را با تنظیم مکان نما خالی مخفی می کنیم (

گوگل کروم

هنگام ارائه یک مکان نما کاملاً خالی خطا می دهد، بنابراین باید یک مکان نما سفید 1 پیکسل برای آن تنظیم کنیم). Opera به طور کامل نشانگرهای کاربر را نادیده می گیرد و هیچ کاری نمی توان در مورد این واقعیت انجام داد. بنابراین کاربران این مرورگر در هنگام مشاهده افکت تجربه منفی خواهند داشت.

script.js $(document).ready(function())( /* وقتی رویداد آماده دریافت شد کد اجرا می شود */ var left = 0، top = 0، sizes = ( retina: ( عرض:190، ارتفاع: 190)، صفحه وب: ( عرض: 500، ارتفاع: 283 ) )، صفحه وب = $("#webpage")، offset = ( سمت چپ: webpage.offset().left، بالا: webpage.offset().top)، retina = $("#retina"); e.pageX-offset .left = (e.pageY-offset.top if(retina.is(":not(:animated):hidden"))( webpage.trigger("mouseenter"); if(اندازه های سمت چپ. webpage.height) ( /* اگر خارج از مرزهای اسکرین شات صفحه هستیم، پس شبکیه div */ if(!retina.is(":animated"))( webpage.trigger(" mouseleave")؛ ) return false; ) / * div شبکیه را پشت ماوس حرکت دهید (و پس زمینه را اسکرول کنید) */ retina.css(( سمت چپ: sizes.retina.width/2، بالا: top - sizes.retina .height/2, backgroundPosition: "-"+(1.6 *چپ)+"px -"+(1.35*بالا)+"px"));mouseleave(function())(retina.stop(true,true). fadeOut ("سریع");

)).mouseenter(function())( retina.stop(true,true).fadeIn("سریع"); )); ))) در عملکردحرکت ماوس مختصات فعلی نشانگر ماوس به عنوان ارسال می شود e.pageX و e.pageY بخش، اما نسبت به کل سند مطلق هستند. کم کردن افست بخش#webpage، مختصات نسبی نشانگر ماوس را دریافت می کنیم که بعداً برای موقعیت یابی استفاده می شود

#شبکیه چشم

بنابراین، در ترکیب با مکان نما خالی، تنها با استفاده از جاوا اسکریپت و CSS یک افکت ذره بین ایجاد می کنیم.

نتیجه گیری

بحث بین طرفداران Flash و HTML5 اخیراً داغ شده است زیرا مردم شروع به جستجوی راه هایی برای دستیابی به همان سطح عملکرد بدون استفاده از برنامه های کاربردی خارجی کرده اند. این رویکرد منجر به کاربردهای ساده‌تر می‌شود. با این حال، ما باید به خاطر داشته باشیم که سازگاری راه حل ها با مرورگرهای متقابل را حفظ کنیم، که همیشه امکان پذیر نیست (IE را به یاد داشته باشید).