در این آموزش , قصد داریم به شما نحوه ایجاد چرخش عکس با jQuery را نشان بدیم . در آموزش قبلی نحوه تغییر پس زمینه تصویر در jQuery را دیدیم.
در این مثال از ایجاد چرخش عکس (rotate
) , ما از تابع animate
در جی کوئری استفاده می کنیم. با استفاده از این تابع ما خاصیت transform
تصویر را کنترل می کنیم.
کد HTML با دکمه های چرخش
این کد به شما المنت تصویر و لیست دکمه ها برای ایجاد چرخش عکس با jQuery را نشان می دهد.
1 2 3 4 5 6 7 8 |
<div> <label>Rotate Image:</label> <input type="button" class="btnRotate" value="90" onClick="rotateImage(this.value);" /> <input type="button" class="btnRotate" value="-90" onClick="rotateImage(this.value);" /> <input type="button" class="btnRotate" value="180" onClick="rotateImage(this.value);" /> <input type="button" class="btnRotate" value="360" onClick="rotateImage(this.value);" /> </div> <div><img src="coffee.jpg" id="demo-image" /></div> |
تابع چرخش عکس با jQuery
این تابع جی کوئری با تغییر خاصیت transform تصویر افکت چرخش را ایجاد می کند.
1 2 3 4 5 6 7 8 9 10 11 |
function rotateImage(degree) { $('#demo-image').animate({ transform: degree }, { step: function(now,fx) { $(this).css({ '-webkit-transform':'rotate('+now+'deg)', '-moz-transform':'rotate('+now+'deg)', 'transform':'rotate('+now+'deg)' }); } }); } |
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید.
مطلب عالی بسیار سپاس
سلام. خوشحالم که مفید واقع شده. موفق باشید.