چرخش تصاویر در صفحات وب توسط jQueryRotate

 

 

jQueryRotate یک پلاگین ساده و در عین حال جالب و کاربردی است که امکان چرخش تصاویر در صفحات وب را برای شما فراهم کرده است . اینکار به سادگی و تنها با دادن زاویه چرخش دلخواه به تابع این پلاگین انجام میشود .همچنین شما می توانید این پلاگین را با توابع انیمیشن ترکیب کرده و حرکت چرخشی تصاویر را در هنگام وقوع رویداد دلخواه خود در صفحه مشاهده کنید . به عنوان مثال میتوانید هنگامی که نشانگر ماوس روی تصویر مورد نظر شما قرار گرفت ، تصویر را به طرف دلخواه و با زاویه دلخواه به چرخش در آورید و کاربر چرخیدن عکس را به صورت انیمیشن مشاهده نماید و یا اینکه در ساده ترین حالت تصویر در ابتدای بار شدن در صفحه چرخیده و ثابت شده باشد. این پلاگین دارای پارامترهایی مانند تعیین سرعت چرخش ، حداقل و حداکثر درجه گردش می باشد . با استفاده از این پلاگین می توانید جلوه های زیبا و کاربردی را وب سایت های خود ایجاد نمایید . در پایان میتوانید نسخه تست شده بر روی مرورگرهای رایج IE ، FireFox و Chrom را که در پلتفرم دات نت توسط وب سایت ها برای شما تهیه شده است را دانلود و توسط نرم افزار Visual Studio اجرا نمایید .

 

● حالت های کاربرد :

 

jQuery(imgElement).rotate(angleValue)
jQuery(imgElement).rotate(parameters)
jQuery(imgElement).rotateAnimation(parameters)

 

● پارامترها :

 

({angle:angleValue,
[preservePosition:preservePositionBoolean],
[animateAngle:animateAngleValue],
[easing:easingFunction],
[duration:durationValue],
!!! DEPRECATED !!! [maxAngle:maxAngleValue],
!!! DEPRECATED !!! [minAngle:minAngleValue],
[callback:callbackFunction],
[animatedGif:animatedGifBoolean],
[bind:[{event: function},{event:function} ] })

 

● شرح پارامترها :

 

angleValue // چرخش تصویر در جهت عقربه های ساعت با واحد درجه
[preservePositionBoolean] (boolean) //حفظ موقیت تصویر
[animateAngleValue] // چرخش تصویر به صورت انیمیشن به زاویه
[easing] // کنترل سرعت چرخش تصویر در حالت انیمیشن
[duration] // مدت زمان اجرای انیمیشن ، پیش فرض 1000 میلی ثانیه 
[maxAngleValue] // ماکزیمم میزان گردش در حالت انیمیشن
[minAngleValue] // مینیمم  میزان گردش در حالت انیمیشن
[callbackFunction] // فراخوانی یک تابع بعد از اتمام انیمیشن
[animatedGifBoolean](boolean) // پشتیبانی از چرخش فرمت gif
[bind: [ {event: function}...]  // بایند رویداد به تصاویر چرخشی



  ● مشاهده دموی پلاگین

● دانلود کد منبع کامل (305kb)

نظرات (6) -

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

  • mehrdad

    11/21/1393 08:01:31 ق.ظ | پاسخ به این نظر

    البته لازم به ذکر است نوشته روی تصویر با فونت بزرگ باشد نه اینکه به صورت title نمایش داده شود

  • میثم

    01/03/1394 02:02:07 ق.ظ | پاسخ به این نظر

    سلام  ببخشید اگه بخوایم تصویر رو با جیکوری آینه کنیم .. (قرینه ) چطور میشه ؟
    ممنون میشم به ایمیلم بفرستین تا با خبر بشم

Loading