PDA

View Full Version : سوال: چرخاندن یک المان در جهت و خلاف عقربه های ساعت


manit44
جمعه 21 شهریور 1393, 11:24 صبح
سلام بر دوستان عزیز

من یک image دارم که میخوام این عکس در جهت و خلاف عقربه های ساعت و با زاویه 30 درجه و همچنین به طور مداوم بچرخه چکار باید بکنم؟

ممنون از تمامی دوستان.
Mori Bone
جمعه 21 شهریور 1393, 12:57 عصر
لینک یک (http://jsfiddle.net/Anatol/T6kDR/)
لینک دو (http://jsfiddle.net/WhZym/5/)
توضیح هم خواستی در خدمتم
manit44
جمعه 21 شهریور 1393, 15:01 عصر
ممنون از کمکتون خیلی خوب بود فقط یه سوال اگر بخوام این چرخش به طور مداوم انجام بشه پروپرتی duration رو چه چیزی باید ست کنم؟

باز هم ممنون.
Mori Bone
جمعه 21 شهریور 1393, 20:39 عصر
توی لینک یکی که من گذاشتم خط ۳۸ از قسمت جاوا اسکریپت(پایین بخشhtml) رو یه نگاه بندازین همه چی میاد دستتون. مقدار count هم نگاه کنید.
یا نه از این استفاده کنید:
تابع وبرایش شده چرخش شی (http://jsfiddle.net/Moribone/Lehbf1u4/2/)
manit44
شنبه 22 شهریور 1393, 11:08 صبح
سلام دوست عزیز

ممنون از راهنماییتون ولی من میخوام که این چرخش مداوم با زاویه 30 درجه انجام بشه تو لینکی که برای من گذاشتین چرخش به صورت 360 درجه هست.
Mori Bone
شنبه 22 شهریور 1393, 11:12 صبح
یعنی وقتی به زاویه ۳۰درجه رسید برگرده به حالت اول؟
اگه آره برات درستش کردم:

http://jsfiddle.net/Moribone/Lehbf1u4/4/
manit44
شنبه 22 شهریور 1393, 11:18 صبح
نه ببینید میخوام که با زاویه 30 و 30- درجه به طور مداوم در حال چرخش باشه و هیچموقع چرخش استوپ نشه یا به عبارتی دیگر در جهت موافق و مخالف عقربه های ساعت در حال چرخش باشه.

ممنون.
Mori Bone
شنبه 22 شهریور 1393, 11:23 صبح
نه ببینید میخوام که با زاویه 30 و 30- درجه به طور مداوم در حال چرخش باشه و هیچموقع چرخش استوپ نشه یا به عبارتی دیگر در جهت موافق و مخالف عقربه های ساعت در حال چرخش باشه.
ممنون.
چیزی که من فهمیدم لینک زیر هستش که خودم نوشتم:

http://jsfiddle.net/Moribone/Lehbf1u4/6/
ببخشید که خنگم:خجالت:
manit44
شنبه 22 شهریور 1393, 11:58 صبح
من اگه بخوام این کار رو برای عکس اول با زاویه ی 30 درجه و برای عکس دوم با زاویه ی 30- درجه انجام بدم این کد رو چطوری باید تغییرش بدم؟

ممنون.
Mori Bone
شنبه 22 شهریور 1393, 15:03 عصر
من اگه بخوام این کار رو برای عکس اول با زاویه ی 30 درجه و برای عکس دوم با زاویه ی 30- درجه انجام بدم این کد رو چطوری باید تغییرش بدم؟

http://jsfiddle.net/Moribone/Lehbf1u4/8/
godofphp
شنبه 22 شهریور 1393, 15:53 عصر
http://jsfiddle.net/Moribone/Lehbf1u4/8/
زیباتر شد :
http://jsfiddle.net/Lehbf1u4/9/
Mori Bone
شنبه 22 شهریور 1393, 17:00 عصر
زیباتر شد :
http://jsfiddle.net/Lehbf1u4/9/
از نظر زیبایی که میشه خیلی کارا کرد ولی از نظر پرفورمنس شاید هر کسی نتونی کاری بکنه و از نظر من بهینه سازی کد خیلی مهم تره. می تونستم که این نمونه کد رو زیباش کنم ولی خواستم که فقط این کاربر(ایجاد کننده تاپیک) رو راهنمایی کنم
من این کد رو تبدیلش کردم به وابستگی کامل به CSS:

http://jsfiddle.net/Moribone/Lehbf1u4/12/
یا:

http://jsfiddle.net/Moribone/Lehbf1u4/13/
godofphp
شنبه 22 شهریور 1393, 17:33 عصر
از نظر زیبایی که میشه خیلی کارا کرد ولی از نظر پرفورمنس شاید هر کسی نتونی کاری بکنه و از نظر من بهینه سازی کد خیلی مهم تره. می تونستم که این نمونه کد رو زیباش کنم ولی خواستم که فقط این کاربر(ایجاد کننده تاپیک) رو راهنمایی کنم
من این کد رو تبدیلش کردم به وابستگی کامل به CSS:

http://jsfiddle.net/Moribone/Lehbf1u4/12/
یا:

http://jsfiddle.net/Moribone/Lehbf1u4/13/
:تشویق:
......................
manit44
شنبه 22 شهریور 1393, 18:43 عصر
لطفا این پروژه نمونه را ببینید و سوالی که دارم اینه که چرا وقتی دو تا عکس به سمت بالا حرکت میکنند پرش میکنند من نمیخوام این حالت اتفاق بیفته میخوام حرکت کردن به سمت بالا هم به طور عادی انجام بشه.

لینک پروژه نمونه:
http://uplod.ir/whddnjpcb10r/WebApplication1.rar.htm
manit44
شنبه 22 شهریور 1393, 21:44 عصر
کسی جواب نمیده؟
godofphp
شنبه 22 شهریور 1393, 22:08 عصر
کسی جواب نمیده؟
کسی فکر نکنم دانلود کنه لطفا کد بزارید و سوالتون رو بپرسید
manit44
شنبه 22 شهریور 1393, 22:53 عصر
این کد css هست که نوشتم:

body {padding:30px;
}


img {
margin-bottom:30px;
width:150px;
height:100px;
position:relative;
}


img.manfi {
-webkit-animation: manfiRotation 2s infinite linear;
}
img.mosbat {
-webkit-animation: mosbatRotation 2s infinite linear;
}


@-webkit-keyframes manfiRotation {
from {-webkit-transform: rotate(20deg);}
to {-webkit-transform: rotate(-20deg);}
}
@-webkit-keyframes mosbatRotation {
from {-webkit-transform: rotate(-20deg);}
to {-webkit-transform: rotate(20deg);}
}



وقتی برنامه رو اجرا می کنم عکس با زاویه 20 و 20- درجه میچرخه ولی وقتی به سمت پایین حرکت میکنه یه پرش خاصی داره.

اینم کد html:

<body> <form id="form1" runat="server"> <div> <img src="1.jpg" class="mosbat" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="2.jpg" class="manfi" /> </div> </form></body>
manit44
شنبه 22 شهریور 1393, 23:22 عصر
خودم پیداش کردم.