جلسه 19

حركت 2

سلام

فرارسيدن ماه مبارك رمضان را به شما دوستان عزيز! تبريك مي‌گويم. اميدوارم كه اين ماه براي همه، پر از خير و بركت باشد.

تغييرات:
-
بحث "حركت دادن اشيا" به اين جلسه اضافه شده است. (جمعه 15 مهر)

بحث ما حركت است. در جلسه قبل، مشاهده كرديد كه حركت پنجره به چه راحتي انجام پذير است. در اين ساعت، خواهي ديد كه حركت اشيا به دنبال اشاره‌گر موس نيز به سهولت امكان دارد.

تعقيب اشاره‌گر

• براي اين عمليات، ابتدا موقعيت اشاره‌گر را به  دست مي‌آوريم. همانطور كه در تمرين جلسه قبل، اجرا شد، با اين دو دستور (event.clientY - event.clientX) مي‌شود موقعيت اشاره‌گر را گرفت.

نمونه:

موقعيت موس از بالا - clientY:

موقعيت موس از چپ - clientX:

• حالا بايد چيزي را كه مي‌خواهيد به دنبال اشاره‌گر، حركت كند مشخص نماييد. اين شي مي‌تواند از لحاظ ظاهر، متن يا عكس يا هر چيز ديگر، و از لحاظ محتوا، ثابت يا متغير باشد.
- سه متن بنويسيد؛ يك متن براي حركت عمودي، و يك متن براي حركت افقي، و يكي هم براي حركت كامل.
- هر كدام را داخل يك لايه قرار دهيد.
- لايه‌ها را به اين ترتيب نامگذاري نماييد: (div1 - divY - divX)
- استيل آنها را به اين صورت تعريف كنيد: (style=position: absolute). اين كد، به شي مورد نظر اجازه حركت مي‌دهد.

كد HTML:

<p><div id="div1" style="position: absolute;">متن</div></p>
<p><div id="divY" style="position: absolute;">عمودي</div></p>
<p><div id="divX" style="position: absolute;">افقي</div></p>

كد JavaScript:

function cursorPos() // تابع
{
// حركت عمودي و افقي
div1.style.top = event.clientY;
div1.style.left = event.clientX;
// حركت عمودي
divY.style.top = event.clientY;
// حركت افقي
divX.style.left = event.clientX;
}
document.onmousemove=cursorPos;

براي ديدن نمونه، اينجا كليك كنيد.

حركت دادن اشياء

در اين مبحث، خواهيم آموخت كه چگونه به وسيله موس، اشيا را جابجا كنيم؛ همانگونه كه در ويندوز به راحتي انجام مي‌شود.

• مراحل عمليات:

- ساختن شي مورد نظر
- به دست آوردن موقعيت اشاره‌گر
- به دست آوردن موقعيت شي مورد نظر
- تعريف كردن رويداد كليك و كشيدن

• شيئي كه براي اين كار در نظر گرفته‌ام، يك جدول است كه شبيه كادرهاي محاوره‌اي در ويندوز مي‌باشد.
- اين جدول، داراي دو سلول است. سلول اول، براي عنوان كادر و محل كشيدن و جابجايي، و سلول پايين، محل نوشته محتوي است.
- داخل سلول اول، يك لايه (div) قرار داده‌ام به نام (moveMe1). جدول را هم (moveMe)، نامگذاري نموده‌ام.
- استيل جدول را به اين صورت تعريف كنيد: (style=position: relative). اين كد، به شي مورد نظر اجازه حركت مي‌دهد.

كد HTML:

<table id="moveMe" style="position: relative;" border="0" width="200" bgcolor="#FBF9FB">
<tr>
<td bgcolor="#F6F4F6" align="center">
<div id="moveMe1">&nbsp;</div></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

كد JavaScript:

mouseover = true
function coordinates()
{
if (!moveMe)
{
return
}
if (event.srcElement.id == "moveMe1")
{
mouseover = true
// موقعيت جدول
pleft = moveMe.style.pixelLeft
ptop = moveMe.style.pixelTop
// موقعيت اشاره‌گر
xcoor = event.clientX
ycoor = event.clientY
document.onmousemove = funmove
}
}
function funmove()
{
if (mouseover && event.button == 1) // اگر كليك چپ شد
{
moveMe.style.pixelLeft = pleft + event.clientX-xcoor
moveMe.style.pixelTop = ptop + event.clientY-ycoor
moveMe1.style.cursor = "move"; // تغيير شكل اشاره‌گر
moveMe.style.filter = "alpha(opacity=50)"; // استفاده از فيلتر آلفا
return false
}
}
function mouseup()
{
moveMe1.style.cursor = ""; // شكل عادي اشاره‌گر
moveMe.style.filter = "alpha(opacity=100)"; // از كار انداختن فيلتر آلفا
mouseover = false
}
document.onmousedown=coordinates
document.onmouseup=mouseup
 

شرح كد:
- moveMe1.style.cursor = move = در جلسه 17، خوانديم كه شكل اشاره‌گر، قابل تغيير است. در اينجا، شكل "حركت" را انتخاب مي‌كنيم.
event.button == 1 = در جلسه 17، ديده شد كه كد كليك چپ، 1 است. با به دست آوردن اين كد، مي‌فهميم كه موس، در حالت كليك باقي مانده؛ يعني همان كشيدن به وسيله موس.
- moveMe.style.filter = "alpha(opacity=50)" = به وسيله اين كد، كه از زبان HTML است، به جدول خود، فيلتر آلفا، يا همان كمرنگ شدن در حالت جابجايي مي‌دهيم.

براي ديدن نمونه، اينجا كليك كنيد.

همانطور كه مشاهده كرديد، اين كار زيبا به سادگي امكان پذير است. شما هم مي‌توانيد در پايگاه و حتي وبلاگ خود، از كادرهاي متحرك استفاده كنيد. كادرهايي كه كاربر مي‌تواند آنها را جابجا نمايد. با به كارگيري كمي ذوق و سليقه، كادرهاي زيباتر، طبيعي‌تر و داراي قابليت بيشتري - مانند امكان كمينه (ميني مايز) كردن و يا بستن كادر - خواهيد ساخت.

اميدوارم كه اين درس برايتان مفيد بوده و از آن لذت ببريد.
به اميد ديدار
خدانگهدار


مطالب مشابه :


جلسه 19

- سه متن بنويسيد؛ يك متن براي حركت عمودي است كه شبيه كادرهاي محاوره كار زيبا به




شیوه نامه ارزشیابی درس های املا انشا و فارسی

روخواني متن با رعايت آهنگ و لحن املا و انشا و نگارش براي هر نيمسال كادرهاي گل




پاور پوينت Power Point

اجراي كار با استفاده از كادرهاي خودكار پرسشنامه اي . Text Box: ايجاد جعبه متن براي ورود متون .




ارسال فایل بدون اینترنت

نكته: براي استفاده از HyperTerminal شما به امكانات خاص نياز نداريد فقط كافي است كه كامپيوتر شما و




بارم بندی املاء وانشاء دوره راهنمایی ونکاتی دیگر

سوال از متن خلاقيت فراگيران كمك كند.براي نوشتن يك انشاي خوب و زيبا سازي دفتر




آموزش اكسس ( بخش چهارم)

در زير همين پنجره خصوصيات فيلد مربوط به متن براي ما عملكرد كادرهاي كار زيبا و




فرهنگ خواندن و نوشتن در كلاس علوم

با سلام خدمت دوستان و بازديد كنندگان گرامي بر آن شديم در جهت نشر علم و دانش در كشور عزيزمان




برچسب :