|
הרשם | ![]() |
שאלות ותשובות | ![]() |
רשימת חברים | ![]() |
לוח שנה | ![]() |
הודעות מהיום | ![]() |
חיפוש | ![]() |
|
![]() |
|
כלים לאשכול | תצורת הצגה |
![]() |
# 1 |
הנהלת הפורום לשעבר
|
[מדריך] JS - יצירת טקסט מתגולל (marquee) תקני
שלום לכולם, אחרי שהחלטתי שאני צריך אחד, התחלתי לנסות להכין, נחשו מה?....גם הצלחתי!.
לפני שאני ישכח, תודה לתומר (atom-bomb), הוא לא הצליח לעזור לי אבל לפחות ניסה... או קי, למי שיש ספק, קודם כל שיכנס לפה: http://validmarqee.sbsil.biz/ עכשיו נתחיל במדריך. דף HTML נראה ככה: HTML קוד:
<html> <head> </head> <body> </body> </html> HTML קוד:
<script type="text/javascript"> <!-- www.hosts.co.il - meshuga --> var timer=new Array(); var browser = navigator.appName; var ver=0; if(browser=="Netscape" || browser=="Opera") ver=1; function scroller(asd,updown,aaa){ var thediv=document.getElementById(asd); if(updown==1){ var thehight=thediv.childNodes[ver].offsetHeight-parseInt(thediv.style.height); if(aaa==1) thediv.scrollTop=thehight; aaa=0; if(thediv.scrollTop==0) thediv.scrollTop=thehight; thediv.scrollTop=thediv.scrollTop-1; }else{ if(aaa==document.getElementById(asd).scrollTop) thediv.scrollTop=0; aaa=thediv.scrollTop; thediv.scrollTop=thediv.scrollTop+1; } timer[asd]=setTimeout("scroller('"+asd+"',"+updown+","+aaa+")",20); } function stopscroller(asd2){ clearTimeout(timer[asd2]); } </script> קודם כל, לDIV צריך להיות שם מסויים שבHTML זה בעצם הID שלו. אז נתחיל בתוך הBODY כמובן: HTML קוד:
<div id="scrolldiv1"></div> עכשיו צריך לעשות לו את הגלילה, אז מוסיפים את זה לתוך הDIV: HTML קוד:
style="overflow:hidden;height:80px;" HTML קוד:
<div id="scrolldiv1" style="overflow:hidden;height:80px;"></div> עכשיו, שמים את התוכן של מה שאנחנו רוצים שיגלל בתוך הDIV שעשינו: HTML קוד:
<div id="scrolldiv1" style="overflow:hidden;height:80px;"> שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > </div> כלומר, ככה: HTML קוד:
<div id="scrolldiv1" style="overflow:hidden;height:80px;"> <div style="height:80px;"></div> שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > <div style="height:80px;"></div> </div> HTML קוד:
<div id="scrolldiv1" style="overflow:hidden;height:80px;"> <div> <div style="height:80px;"></div> שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > <div style="height:80px;"></div> </div> </div> אם אתם רוצים שהוא יעבוד מהכניסה לדף, אז הולכים לתג הbody ושמים שם: HTML קוד:
onload="scroller(DIVname,up-down);" DIVname: שם/ID של הDIV שלנו, במקרה הזה scrolldiv1. up-down: הכיוון, מלמטה למעלה שמים 0 מלמעלה למטה שמים 1. אז מה שיוצא לנו הוא: HTML קוד:
<body onload="scroller('scrolldiv1',0);">
נתחיל: חוזרים לDIV העיקרי שלנו, ושמים שם את אותה פונקציה ששמנו בbody רק בonmouseout (לא לשכוח לשים אותם ערכים) כך שיוצא ככה: HTML קוד:
<div id="scrolldiv1" style="overflow:hidden;height:80px;" onmouseout="scroller('scrolldiv1',0);">
חוזרים לDIV שעכשיו טיפלנו בו ומוסיפים לו את הפונקציה stopscroller בתוך onmouseover כלומר ככה: HTML קוד:
<div id="scrolldiv1" style="overflow:hidden;height:80px;" onmouseout="scroller('scrolldiv1',0);" onmouseover="stopscroller('scrolldiv1');">
וזהו, יש לכם DIV נגלל אוטומטי ותקין כמובן, נכון כיף... הקוד השלם: HTML קוד:
<html> <head> <script type="text/javascript"> <!-- www.hosts.co.il - meshuga --> var timer=new Array(); var browser = navigator.appName; var ver=0; if(browser=="Netscape" || browser=="Opera") ver=1; function scroller(asd,updown,aaa){ var thediv=document.getElementById(asd); if(updown==1){ var thehight=thediv.childNodes[ver].offsetHeight-parseInt(thediv.style.height); if(aaa==1) thediv.scrollTop=thehight; aaa=0; if(thediv.scrollTop==0) thediv.scrollTop=thehight; thediv.scrollTop=thediv.scrollTop-1; }else{ if(aaa==document.getElementById(asd).scrollTop) thediv.scrollTop=0; aaa=thediv.scrollTop; thediv.scrollTop=thediv.scrollTop+1; } timer[asd]=setTimeout("scroller('"+asd+"',"+updown+","+aaa+")",20); } function stopscroller(asd2){ clearTimeout(timer[asd2]); } </script> </head> <body onload="scroller('scrolldiv1',0);"> <div id="scrolldiv1" style="overflow:hidden;height:80px;" onmouseout="scroller('scrolldiv1',0);" onmouseover="stopscroller('scrolldiv1');"> <div> <div style="height:80px;"></div> שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > שי סוס <br/ > <div style="height:80px;"></div> </div> </div> </body> </html> לכל ה"נחמדים" חושבים ששלכם יצא יותר טוב?...תעשו, לא מעניין אותי רק אל תהרסו את האשכול. כל הזכויות על כתיבת המדריך והסקריפט הם שלי, אני יוצר הסקריפט ומי שרוצה לפרסם את המדריך חייב להוסיף שורה זו(עם הלינק ועם הכל, אם אני יראה את זה בלי זכויות או הלינק להוסטס...יהיה בלאגן): נכתב ע"י meshuga בלעדית לפורום HOSTS *יש להזכיר שאולי יהיו באגים בכל מני דפדפנים, נבדק רק על IE וFF. *אין להוריד זכויות חבר'ה. *אם מישהו מוצא איזה באג להודיע לי בבקשה. *אם יש בעיה במדריך ליידע אותי, כתבתי אותו מהר. -באג ידוע, לפעמים זה עולה פיקסל אם אתה מזיז את העכבר בתוך תחום הDIV. |
![]() |
חברים פעילים הצופים באשכול זה: 1 (0 חברים ו- 1 אורחים) | |
|
|