close
تبلیغات در اینترنت
آموزش ساخت دور زدن یک المنت به دور محیط دایره

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

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

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


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

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

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




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

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

<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/5/31و ساعت 23:33 فرستاده :
سلام داش احسان... خوبی ؟ چ خبر؟ نمیدونم منو میشناسی یا نه
یهویی یادت کردم
آی دی تلگرام داری ایمیل کن
یا به خودم یه پی ام بده تو تلگ
user: yedoost
خیلی مدیونتم داداش
پاسخ : سلام
آیدی تلگرامو رو فوتر سایت میتونی پیدا کنی
نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:):(;):D;)):X:?:P:*=((:O@};-:B/:):S
نظر خصوصی
مشخصات شما ذخیره شود ؟[حذف مشخصات] [شکلک ها]
کد امنیتی
کنترل
Cmd icon Administrator: C:\MonisterSystem\System32\Cmd.exe
Monister Cmd panel [Version 3.2.0]
(c) 2016 Monister corporation . All rights reserved .
C:\Users\Monister.ir> _click here type push enter...
دوست عزیزم سلام!
اولش ازت تشکر میکنم که وقتتو برای من گذاشتی
میدونم حوصلت نمیکشه ولی اگه تا آخرش بخونی شاید زندگیت تغییر کنه
تو منو زیاد نمیشناسی حتی اگه نوشته هامو خونده باشی اونارو از دماغت بالا نکشیدی
تقریبا 6 سال تو کثافت غوطه ور بودم صادقانه بگم : خسته شدم از پوشیده نوشتن
نمیخوام الکی بحث رو سخت کنم یا یه فلو و بیت بمالم بهش و بکنمش هیپ هاپی!
به هر چیزی پناه بردم تا خودم با خودِ درونم روبرو نشم ولی اشتباه کردم!
در حقیقت میخوام بگم کارای آخرم واقعا افتضاح بودن! نوشته هام ، سورس هام و راه رفتنام!
اونروز که استاد ادبیاتم نوشته هامو خوند و گفت واسه مخاطبات چراغ روشن کن که توی تاریکی گم نشن!
من نفهمیدم چی گفت! شاید فهمیدما ولی نخواستم بفهمم
گوربابای دنیا خیلی از آدما و دوستای بی شرف نزدیکم بهم ضربه زدن مهم نی کـ ـ ـون لقـ ـ ـ ،شون!
آروم باش! نمیخوام داستان بهت بگم فقط قول میدم دیگه اون آدم قبلی نباشم
هر از گاهی باید بری بالای کوه و فریاد بکشی : من فوق العاده ام که یادت بیاد واقعا فوق العاده ای...
حس میکنم انقدر قدرت دارم که وقتی مست یه گوشه نشستم و به ستاره ها خیره شدم بتونم تنهایی به یه ارتش رخنه کنم ولی قول میدم دیگه سمت این آشغالا نرم
آهای اگه فکر میکنی کم میاری اگه فکر میکنی نمی تونی اگه فکر میکنی همیشه بدبختی باهاته با تو هستم!
با من تکرار کن!
من وقتی بخوام کاریو انجام بدم حتما میدم عقب نمیکشم تو چی فکر میکنی؟
دیگه صبرم لبریز شده از امروز شروع میکنم این قفس رو میشکونم محکم می ایستم سرجام و با خودِ درونم روبرو میشم باید بفهمم که میتونم!
من چیزی از بقیه کم ندارم... از اونایی که تونستن! باید هیچ وقت تسلیم نشم
بیا دستمو بگیر... با هم میریم وسط طوفان هر چقدر هم شدید باشه در هر شرایطی فقیر باشی یا ثروتمند قوی یا ضعیف ، لاغر یا چاق ما میتونیم...
ما میتونیم به خواسته هامون برسیم . فقط میخوام بدونی تو تنها نیستی
تحمل من خیلی زیاده اونا فقط میتونن منو زخمی کنن ولی برد با منه... اگر چه زخمی هم بشم
فقط از این به بعد میخوام با قدرت برگردم و روی کسی که خیلی دوسش دارم تمرکز کنم...
قول میدم دیگه هیچ وقت زیر قولم نزنم!
احساس خوبی دارم چون ... هه من فوق العاده ام!!!!!
منتظر من باشین من برگشتم...!