hakan648
یک شنبه 13 شهریور 1390, 16:59 عصر
سلام
چند باری در سایت دیدم که دوستان در مورد افکتی که در بعضی سایت های برای نمایش اخبار یا حدیث استفاده میکنند , سوال پرسیده بودند .
با بررسی ای که کردم , متوجه شدم یا از JQuery استفاده میکنند یا در موارد بسیار نادر , از تصاویر GIF یا Flash هم استفاده میکنند.
با توجه به پیچیدگی این کارها واکثرا حجیم بودنشون , تصمیم گرفتم با اطلاعات اندکی که در مورد JavaScript دارم , یک کنترل یا کتاب خانه ( نمیدونم به نوع برنامه نویسی چی میگن ) بنویسم تا دیگه نیازی به کارهای سخت نباشه . برای مشاهده نمونه از این برنامه اینجا کلیک کنید .
(http://developerteam.tk/Demo/WritingEffect/WritingEffect.html)
[ فایل ضمیمه در انتهای مقاله قرار داده شده ]
این برنامه , ابتدا آی دی تگ مورد نظرتون برای اجرای افکت رو دریافت میکنه و بعد دو تگ span با آی دی که شما براش مشخص کردید در اون قرار میده :
<div id="maintag">
<!-- in tag va ID ghabl az ejraye barname bayad tavasote shoma sakhte beshan !! -->
<span id="writer"></span>
<!-- in tag tavasote barname va id az parametr hayee voroodie barname , ke shoma moshakhas kardid , sakhte shode -->
<span id="cursor"></span>
<!-- in tag tavasote barname va id az parametr hayee voroodie barname , ke shoma moshakhas kardid , sakhte shode -->
</div>پس تا این جا شما سه رشته متن به برنامه پاس میدید که اولی آی دی تگی هست که شما در صفحه قرار دادید و قرار هست که محتویات در اون قرار بگیرند , 2 آی دی هم برای تگ های span ای هست که برنامه بطور خودکار میسازه - حدف از گرفتن آی دی برای 2 تگی که خود برنامه در تگ اصلی قرار میده , مهیا کردن امکان استایل دهی به قسمت های مختلف هست.
مثلا طبق مثال بالا ما تصمیم داریم که نشانگر ( cursor ) , قرمز و متن آبی باشه :
<style type="text/css">
#maintag #writer
{ color : blue; }
#maintag #cursor
{ color : red; }
</style>برای شروع کار باید فایل JavaScript رو به قسمت head سند HTML اتون اضافه کنید :
<script src="WritingEffect.js"></script>
و بعد لازمه که عبارت های مورد نظرتون رو داخل آرایه برنامه معرفی کنید :
( این کد هارو باید بعد از تگ اصلی قرار بدید , در مثال بالا بعد از تگ maintag)
<script type="text/javascript">
writer_text[0] = "opening connection.......................";
writer_text[1] = "connection already open !"
runWriter("maintag","writer","cursor",true,1000,10000,50,520); </script>
[ بوسیله آرایه writer_text میتونید بینهایت ( به میازن حافظه سیستم ) عبارت های مجزا تعریف کنید - هر عبارت در یک خط نمایش داده میشه ]
در کد بالا بعد از معرفی عبارت های مورد نظر به برنامه , باید تابع اصلی رو فراخوانی کنید [ ()runWriter ]
پارامترهای ورودی برنامه ( به ترتیب شماره , بعد از هر "," باید مقدار خواشته شده رو در تابع قرار بدید ) :
1 - آی دی تگ اصلی - این تگ توسط شما ساخته شده - تگ div بهتر هست - در مثال : maintag
2 - آی دی تگ span ای که توسط برنامه در حین اجرا ساخته میشه - عبارت های شمادر این قسمت نمایش داده میشن - برای استایل دهی استفاده کنید - در مثال : writer
3 - آی دی تگ span ای که توسط برنامه در حین اجرا ساخته میشه - یک نشانگر یا کرسر است , مثل چیزی که در notepad ویندو وجود داره - برای زیباتر کردن افکت - بوسیله آی دی مشخص شده توسط شما , میتونید از همین آی دی برای استایل دهی استفاده کنید - در مثال : cursor
4 - true یا false - حالت چند خطی بودن رو مشخص میکنه - در صورت true بودن , بعد از چاپ هر خط , یک تگ br قرار داده میشه که حالت چند خطی بودن بوجود بیاد - در صورت false بودن , بعد از چاپ هر خط یا عبارت , خط جاری پاک شده و در همون خط , عبارت بعدی چاپ میشه - در مثال : true
5 - زمان مکث بین عبارت ها یا خط ها به میلی ثانیه - هر میلی ثانیه = 0.001 ثانیه - در مثال : 1000
6 - زمان مکث بین هر دوره کامل اجرای برنامه - زمانی که برنامه پس از اجرای تمام عبارت ها برای شروع مجدد صبر میکند - در مثال : 10000
7 - زمان مکث بین رایت هر یک کاراکتر - یعنی اگر مقدار 500 باشه , در هر ثانیه 2 کاراکتر در صفحه چاپ میشه - در مثال : 50
8 - زمان مکث بین خاموش و روشن شدن کرسر - در مثال طوری تعیین شده تا مثل کرسر "نت پد" به نظر برسه - در مثال : 520
[ All TimeS Are In Milli Seconds ]
با توجه به زیاد بودن مطالب در مورد کارکرد و ترفندهایی که در برنامه قرار داره ( بیشتر از تمام کدهای نوشته شده!) این آموزش در همین جا متوقف میکنم .
منبع برنامه در فایل ضمیمه قرار داره - برای مشاهده مثال های بیشتر هم میتونید به سایتم سر بزنید :
DeveloperTeam.tk (http://DeveloperTeam.tk/)
(http://DeveloperTeam.tk/)
اگر دوستان مشکلی داشتن یا سوالی در مورد نحوه کارکرد - لطفا بعد از مطالعه کامل این پست ها و اجرای تمام مراحل گفته شده , سوال مورد نظرشون رو مطرح کنند تا پاسخ بدم .
درضمن تمام کدنویسی این برنامه توسط بنده و بدون هیچ منبع و مرجعی انجام شده - استفاده از اون و تغییر و ویرایش اون مجاز هست و نیازی به ذکر نام من نیست .
امیدوارم این برنامه بتونه رضایت شما رو جلب کنه ...
74842
چند باری در سایت دیدم که دوستان در مورد افکتی که در بعضی سایت های برای نمایش اخبار یا حدیث استفاده میکنند , سوال پرسیده بودند .
با بررسی ای که کردم , متوجه شدم یا از JQuery استفاده میکنند یا در موارد بسیار نادر , از تصاویر GIF یا Flash هم استفاده میکنند.
با توجه به پیچیدگی این کارها واکثرا حجیم بودنشون , تصمیم گرفتم با اطلاعات اندکی که در مورد JavaScript دارم , یک کنترل یا کتاب خانه ( نمیدونم به نوع برنامه نویسی چی میگن ) بنویسم تا دیگه نیازی به کارهای سخت نباشه . برای مشاهده نمونه از این برنامه اینجا کلیک کنید .
(http://developerteam.tk/Demo/WritingEffect/WritingEffect.html)
[ فایل ضمیمه در انتهای مقاله قرار داده شده ]
این برنامه , ابتدا آی دی تگ مورد نظرتون برای اجرای افکت رو دریافت میکنه و بعد دو تگ span با آی دی که شما براش مشخص کردید در اون قرار میده :
<div id="maintag">
<!-- in tag va ID ghabl az ejraye barname bayad tavasote shoma sakhte beshan !! -->
<span id="writer"></span>
<!-- in tag tavasote barname va id az parametr hayee voroodie barname , ke shoma moshakhas kardid , sakhte shode -->
<span id="cursor"></span>
<!-- in tag tavasote barname va id az parametr hayee voroodie barname , ke shoma moshakhas kardid , sakhte shode -->
</div>پس تا این جا شما سه رشته متن به برنامه پاس میدید که اولی آی دی تگی هست که شما در صفحه قرار دادید و قرار هست که محتویات در اون قرار بگیرند , 2 آی دی هم برای تگ های span ای هست که برنامه بطور خودکار میسازه - حدف از گرفتن آی دی برای 2 تگی که خود برنامه در تگ اصلی قرار میده , مهیا کردن امکان استایل دهی به قسمت های مختلف هست.
مثلا طبق مثال بالا ما تصمیم داریم که نشانگر ( cursor ) , قرمز و متن آبی باشه :
<style type="text/css">
#maintag #writer
{ color : blue; }
#maintag #cursor
{ color : red; }
</style>برای شروع کار باید فایل JavaScript رو به قسمت head سند HTML اتون اضافه کنید :
<script src="WritingEffect.js"></script>
و بعد لازمه که عبارت های مورد نظرتون رو داخل آرایه برنامه معرفی کنید :
( این کد هارو باید بعد از تگ اصلی قرار بدید , در مثال بالا بعد از تگ maintag)
<script type="text/javascript">
writer_text[0] = "opening connection.......................";
writer_text[1] = "connection already open !"
runWriter("maintag","writer","cursor",true,1000,10000,50,520); </script>
[ بوسیله آرایه writer_text میتونید بینهایت ( به میازن حافظه سیستم ) عبارت های مجزا تعریف کنید - هر عبارت در یک خط نمایش داده میشه ]
در کد بالا بعد از معرفی عبارت های مورد نظر به برنامه , باید تابع اصلی رو فراخوانی کنید [ ()runWriter ]
پارامترهای ورودی برنامه ( به ترتیب شماره , بعد از هر "," باید مقدار خواشته شده رو در تابع قرار بدید ) :
1 - آی دی تگ اصلی - این تگ توسط شما ساخته شده - تگ div بهتر هست - در مثال : maintag
2 - آی دی تگ span ای که توسط برنامه در حین اجرا ساخته میشه - عبارت های شمادر این قسمت نمایش داده میشن - برای استایل دهی استفاده کنید - در مثال : writer
3 - آی دی تگ span ای که توسط برنامه در حین اجرا ساخته میشه - یک نشانگر یا کرسر است , مثل چیزی که در notepad ویندو وجود داره - برای زیباتر کردن افکت - بوسیله آی دی مشخص شده توسط شما , میتونید از همین آی دی برای استایل دهی استفاده کنید - در مثال : cursor
4 - true یا false - حالت چند خطی بودن رو مشخص میکنه - در صورت true بودن , بعد از چاپ هر خط , یک تگ br قرار داده میشه که حالت چند خطی بودن بوجود بیاد - در صورت false بودن , بعد از چاپ هر خط یا عبارت , خط جاری پاک شده و در همون خط , عبارت بعدی چاپ میشه - در مثال : true
5 - زمان مکث بین عبارت ها یا خط ها به میلی ثانیه - هر میلی ثانیه = 0.001 ثانیه - در مثال : 1000
6 - زمان مکث بین هر دوره کامل اجرای برنامه - زمانی که برنامه پس از اجرای تمام عبارت ها برای شروع مجدد صبر میکند - در مثال : 10000
7 - زمان مکث بین رایت هر یک کاراکتر - یعنی اگر مقدار 500 باشه , در هر ثانیه 2 کاراکتر در صفحه چاپ میشه - در مثال : 50
8 - زمان مکث بین خاموش و روشن شدن کرسر - در مثال طوری تعیین شده تا مثل کرسر "نت پد" به نظر برسه - در مثال : 520
[ All TimeS Are In Milli Seconds ]
با توجه به زیاد بودن مطالب در مورد کارکرد و ترفندهایی که در برنامه قرار داره ( بیشتر از تمام کدهای نوشته شده!) این آموزش در همین جا متوقف میکنم .
منبع برنامه در فایل ضمیمه قرار داره - برای مشاهده مثال های بیشتر هم میتونید به سایتم سر بزنید :
DeveloperTeam.tk (http://DeveloperTeam.tk/)
(http://DeveloperTeam.tk/)
اگر دوستان مشکلی داشتن یا سوالی در مورد نحوه کارکرد - لطفا بعد از مطالعه کامل این پست ها و اجرای تمام مراحل گفته شده , سوال مورد نظرشون رو مطرح کنند تا پاسخ بدم .
درضمن تمام کدنویسی این برنامه توسط بنده و بدون هیچ منبع و مرجعی انجام شده - استفاده از اون و تغییر و ویرایش اون مجاز هست و نیازی به ذکر نام من نیست .
امیدوارم این برنامه بتونه رضایت شما رو جلب کنه ...
74842