DIV+CSS完成电台目录设计方案的示例编码

日期:2021-01-20 类型:科技新闻 

关键词:网站建设,创建网站,免费建站平台,智能建站,企业建网站

CSS Spite技术性:也便是CSS小精灵技术性,具体上CSS的小精灵便是照片里的1个个的标志元素,这些标志可使按钮、标识和logo这些。许多网站中都运用了该技术性,可合理降低传送恳求次数,所必须的标志汇总在1张照片中,1次免费下载便可全部网页页面运用

下列示例关键是CSS小精灵技术性的运用,立即Po编码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf⑻">
    <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 div{
            margin:5px 0 5px 0;
        }
        .d div{
            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 div{
            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)">
        <div class="d">
            <div class="img"></div>
            <div class="mask"></div>
            <div class="play"></div>
        </div>
        <div class="cont">
            <div>酷狗热歌</div>
            <span href="#">徐朗 - 小夜曲</span>
        </div>
    </li>
    <li class="l2" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <div class="d">
            <div class="img"></div>
            <div class="mask"></div>
            <div class="play"></div>
        </div>
        <div class="cont">
            <div>DJ热碟</div>
            <span href="#">曾春年 - 最幸福快乐的人</span>
        </div>
    </li>
    <li class="l3" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <div class="d">
            <div class="img"></div>
            <div class="mask"></div>
            <div class="play"></div>
        </div>
        <div class="cont">
            <div>互联网红歌</div>
            <span href="#">徐志强 - 想你的情况下</span>
        </div>
    </li>
    <li class="l4" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <div class="d">
            <div class="img"></div>
            <div class="mask"></div>
            <div class="play"></div>
        </div>
        <div class="cont">
            <div>新歌</div>
            <span href="#">孙俪 - 漂亮数据信号</span>
        </div>
    </li>
    <li class="l5" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <div class="d">
            <div class="img"></div>
            <div class="mask"></div>
            <div class="play"></div>
        </div>
        <div class="cont">
            <div>經典</div>
            <span href="#">游鸿明 - 寻你</span>
        </div>
    </li>
    <li class="l6" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <div class="d">
            <div class="img"></div>
            <div class="mask"></div>
            <div class="play"></div>
        </div>
        <div class="cont">
            <div>复古粤语</div>
            <span href="#">陈慧娴 - 人生何处不相逢</span>
        </div>
    </li>
    <li class="l7" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <div class="d">
            <div class="img"></div>
            <div class="mask"></div>
            <div class="play"></div>
        </div>
        <div class="cont">
            <div>钢琴</div>
            <span href="#">July - My Soul</span>
        </div>
    </li>
    <li class="l8" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <div class="d">
            <div class="img"></div>
            <div class="mask"></div>
            <div class="play"></div>
        </div>
        <div class="cont">
            <div>KTV必点</div>
            <span href="#">蔡健雅 - 无底洞</span>
        </div>
    </li>
    <li class="l9" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <div class="d">
            <div class="img"></div>
            <div class="mask"></div>
            <div class="play"></div>
        </div>
        <div class="cont">
            <div>想念</div>
            <span href="#">张杰 - 这便是爱</span>
        </div>
    </li>
    <li class="ll" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <div class="d">
            <div class="img"></div>
            <div class="mask"></div>
            <div class="play"></div>
        </div>
        <div class="cont">
            <div>DJ外文舞曲</div>
            <span href="#">Jean Cloud Ades</span>
        </div>
    </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 = ⑴;
    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)⑴ +'px';
            setTimeout('showup()',100);
        }
    }
    function shownext(){
        index++;
        index = index%li.length;
        showup();
    }
    setTimeout(shownext,1000);
</script>
</body>
</html>

转化成实际效果:

编码剖析:

1.ul标识內部含有10个li标识,由于每一个li标识的标志为不一样的子照片,因此给每一个li标识里加上不一样的class特性。

2.每一个li标识的class特性为d的div标识里边包括了3个div标识,它们的class特性为img、mask和play,这3个标识先后为主题标志、遮罩标志和播发标志,而她们的父连接点div(class特性为d)以情况照片做为边框。

3.每一个li标识都加上了onmouseover和onmouseout恶性事件回应函。

4.最终面1段js编码是仿真模拟歌曲盒音乐切换时的音乐名升高的实际效果。

最先程序流程获得id为frm的标识,并获得该标识的全部li子标识,另外获得全部li的span标识,并关联第1个span标识到li标识目标的span_obj上。

两个请求超时涵数:shownext()和showup(),在其中showup()涵数负责造成歌名升见效果,而涵数shownext()负责切换到下1个歌曲台的音乐的播发。

目标的方式內部不能以设定本身为请求超时涵数

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。