查看7ers期末演唱会大屏幕/index.html的源代码 ←7ers期末演唱会大屏幕/index.html

[[分类:指尖集]]
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>title</title>
 <script src="./js/jq.js" type="text/javascript"></script>
 <script src="./js/bootstrap.min.js" type="text/javascript"></script>
 <link href="./js/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="./js/jquery.jplayer.min.js"></script>
 <script type="text/javascript" src="./js/add-on/jquery.jplayer.inspector.js"></script>
 <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" />
 
 <style type="text/css"> 
  p,input,a,span,div,a,h1{
   font-family:"微软雅黑","黑体";
   vertical-align:middle;
  }
  #WeiboCo,#WeiboR,#WeiboC{
   color:white;
   background-color:orange;
   font-size:37px;
   height:45px;
   padding:5px;
  }
  .Mains{
   padding-top:40px;
   padding-right:20px;
   padding-left:20px;
   
   height:630px;
   width:980px;
  }
  #MainCo{
   height:300px;
   display:block;
  }
  #CurCo{
   background-color:#00AA88;
   height:100%;
   text-align:center;
   display:inline;
  }
  #CurUserName{
   height:100%;
   display:inline;
   background-color:#00AA88;
   vertical-align:middle;
   text-align:center;
   font-size:40px;
  }
  #CurUserNameP{
   padding-top:35%;
   line-height:100%;
  }
  #CurUserSong{
   height:9%;
   width:80%;
   display:inline;
   margin-top:7%;
  }
  #CurUserSong{
   width:80%;
   height:20%;
   font-size:35px;
  }
  #EnterMusic{
   width:20%;
   height:20%;
   font-size:40px;
   padding-top:5%;
   margin-top:5%;
  }
  #SingerCo{
   display:block;
   height:150px;
   text-align:center;
   margin-top:3%;   
  }
  .Singer{
   width:9%;
   height:70%;
   font-size:25px;
   padding-top:3.5%;
   line-height:100%;
  }
  #SingerInfoCo{
   margin-top:30%;
   filter:alpha(opacity=50); /*IE滤镜，透明度50%*/
   -moz-opacity:0.5; /*Firefox私有，透明度50%*/
   opacity:0.5;/*其他，透明度50%*/
  }
  #SingerInfo{
   font-size:35px;
   line-height:110%;
  }
  .bold{
   font-weight:bold;
  }
  #PlayingMusic{
   font-size:40px;
   font-weight:bold;
   color:white;
  }
  #jqplayer{
   filter:alpha(opacity=70); /*IE滤镜，透明度50%*/
   -moz-opacity:0.7; /*Firefox私有，透明度50%*/
   opacity:0.7;/*其他，透明度50%*/
  }
  #imgbg{
   right: 0; 
   bottom: 0;
   width:1024px;
   height:768px;
   position: absolute;
   top: 0; 
   left: 0; 
   z-index: -1;
   display:none;
  }
  .Score{
   font-size:14px;
   line-height:100%;
   filter:alpha(opacity=70); /*IE滤镜，透明度50%*/
   -moz-opacity:0.7; /*Firefox私有，透明度50%*/
   opacity:0.7;/*其他，透明度50%*/
  }
  .scores{
   font-size:30px;
  }
  #Text{
   line-height:100%;
   font-size:25px;
   text-align:center;
  }
  #PB{
   font-size:25px;
  }
 </style>
 <script src="./setting.js" type="text/javascript"></script>
 <script type="text/javascript"> /*微博导航栏部分*/
   var WeiUed=new Array();
  /*== 读取微博讯息 ==================*/
   var WeiboUrl='http://widget.weibo.com/livestream/listlive.php?language=zh_cn&atopic='+encodeURIComponent(WeiboTopic)+' .liveStream_main_feed';
    function NormalIt(id){
     var IdS=parseInt($('#Score'+id).html());
     $('#Singer'+id).removeClass('btn-primary btn-danger btn-inverse btn-info btn-success btn-warning');
     if(IdS<Lv[0]){
      $('#Singer'+id).addClass('btn-inverse');
     }else if(IdS<Lv[1]){
      $('#Singer'+id).addClass('btn-info');
     }else if(IdS<Lv[2]){
      $('#Singer'+id).addClass('btn-success');
     }else if(IdS<Lv[3]){
      $('#Singer'+id).addClass('btn-warning');
     }else if(IdS<Lv[4]){
      $('#Singer'+id).addClass('btn-primary');
     }else{
      $('#Singer'+id).addClass('btn-danger');
     }
   }
   function ChooseIt(id){
    $('#Singer'+id).removeClass('btn-primary btn-danger btn-inverse btn-info btn-success btn-warning');
    $('#Singer'+id).addClass('btn');
   }
   function WeiboUpdate(){
    $("#WeiboOri").load(WeiboUrl,function(){
     var WeiboV=WeiboIc+WeiboAlert+'&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp',i,j,k;
     for(i=1,j=1;j<=10;++i,++j){
            var WeiC=$(".liveStream_mainFeed_listContent_txt:eq("+(i-1)+")").html();
            var WeiT=$(".liveStream_mainFeed_listContent_actionTime:eq("+(i-1)+")").text();
      if(WeiC!=null){
              if(WeiC.match(WeiboP)!=null){/*关键词屏蔽*/
        --j;
        continue;
              }
       if(j<=WeiboNum)WeiboV+=$(".liveStream_mainFeed_listPic:eq("+(i-1)+")").html()+'<a title="@" target="_blank">@</a>'+WeiC+'<span style="color:grey">('+WeiT+')</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp';
       if(WeiUed[WeiC]!=1){
        for(k=1;k<=8;++k){
         if(WeiC.match(WeiboName[k])!=null){
          WeiUed[WeiC]=1;
          $("#Score"+k).html((parseInt($("#Score"+k).html())+1));
         }
        }
              }
      }else{
       break;
      }
     }
     WeiboV+='<span id="PB">'+WeiboIc+AW1+'&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span>';
     $("#WeiboC").html(WeiboV);
      var Q;
      for(Q=1;Q<=8;++Q){
       if(Q!=ActiveS)
        NormalIt(Q);
      }
     setTimeout(function(){WeiboUpdate();},UpdateTimeout);
    });
   };
  /*== 滚动条插件 ==================*/
   (function ($) {
    $.fn.marquee = function (klass) {
     var newMarquee = [],
      last = this.length;
     function getReset(newDir, marqueeRedux, marqueeState) {
      var behavior = marqueeState.behavior, width = marqueeState.width, dir = marqueeState.dir;
      var r = 0;
      if (behavior == 'alternate') {
       r = newDir == 1 ? marqueeRedux[marqueeState.widthAxis] - (width*2) : width;
      } else if (behavior == 'slide') {
       if (newDir == -1) {
        r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] : width;
       } else {
        r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] - (width*2) : 0;
       }
      } else {
       r = newDir == -1 ? marqueeRedux[marqueeState.widthAxis] : 0;
      }
      return r;
     }
     function animateMarquee() {
      var i = newMarquee.length,
       marqueeRedux = null,
       $marqueeRedux = null,
       marqueeState = {},
       newMarqueeList = [],
       hitedge = false;
       
      while (i--) {
       marqueeRedux = newMarquee[i];
       $marqueeRedux = $(marqueeRedux);
       marqueeState = $marqueeRedux.data('marqueeState');
       
       if ($marqueeRedux.data('paused') !== true) {
        marqueeRedux[marqueeState.axis] += (marqueeState.scrollamount * marqueeState.dir);
        hitedge = marqueeState.dir == -1 ? marqueeRedux[marqueeState.axis] <= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState) : marqueeRedux[marqueeState.axis] >= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState);
        
        if ((marqueeState.behavior == 'scroll' && marqueeState.last == marqueeRedux[marqueeState.axis]) || (marqueeState.behavior == 'alternate' && hitedge && marqueeState.last != -1) || (marqueeState.behavior == 'slide' && hitedge && marqueeState.last != -1)) {                        
         if (marqueeState.behavior == 'alternate') {
          marqueeState.dir *= -1; 
         }
         marqueeState.last = -1;
         $marqueeRedux.trigger('stop');
         marqueeState.loops--;
         
         if (marqueeState.loops === 0) {
          if (marqueeState.behavior != 'slide') {
           marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
          } else {
           marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir * -1, marqueeRedux, marqueeState);
          }
          $marqueeRedux.trigger('end');
         } else {
          newMarqueeList.push(marqueeRedux);
          $marqueeRedux.trigger('start');
          marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
         }
        } else {
         newMarqueeList.push(marqueeRedux);
        }
        marqueeState.last = marqueeRedux[marqueeState.axis];
        $marqueeRedux.data('marqueeState', marqueeState);
       } else {
        newMarqueeList.push(marqueeRedux);                    
       }
      }
      newMarquee = newMarqueeList;
      
      if (newMarquee.length) {
       setTimeout(animateMarquee, WeiboSpeed);
      }            
     }
     this.each(function (i) {
      var $marquee = $(this),
       width = $marquee.attr('width') || $marquee.width(),
       height = $marquee.attr('height') || $marquee.height(),
       $marqueeRedux = $marquee.after('<div ' + (klass ? 'class="' + klass + '" ' : '') + 'style="display: block-inline; width: ' + width + 'px; height: ' + height + 'px; overflow: hidden;"><div style="float: left; white-space: nowrap;">' + $marquee.html() + '</div></div>').next(),
       marqueeRedux = $marqueeRedux.get(0),
       hitedge = 0,
       direction = ($marquee.attr('direction') || 'left').toLowerCase(),
       marqueeState = {
        dir : /down|right/.test(direction) ? -1 : 1,
        axis : /left|right/.test(direction) ? 'scrollLeft' : 'scrollTop',
        widthAxis : /left|right/.test(direction) ? 'scrollWidth' : 'scrollHeight',
        last : -1,
        loops : $marquee.attr('loop') || -1,
        scrollamount : $marquee.attr('scrollamount') || this.scrollAmount || 2,
        behavior : ($marquee.attr('behavior') || 'scroll').toLowerCase(),
        width : /left|right/.test(direction) ? width : height
       };
      if ($marquee.attr('loop') == -1 && marqueeState.behavior == 'slide') {
       marqueeState.loops = 1;
      }
      $marquee.remove();
      if (/left|right/.test(direction)) {
       $marqueeRedux.find('> div').css('padding', '0 ' + width + 'px');
      } else {
       $marqueeRedux.find('> div').css('padding', height + 'px 0');
      }
      $marqueeRedux.bind('stop', function () {
       $marqueeRedux.data('paused', true);
      }).bind('pause', function () {
       $marqueeRedux.data('paused', true);
      }).bind('start', function () {
       $marqueeRedux.data('paused', false);
      }).bind('unpause', function () {
       $marqueeRedux.data('paused', false);
      }).data('marqueeState', marqueeState); 
      newMarquee.push(marqueeRedux);
      marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
      $marqueeRedux.trigger('start');
      
      if (i+1 == last) {
       animateMarquee();
      }
     });            
     return $(newMarquee);
    };
   }(jQuery));
   
  
  
 </script>
 <script type="text/javascript">/*选手界面*/
  var ActiveS=0,DisS=[0,0,0,0,0,0,0,0,0],PlayID=0,AllSN=PN,u=0;
  function Active(id){
   if(ActiveS!=0){
    NormalIt(ActiveS);    
   }
   if(DisS[id]==1)return;
   if(id!=0){
    ChooseIt(id); 
    $("#CurUserNameP").html(SingerD[id]);
    $("#CurUserSong").attr("value",SongN[id]);
   }
   if(id==0){
    $('#EnterMusic').addClass("disabled");
    $("#CurUserNameP").html('?');
    $("#CurUserSong").attr("value",'接下来是哪一首歌呢？');
   }
   ActiveS=id;
  }
  function GetRandomNum(Min,Max){   
   var Range = Max - Min;   
   var Rand = Math.random();   
   return(Min + Math.round(Rand * Range));   
  }
  function ActiveNext(){
   var tt=ActiveS%8+1;
   while(DisS[tt]==1)
    tt=tt%8+1
   Active(tt);
  }
  function RandomChoose(){
   var i,j;
   u=1;
   $('#EnterMusic').addClass("disabled");
   for(i=0;i<=GetRandomNum(1000,2000);i+=50)
    setTimeout(function(){ActiveNext();},i);
   for(j=0;j<=GetRandomNum(1000,3000);i+=100,j+=100){
    setTimeout(function(){ActiveNext();},i);
   }
   for(j=0;j<=GetRandomNum(0,4000);i+=800,j+=800){
    setTimeout(function(){ActiveNext();},i);
   }
   setTimeout(function(){$('#EnterMusic').removeClass("disabled");u=0;},i+10);
  }
  $(document).ready(function(){
   $('#Text').html(Texts);
   var p;
   for(p=PN+1;p<=8;++p){
    $('#Singer'+p).css('display','none');
    DisS[p]=1;
   }
   $("title").html(Title);
   $("#WeiboR").marquee();
   WeiboUpdate();
   $("#AlertI").html(AlertD);
   $("#AlertModal").modal('show');
   $("#Main").slideDown('slow');
   for(i=1;i<=8;++i){
    $("#Singer"+i).html(SingerN[i]+'<br/><span class="Score">微博人气<br><span class="scores" id="Score'+i+'">0</span></span>');
    NormalIt(i);
   }
   $('#Singer1').click(function(){Active(1);$('#EnterMusic').removeClass("disabled");});
   $('#Singer2').click(function(){Active(2);$('#EnterMusic').removeClass("disabled");});
   $('#Singer3').click(function(){Active(3);$('#EnterMusic').removeClass("disabled");});
   $('#Singer4').click(function(){Active(4);$('#EnterMusic').removeClass("disabled");});
   $('#Singer5').click(function(){Active(5);$('#EnterMusic').removeClass("disabled");});
   $('#Singer6').click(function(){Active(6);$('#EnterMusic').removeClass("disabled");});
   $('#Singer7').click(function(){Active(7);$('#EnterMusic').removeClass("disabled");});
   $('#Singer8').click(function(){Active(8);$('#EnterMusic').removeClass("disabled");});
   $('#EnterMusic').click(function(){
    if(ActiveS!=0&&u==0){
     DisS[ActiveS]=1;
     $('#Singer'+ActiveS).addClass('disabled');
     PlayID=ActiveS;
     $('#PlayingMusic').html(SongN[PlayID]);
     $('#PlayingSinger').html(SingerD[PlayID]);
     $('#PlayingOri').html(OriN[PlayID]);
     --AllSN;
     $('#imgbg').attr('src','./jpg/'+ActiveS+'.jpg');
     $('#Main').slideUp(1000,function(){Active(0);});
     $('#imgbg').fadeIn(2500);
     $('#MainPlay').fadeIn(2500);
     $("#jquery_jplayer_1").jPlayer({
      volume: 1,
      swfPath: "./js",
      supplied: "mp3",
      wmode: "window",
      smoothPlayBar: true,
      keyEnabled: true
     });
     $("#jquery_jplayer_1").jPlayer("setMedia", {mp3:"./mp3/"+PlayID+".mp3"});
     if(MusicTime!=-1)
      setTimeout(function(){$("#jquery_jplayer_1").jPlayer( "play",1);},MusicTime);
    }
   });
   $('#CurUserNameP').click(function(){
    if($('#CurUserNameP').html()=='?'){
     RandomChoose();
    }
   });
   $('#StopPlaying').click(function(){
    $("#jquery_jplayer_1").jPlayer( "stop");
    $('#imgbg').fadeOut(2500);
    $('#MainPlay').fadeOut(2500);
    $('#Main').slideDown(1000);
    if(AllSN==1){
     ActiveNext();
     $('#EnterMusic').removeClass("disabled");u=0;
    }
    if(AllSN==0){
     $("#CurUserNameP").html('★');
     $("#CurUserSong").attr("value",'本场演唱会到此结束，谢谢大家！');
    }
   });
   $("#WA").click(function(){WeiboUpdate();});
  });
 </script>
 
