אתרי פיתוח חוגאינטרנט

13שיעור

ב מוסיקה רשימת Java Scriptיצירת

עמוד. 1 בשם htmlנפתח media.htmlחדש

בשם. 2 תיקייה ' audioניצור שירים מס אליה ונגרור

<div class="play">מהרשימה שיר :בחר <ul> <li class="music1"> song number 1 </li> <li class="music2">song number 2 </li> <li class="music3"> song number 3 </li> <li class="music4">song number 4 </li> <li class="music5"> song number 5 </li> </ul> </div>

פריט. 3 ולכל רשימה ניצורשם ניתן ברשימה

מחלקה שם את ונכתוב אחר

השיר

ה. 4 נגדיר cssבקובץעל לחיצה בעת קורה מה

ברשימה פריט כל

.music1, .music2, .music3, .music4, .music5 {

cursor: pointer; width: 100px;}

<div class="song1"> <audio controls="controls" > <source src="audio/1.mp3" type="audio/mpeg" /></ audio ></div>

הקוד. 5 שורת את נעתיק כעתה לעמוד מתחת htmlהבאה

שם את רק ונשנה לרשימההשיר ושם המחלקה

שורת. 6 אותה את ונדביק נעתיקפעם ובכל שם קוד את רק נשנה

המחלקה ושם השיר

ה. 7 נגדיר cssבקובץ. מוחלט מיקום מהשירים אחד לכל

.song1, .song2, .song3, .song4, .song5 {

position:absolute ; }

קובץ. 8 אותו javascriptניצור ונמקם חדשבספריית

Jscript

$(document).ready(function () {

$("li.music1").click(function () { $(".song1").fadeIn(); $(".song2").fadeOut(); $(".song3").fadeOut(); $(".song4").fadeOut(); $(".song5").fadeOut();});});

קובץ. 9 את נפתח כעתJavaScriptה

. הבא הקוד את אליו ונעתיק

על. 10 לחיצה שבעת מגדיר הקוד , השיר יוצג הראשון הפריט

. הראשון

ונשנה. 11 קוד שורת אותה את נעתיק

השיר ואת הפריט שם את פעם בכל. הלחיצה בעת יציג הוא שאותו