Heim >Web-Frontend >HTML-Tutorial >Beispiel, das die DIV+CSS-Implementierung einer Radiosenderliste zeigt
Beispiel, das die DIV+CSS-Implementierung einer Radiosenderliste zeigt
- 巴扎黑Original
- 2017-09-02 09:57:321948Durchsuche
In diesem Artikel wird hauptsächlich der Beispielcode von p+CSS zur Implementierung des Radiosenderlistendesigns vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen
CSS-Sprite-Technologie: Tatsächlich sind CSS-Sprites Symbolelemente in Bildern. Diese Symbole können Schaltflächen, Beschriftungen, Logos usw. erstellen. Diese Technologie wurde auf vielen Websites angewendet, wodurch die Anzahl der Übertragungsanfragen effektiv reduziert werden kann. Die erforderlichen Symbole werden in einem Bild zusammengefasst und können nach dem Herunterladen auf die gesamte Seite angewendet werden.
Die folgenden Beispiele sind hauptsächlich die Anwendung der CSS-Assistententechnologie. Direkter Po-Code:
<!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>Generierungseffekt:
Code Analyse:
1.ul-Tag enthält 10 Li-Tags. Da das Symbol jedes Li-Tags ein anderes Unterbild ist, werden jedem Li-Tag unterschiedliche Klassenattribute hinzugefügt.
2. Das p-Tag, dessen Klassenattribut für jedes li-Tag ist, enthält drei p-Tags: img, mask und play und ihr übergeordneter Knoten p (Klassenattribut ist d) hat ein Hintergrundbild als Rand.
3. Zu jedem Li-Tag wurden Onmouseover- und Onmouseout-Ereignisantwortbuchstaben hinzugefügt.
4. Der letzte Teil des JS-Codes dient dazu, den Effekt zu simulieren, der beim Wechseln der Songs in der Spieluhr entsteht.
Zuerst ruft das Programm das Tag mit der ID frm ab und ruft alle li-Untertags des Tags ab. Außerdem ruft es alle span-Tags von li ab und bindet das erste span-Tag an span_obj von li Tag-Objekt.
Zwei Timeout-Funktionen: gezeigtext() und showup() Die Funktion showup() ist für die Erzeugung des Liedtitel-Erhöhungseffekts verantwortlich, während die Funktion showext() für das Einschalten der Wiedergabe des Liedes verantwortlich ist der nächste Musiksender.
Objektmethoden können sich nicht selbst als Timeout-Funktionen festlegen
Das obige ist der detaillierte Inhalt vonBeispiel, das die DIV+CSS-Implementierung einer Radiosenderliste zeigt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!