</head>
<body class="row-fluid">
 <div id="WeiboOri" style="display:none"></div>
 <div id="WeiboCo"><div id="WeiboR" loop=1><p id="WeiboC">Welcome</p></div></div>
 <div class="modal" id="AlertModal">
   <div class="modal-header">
  <a class="close" data-dismiss="modal">×</a>
  <h3>提示</h3>
   </div>
   <div class="modal-body">
  <p id="AlertI">！</p>
   </div>
   <div class="modal-footer">
  <a href="#" class="btn btn-primary" onclick="$('#AlertModal').modal('hide')">确认</a>
   </div>
 </div>
 <div id="Main" class="Mains" style="display:none;">
  <div id="MainCo">
   <div id="CurUserName" class="span4"><p id="CurUserNameP">?</p></div>
   <div id="CurCo" class="span8">
    <input id="CurUserSong" class="focused input-xlarge"type="text" value="接下来是哪一首歌呢？"/>
    <br/>
    <a href="#" class="btn btn-danger disabled" id="EnterMusic">Music</a>
   </div>
  </div>
  <div id="SingerCo">
   <a id="Singer1" class="btn Singer">某某某</a>
   <a id="Singer2" class="btn Singer">某某某</a>
   <a id="Singer3" class="btn Singer">某某某</a>
   <a id="Singer4" class="btn Singer">某某某</a>
   <a id="Singer5" class="btn Singer">某某某</a>
   <a id="Singer6" class="btn Singer">某某某</a>
   <a id="Singer7" class="btn Singer">某某某</a>
   <a id="Singer8" class="btn Singer">某某某</a>
  </div>
  <div id="Text"></div>
 </div>
 <div id="MainPlay" class="Mains" style="display:none;">
  
  <section id="jqplayer">
   
  <div id="jquery_jplayer_1" class="jp-jplayer" style="position:absolute;"></div>
  <div id="jp_container_1" class="jp-audio" style="auto;position:absolute;margin-left:55%;">
   <div class="jp-type-single">
    <div class="jp-gui jp-interface">
     <ul class="jp-controls">
      <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
      <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
      <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
      <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
      <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
      <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
     </ul>
     <div class="jp-progress">
      <div class="jp-seek-bar">
       <div class="jp-play-bar"></div>
      </div>
     </div>
     <div class="jp-volume-bar">
      <div class="jp-volume-bar-value"></div>
     </div>
     <div class="jp-current-time"></div>
     <div class="jp-duration"></div>
     <ul class="jp-toggles">
      <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
      <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
     </ul>
    </div>
    <div class="jp-title">
     <ul>
      <li>本页面由<a href="http://www.tupulin.com">兔普林</a><a href="http://huati.weibo.com/125710">#7ers期末演唱会#</a>提供</li>
     </ul>
    </div>
    <div class="jp-no-solution">
     <span>Update Required</span>
     To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
    </div>
   </div>
  </div>
  </section>
  <div id="SingerInfoCo" class="alert alert-success  span6">
   <a id="StopPlaying" class="close">×</a>
   <div id="SingerInfo">
    <h1 id="PlayingMusic">Name</h1>
    <p><span class="bold">演唱者:</span><span id="PlayingSinger">Sb</span></p>
    <p><span id="PlayingOri" style="color:yellow;">Nothing</span></p>    
   </div>
  </div>
 </div>
 <img id="imgbg" src="./jpg/1.jpg" width="100%" height="100%" />
</body>
</html>
</pre>