Maison > Article > interface Web > Exemple montrant l'implémentation DIV+CSS de la liste des stations de radio
Exemple montrant l'implémentation DIV+CSS de la liste des stations de radio
- 巴扎黑original
- 2017-09-02 09:57:321923parcourir
Cet article présente principalement l'exemple de code de p+CSS pour implémenter la conception de listes de stations de radio. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour jeter un œil à la
Technologie CSS Spite : c'est-à-dire la technologie des sprites CSS. En fait, les sprites CSS sont des éléments d'icônes dans les images. Ces icônes peuvent créer des boutons, des étiquettes, des logos, etc. Cette technologie a été appliquée à de nombreux sites Web, ce qui peut réduire efficacement le nombre de demandes de transmission. Les icônes requises sont résumées dans une seule image et peuvent être appliquées à la page entière une fois téléchargées
Les exemples suivants sont principalement les suivants. application de la technologie CSS Wizard :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>酷狗电台列表设计</title>
<style>
#frm{
margin:0;
padding:0;
list-style-type: none;
width: 500px;
border:1px solid #000;
overflow: hidden;
}
#frm *{
margin:0;
padding: 0;
font-size: 12px;
}
#frm li{
padding:4px 0;
width: 47%;
float: left;
margin:5px 15px 5px 0;
cursor: pointer;
}
#frm li span{
color:#999;
position: relative;
}
#frm li .d{
width: 38px;
height: 38px;
float: left;
margin:0px 12px 6px 0;
background-image: url(img/spite2.jpg);
position: relative;
}
#frm li .cont{
position: relative;
height: 37px;
overflow: hidden;
}
.cont p{
margin:5px 0 5px 0;
}
.d p{
position: absolute;
width: 100%;
height: 100%;
}
.d .img,.d .play{
background-image: url(img/spite2.jpg);
}
.l1 .d .img{
background-position: 38px 0;
}
.l2 .d .img{
background-position: 76px 0;
}
.l3 .d .img{
background-position: 114px 0;
}
.l4 .d .img{
background-position: 152px 0;
}
.l5 .d .img{
background-position: 190px 0;
}
.l6 .d .img{
background-position: 228px 0;
}
.l7 .d .img{
background-position: 266px 0;
}
.l8 .d .img{
background-position: 304px 0;
}
.l9 .d .img{
background-position: 342px 0;
}
.ll .d .img{
background-position: 380px 0;
}
.d .mask,.d .play{
visibility: hidden;
}
.choose .d{
background-position: 38px 0;
outline: 1px solid rgb(233,243,250);
}
.choose .d .mask{
background-color: #000;
filter:alpha(Opacity=50);
opacity: 0.5;
height: 32px;
width: 32px;
top:3px;
left: 3px;
visibility: visible;
}
.choose .d .play{
background-position: 418px 0;
visibility: visible;
}
.choose .cont p{
font-weight: bold;
color:rgb(0,155,250);
}
</style>
<script>
function mouseoverhandle(obj){
obj.className += ' choose';
}
function mouseouthandle(obj){
obj.className = obj.className.substring(0,2);
}
</script>
</head>
<body>
<ul id="frm">
<li class="l1" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<p class="d">
<p class="img"></p>
<p class="mask"></p>
<p class="play"></p>
</p>
<p class="cont">
<p>酷狗热歌</p>
<span href="#">徐朗 - 小夜曲</span>
</p>
</li>
<li class="l2" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<p class="d">
<p class="img"></p>
<p class="mask"></p>
<p class="play"></p>
</p>
<p class="cont">
<p>DJ热碟</p>
<span href="#">曾春年 - 最幸福的人</span>
</p>
</li>
<li class="l3" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<p class="d">
<p class="img"></p>
<p class="mask"></p>
<p class="play"></p>
</p>
<p class="cont">
<p>网络红歌</p>
<span href="#">徐志强 - 想你的时候</span>
</p>
</li>
<li class="l4" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<p class="d">
<p class="img"></p>
<p class="mask"></p>
<p class="play"></p>
</p>
<p class="cont">
<p>新歌</p>
<span href="#">孙俪 - 美丽信号</span>
</p>
</li>
<li class="l5" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<p class="d">
<p class="img"></p>
<p class="mask"></p>
<p class="play"></p>
</p>
<p class="cont">
<p>经典</p>
<span href="#">游鸿明 - 寻你</span>
</p>
</li>
<li class="l6" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<p class="d">
<p class="img"></p>
<p class="mask"></p>
<p class="play"></p>
</p>
<p class="cont">
<p>怀旧粤语</p>
<span href="#">陈慧娴 - 人生何处不相逢</span>
</p>
</li>
<li class="l7" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<p class="d">
<p class="img"></p>
<p class="mask"></p>
<p class="play"></p>
</p>
<p class="cont">
<p>钢琴</p>
<span href="#">July - My Soul</span>
</p>
</li>
<li class="l8" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<p class="d">
<p class="img"></p>
<p class="mask"></p>
<p class="play"></p>
</p>
<p class="cont">
<p>KTV必点</p>
<span href="#">蔡健雅 - 无底洞</span>
</p>
</li>
<li class="l9" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<p class="d">
<p class="img"></p>
<p class="mask"></p>
<p class="play"></p>
</p>
<p class="cont">
<p>思念</p>
<span href="#">张杰 - 这就是爱</span>
</p>
</li>
<li class="ll" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<p class="d">
<p class="img"></p>
<p class="mask"></p>
<p class="play"></p>
</p>
<p class="cont">
<p>DJ外文舞曲</p>
<span href="#">Jean Cloud Ades</span>
</p>
</li>
</ul>
<script>
var ul = document.getElementById('frm');
var li = document.getElementsByTagName('li');
var spans;
for(var i=0;i<li.length;i++){
spans = li[i].getElementsByTagName('span');
li[i].span_obj = spans[0];
}
var index = -1;
function showup(){
if(li[index].span_obj.style.top == ''){
li[index].span_obj.style.top = '13px';
}
if(parseInt(li[index].span_obj.style.top)<=0){
li[index].span_obj.style.top = '';
setTimeout('shownext()',1000);
}else{
li[index].span_obj.style.top = parseInt(li[index].span_obj.style.top)-1 +'px';
setTimeout('showup()',100);
}
}
function shownext(){
index++;
index = index%li.length;
showup();
}
setTimeout(shownext,1000);
</script>
</body>
</html>Effet de génération :
Code. analyse :
La balise 1.ul contient 10 balises li à l'intérieur. Étant donné que l'icône de chaque balise li est une sous-image différente, différents attributs de classe sont ajoutés à chaque balise li.
2. La balise p dont l'attribut de classe est d pour chaque balise li contient trois balises p. Leurs attributs de classe sont img, mask et play. Ces trois balises sont tour à tour l'icône du thème, l'icône du masque et l'icône de lecture. , et leur nœud parent p (l'attribut de classe est d) a une image d'arrière-plan comme bordure.
3. Chaque balise li a ajouté des lettres de réponse aux événements onmouseover et onmouseout.
4. Le dernier morceau de code js consiste à simuler l'effet de l'augmentation du nom de la chanson lors du changement de chanson dans la boîte à musique.
Tout d'abord, le programme récupère la balise avec l'identifiant frm et récupère toutes les sous-balises li de la balise. Il obtient également toutes les balises span de li et lie la première balise span à span_obj du li. objet de balise.
Deux fonctions de délai d'attente : Showext() et showup(). La fonction showup() est responsable de la production de l'effet d'augmentation du titre de la chanson, tandis que la fonction Showext() est responsable du passage à la lecture de la chanson. la prochaine station musicale.
Les méthodes objets ne peuvent pas se définir comme fonctions de délai d'attente
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!