原码笔记

原码笔记

DIV+CSS实现电台列表设计的示例代码

小诸哥 0

CSS Spite技术：也就是CSS精灵技术，实际上CSS的精灵就是图片里的一个个的图标元素，这些图标可以使按钮、标签以及logo等等。很多网站中都应用了该技术，可有效减少传输请求次数，所需要的图标汇总在一张图片中，一次下载即可整个页面应用

以下示例主要是CSS精灵技术的应用，直接Po代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.      <meta charset="utf-8">
  5.      <title>酷狗电台列表设计</title>
  6.      <style>
  7.          #frm{
  8.              margin:0;
  9.              padding:0;
  10.              list-style-type: none;
  11.              width: 500px;
  12.              border:1px solid #000;
  13.              overflow: hidden;
  14.          }
  15.          #frm *{
  16.              margin:0;
  17.              padding: 0;
  18.              font-size: 12px;
  19.          }
  20.          #frm li{
  21.              padding:4px 0;
  22.              width: 47%;
  23.              float: left;
  24.              margin:5px 15px 5px 0;
  25.              cursor: pointer;
  26.          }
  27.          #frm li span{
  28.              color:#999;
  29.              position: relative;
  30.          }
  31.          #frm li .d{
  32.              width: 38px;
  33.              height: 38px;
  34.              float: left;
  35.              margin:0px 12px 6px 0;
  36.              background-image: url(img/spite2.jpg);
  37.              position: relative;
  38.          }
  39.          #frm li .cont{
  40.              position: relative;
  41.              height: 37px;
  42.              overflow: hidden;
  43.          }
  44.          .cont div{
  45.              margin:5px 0 5px 0;
  46.          }
  47.          .d div{
  48.              position: absolute;
  49.              width: 100%;
  50.              height: 100%;
  51.          }
  52.          .d .img,.d .play{
  53.              background-image: url(img/spite2.jpg);
  54.          }
  55.          .l1 .d .img{
  56.              background-position: 38px 0;
  57.          }
  58.          .l2 .d .img{
  59.              background-position: 76px 0;
  60.          }
  61.          .l3 .d .img{
  62.              background-position: 114px 0;
  63.          }
  64.          .l4 .d .img{
  65.              background-position: 152px 0;
  66.          }
  67.          .l5 .d .img{
  68.              background-position: 190px 0;
  69.          }
  70.          .l6 .d .img{
  71.              background-position: 228px 0;
  72.          }
  73.          .l7 .d .img{
  74.              background-position: 266px 0;
  75.          }
  76.          .l8 .d .img{
  77.              background-position: 304px 0;
  78.          }
  79.          .l9 .d .img{
  80.              background-position: 342px 0;
  81.          }
  82.          .ll .d .img{
  83.              background-position: 380px 0;
  84.          }
  85.          .d .mask,.d .play{
  86.              visibility: hidden;
  87.          }
  88.          .choose .d{
  89.              background-position: 38px 0;
  90.              outline: 1px solid rgb(233,243,250);
  91.          }
  92.          .choose .d .mask{
  93.              background-color: #000;
  94.              filter:alpha(Opacity=50);
  95.              opacity: 0.5;
  96.              height: 32px;
  97.              width: 32px;
  98.              top:3px;
  99.              left: 3px;
  100.              visibility: visible;
  101.          }
  102.          .choose .d .play{
  103.              background-position: 418px 0;
  104.              visibility: visible;
  105.          }
  106.          .choose .cont div{
  107.              font-weight: bold;
  108.              color:rgb(0,155,250);
  109.          }
  110.      </style>
  111.      <script>
  112.          function mouseoverhandle(obj){
  113.              obj.className += ' choose';
  114.          }
  115.          function mouseouthandle(obj){
  116.              obj.className = obj.className.substring(0,2);
  117.          }
  118.      </script>
  119. </head>
  120. <body>
  121. <ul id="frm">
  122.      <li class="l1" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
  123.          <div class="d">
  124.              <div class="img"></div>
  125.              <div class="mask"></div>
  126.              <div class="play"></div>
  127.          </div>
  128.          <div class="cont">
  129.              <div>酷狗热歌</div>
  130.              <span href="#">徐朗 - 小夜曲</span>
  131.          </div>
  132.      </li>
  133.      <li class="l2" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
  134.          <div class="d">
  135.              <div class="img"></div>
  136.              <div class="mask"></div>
  137.              <div class="play"></div>
  138.          </div>
  139.          <div class="cont">
  140.              <div>DJ热碟</div>
  141.              <span href="#">曾春年 - 最幸福的人</span>
  142.          </div>
  143.      </li>
  144.      <li class="l3" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
  145.          <div class="d">
  146.              <div class="img"></div>
  147.              <div class="mask"></div>
  148.              <div class="play"></div>
  149.          </div>
  150.          <div class="cont">
  151.              <div>网络红歌</div>
  152.              <span href="#">徐志强 - 想你的时候</span>
  153.          </div>
  154.      </li>
  155.      <li class="l4" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
  156.          <div class="d">
  157.              <div class="img"></div>
  158.              <div class="mask"></div>
  159.              <div class="play"></div>
  160.          </div>
  161.          <div class="cont">
  162.              <div>新歌</div>
  163.              <span href="#">孙俪 - 美丽信号</span>
  164.          </div>
  165.      </li>
  166.      <li class="l5" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
  167.          <div class="d">
  168.              <div class="img"></div>
  169.              <div class="mask"></div>
  170.              <div class="play"></div>
  171.          </div>
  172.          <div class="cont">
  173.              <div>经典</div>
  174.              <span href="#">游鸿明 - 寻你</span>
  175.          </div>
  176.      </li>
  177.      <li class="l6" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
  178.          <div class="d">
  179.              <div class="img"></div>
  180.              <div class="mask"></div>
  181.              <div class="play"></div>
  182.          </div>
  183.          <div class="cont">
  184.              <div>怀旧粤语</div>
  185.              <span href="#">陈慧娴 - 人生何处不相逢</span>
  186.          </div>
  187.      </li>
  188.      <li class="l7" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
  189.          <div class="d">
  190.              <div class="img"></div>
  191.              <div class="mask"></div>
  192.              <div class="play"></div>
  193.          </div>
  194.          <div class="cont">
  195.              <div>钢琴</div>
  196.              <span href="#">July - My Soul</span>
  197.          </div>
  198.      </li>
  199.      <li class="l8" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
  200.          <div class="d">
  201.              <div class="img"></div>
  202.              <div class="mask"></div>
  203.              <div class="play"></div>
  204.          </div>
  205.          <div class="cont">
  206.              <div>KTV必点</div>
  207.              <span href="#">蔡健雅 - 无底洞</span>
  208.          </div>
  209.      </li>
  210.      <li class="l9" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
  211.          <div class="d">
  212.              <div class="img"></div>
  213.              <div class="mask"></div>
  214.              <div class="play"></div>
  215.          </div>
  216.          <div class="cont">
  217.              <div>思念</div>
  218.              <span href="#">张杰 - 这就是爱</span>
  219.          </div>
  220.      </li>
  221.      <li class="ll" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
  222.          <div class="d">
  223.              <div class="img"></div>
  224.              <div class="mask"></div>
  225.              <div class="play&quot;></div>
  226.          </div>
  227.          <div class="cont">
  228.              <div>DJ外文舞曲</div>
  229.              <span href="#">Jean Cloud Ades</span>
  230.          </div>
  231.      </li>
  232. </ul>
  233. <script>
  234.      var ul = document.getElementById('frm');
  235.      var li = document.getElementsByTagName('li');
  236.      var spans;
  237.      for(var i=0;i<li.length;i++){
  238.          spans = li[i].getElementsByTagName('span');
  239.          li[i].span_obj = spans[0];
  240.      }
  241.      var index = -1;
  242.      function showup(){
  243.          if(li[index].span_obj.style.top == ''){
  244.              li[index].span_obj.style.top = '13px';
  245.          }
  246.          if(parseInt(li[index].span_obj.style.top)<=0){
  247.              li[index].span_obj.style.top = '';
  248.              setTimeout('shownext()',1000);
  249.          }else{
  250.              li[index].span_obj.style.top = parseInt(li[index].span_obj.style.top)-1 +'px';
  251.              setTimeout('showup()',100);
  252.          }
  253.      }
  254.      function shownext(){
  255.          index++;
  256.          index = index%li.length;
  257.          showup();
  258.      }
  259.      setTimeout(shownext,1000);
  260. </script>
  261. </body>
  262. </html>

生成效果：

代码分析：

1.ul标签内部含有10个li标签，因为每个li标签的图标为不同的子图片，所以给每个li标签里添加不同的class属性。

2.每个li标签的class属性为d的div标签里面包含了3个div标签，它们的class属性为img、mask和play，这三个标签依次为主题图标、遮罩图标和播放图标，而他们的父节点div(class属性为d)以背景图片作为边框。

3.每个li标签都添加了onmouseover以及onmouseout事件响应函。

4.最后面一段js代码是模拟音乐盒歌曲切换时的歌曲名上升的效果。

首先程序获取id为frm的标签，并获取该标签的所有li子标签，同时获取所有li的span标签，并绑定第一个span标签到li标签对象的span_obj上。

两个超时函数：shownext()以及showup()，其中showup()函数负责产生歌名升起效果，而函数shownext()负责切换到下一个音乐台的歌曲的播放。

对象的方法内部不可以设置自身为超时函数

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

标签： CSS 实现 列表 代码

赏
版权声明：本站所有图片/内容除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！

上一篇5分钟教你学会 CSS Grid 布局

下一篇前端面试必备之CSS3的新特性

相关文章