Example showing DIV+CSS implementation of radio station list

This article mainly introduces the sample code of p+CSS to implement radio station list design. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look

CSS Spite technology: that is, CSS sprite technology. In fact, CSS sprites are icon elements in pictures. These icons can make buttons, labels, logos, etc. . This technology has been applied to many websites, which can effectively reduce the number of transmission requests. The required icons are summarized in one image, and can be applied to the entire page once downloaded

The following examples are mainly the application of CSS wizard technology. Direct Po code:

       
  
 
 
 
 
 
 
 
 
酷狗热歌
 徐朗 - 小夜曲 
 
 
 
 
 
 
 
 
 
DJ热碟
 曾春年 - 最幸福的人 
 
 
 
 
 
 
 
 
 
网络红歌
 徐志强 - 想你的时候 
 
 
 
 
 
 
 
 
 
新歌
 孙俪 - 美丽信号 
 
 
 
 
 
 
 
 
 
经典
 游鸿明 - 寻你 
 
 
 
 
 
 
 
 
 
怀旧粤语
 陈慧娴 - 人生何处不相逢 
 
 
 
 
 
 
 
 
 
钢琴
 July - My Soul 
 
 
 
 
 
 
 
 
 
KTV必点
 蔡健雅 - 无底洞 
 
 
 
 
 
 
 
 
 
思念
 张杰 - 这就是爱 
 
 
 
 
 
 
 
 
 
DJ外文舞曲
 Jean Cloud Ades 
 
 
   

Generation effect:

## Code analysis:

1.ul tag contains 10 li tags inside. Because the icon of each li tag is a different sub-picture, different class attributes are added to each li tag.

2. The p tag whose class attribute is d for each li tag contains three p tags. Their class attributes are img, mask and play. These three tags are theme icon, mask in turn. icon and play icon, and their parent node p (class attribute is d) has a background image as a border.

3. Each li tag has added onmouseover and onmouseout event response letters.

4. The last piece of js code is to simulate the effect of the song name rising when the music box switches songs.

First, the program obtains the tag with the id of frm, and obtains all li sub-tags of the tag. At the same time, it obtains all li span tags, and binds the first span tag to span_obj of the li tag object.

Two timeout functions: showext() and showup(). The showup() function is responsible for producing the song title raising effect, and the function showext() is responsible for switching to the playback of the song on the next music station.

The method of an object cannot set itself as a timeout function

The above is the detailed content of Example showing DIV+CSS implementation of radio station list. For more information, please follow other related articles on the PHP Chinese website!