آموزش های رایگان طراحی وب

قالب های رایگان زیبا و بهینه

طراحی پوسته اختصاصی


آموزش هک و امنیت

پاسخ به مشکلات کدنویسی

آموزش با طنز و تفریح!




در این پست شما یاد میگیرین چحوری میتونین یک المنت توی صفحه رو به دور محیط یه دایره که خودتون تعیین میکنین بچرخونین .
این کار خیلی ساده هستش!
میتونین با خلاقیت خودتون جاهای مختلفی استفاده کنین...

ابتدا المنت مورد نظرتونو ایجاد کنین برای مثال :

<div  id="circ"></div>

برای المنت مورد نظر استایل بدین:

<style>
#circ{
width:200px;height:200px;background:tomato;padding:10px;margin:200px auto;border-radius:100%;position:relative
}
#circ:before{
content:'';
width:60px;
height:60px;
position:absolute;
background:#c0392b;
border-radius:100%;
left:40%;
top:40%;
}

</style>

کدی که برای perfix مرورگر های قدیمی (امیدوارم!) هست اتچ کنین:


<script src="http://up.monister.ir/view/1760843/prefixfree.min.js"></script>


حالا کار رسید به کدنویسی هسته ای :دی

<script>
var requestAnimationFrame = window.requestAnimationFrame ||
                            window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame ||
                            window.msRequestAnimationFrame;

یه جورایی همون setInterval خودمونه ... البته یه جورایی :دی

var posx,posy,first=0,el = document.getElementById('circ');

متغیر هارو یه جا تعریف میکنیم حوصله نداریم posx برای فاصله از چپ و posy برای فاصله از بالا هستش البته میتونین posx رو راست هم در نظر بگیرین :دی اونوقت برعکس میچرخه...

function move(){

تابع رو باز کن :دی

first += 0.05;
posx = 125 + 200 * Math.cos(first)
posy = 5 + 200 * Math.sin(first);

محیط دایره رو بساز البته عدد هاشونو میتونین اینور و اونور کنین :دی

el.style.left = posx + 'px'
el.style.top = posy + 'px';

پوزشین رو بده یادت نره px هم بذاری

requestAnimationFrame(move)

خوب انیمیشن رو بنداز رو تردمیل :دی

}

یادت نره تابع رو ببندی و بعد اجراش کنی:

move()


دیدین چه راحت بود؟


اینم دمو

نوشته شده در موضوع Javascript و Javascript For Weblog/site ودر چهارشنبه 20 مرداد 1395به دست Ehsan

درباره ی نویسنده ی این مطلب

مشاهده ی نوشته های این نویسنده

نظرات کاربران

سوالی درباره ی این مطلب دارید؟ خب بپرسید!
لطفا به نکات زیر توجه فرمایید :
1. سوالات نامربوط با مطلب فوق را در انجمن بپرسید.
2. نظرات محتوی هر گونه فحاشی اگر چه تایید می شوند ولی قسمت های ناپسند آن فیلتر می شود.
3. لطفا برای دریافت پاسختون هر از گاهی به نظرات مطلب مورد نظر سر بزنید.
این نظر رو یه دوست برامون تو تاریخ 1395/05/31و ساعت 23:33 فرستاده :
سلام داش احسان... خوبی ؟ چ خبر؟ نمیدونم منو میشناسی یا نه
یهویی یادت کردم
آی دی تلگرام داری ایمیل کن
یا به خودم یه پی ام بده تو تلگ
user: yedoost
خیلی مدیونتم داداش
پاسخ : سلام
آیدی تلگرامو رو فوتر سایت میتونی پیدا کنی
کد امنیتی رفرش