زوم کردن تصاویر و متون

بهنام رسولی | ۱۱ بهمن ۱۳۹۳ | دسته : پلاگین هایjquery | بدون دیدگاه

کتابخانه جاوا اسکریپت برای زوم کردن روی تصاویر و متن ها :

نحوه استفاده :

اضافه کردن کتابخانه :

<script src="zoomerang.js"></script>

۱	<script src="zoomerang.js"></script>

تنظیمات کتابخانه :

           Array.prototype.forEach.call(document.querySelectorAll('p'), function (p, i) {
                p.style.marginLeft = i * 6 + '%'
            })
            Zoomerang
                .config({
                    maxHeight: 400,
                    maxWidth: 400,
                    bgColor: '#000',
                    bgOpacity: .85,
                    onOpen: openCallback,
                    onClose: closeCallback
                })
                .listen('.zoom')

            function openCallback (el) {
                console.log('zoomed in on: ')
                console.log(el)
            }

            function closeCallback (el) {
                console.log('zoomed out on: ')
                console.log(el)
            }

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

Array.prototype.forEach.call(document.querySelectorAll('p'), function (p, i) {

p.style.marginLeft = i * ۶ + '%'

})

Zoomerang

.config({

maxHeight: ۴۰۰,

maxWidth: ۴۰۰,

bgColor: '#۰۰۰',

bgOpacity: .۸۵,

onOpen: openCallback,

onClose: closeCallback

})

.listen('.zoom')

function openCallback (el) {

console.log('zoomed in on: ')

console.log(el)

}

function closeCallback (el) {

console.log('zoomed out on: ')

console.log(el)

}

برای استفاده باید به تگ مورد نظر کلاس zoom را داد :

<span class="zoom">iwebpro.ir</span>

۱	<span class="zoom">iwebpro.ir</span>

لینک کوتاه مطلب

زوم کردن تصاویر و متون

دیدگاه ها

ارسال نظرات

لغو پاسخ

زوم کردن تصاویر و متون

پست های مرتبط

پلاگین جی کوئری انیمیشن پس زمینه ویو

اسلایدر hero-ریسپانسیو

نویگیشن های زیبا

دیدگاه ها

ارسال نظرات

لغو پاسخ