基于html5 svg實現仿百度百科投票文字遮罩效果



56 223 75



特效描述:基于html5 svg實現 仿百度百科投票 文字遮罩效果,基于html5 svg實現仿百度百科投票文字遮罩效果

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/subRankings_06727bb.css">
<link rel="stylesheet" type="text/css" href="css/moments-2014_e764737.css">

2. 引入JS

<script type="text/javascript" src="js/wiki-common_sync_js_0_c71edc4.js"></script>
<script type="text/javascript" src="js/wiki-common_sync_js_1_b8cc5ae.js"></script>
<script type="text/javascript" src="js/wiki-activity_sync_js_0_92492a7.js"></script>

3. HTML代碼

<div class="zzsc">
<div class="subRankings-wrapper" style="overflow:hidden; height:486px;">
  <div class="layout">
    <div class="subRankings subRankings-tri subRankings-entertain" alog-group="subRankings-entertain">
      <ul class="subRankings_content">
        <li class="subRanking-0 actived" style="background-image:url(images/entertain-0.png)">
          <div class="detail detail-up detail-0">
            <div class="detail_title"><a href="http://www.cqetom.live//" target="_blank">周筆暢</a></div>
            <div class="detail_pv">瀏覽量:2.49億</div>
            <a class="detail_vote cmn-inline-block" href="http://www.cqetom.live//">投票</a>
            <div class="detail_counts">199506</div>
          </div>
          <div class="detail detail-down detail-1">
            <div class="detail_title"><a href="http://www.cqetom.live//" target="_blank">張藝興</a></div>
            <div class="detail_pv">瀏覽量:1.13億</div>
            <a class="detail_vote cmn-inline-block" href="http://www.cqetom.live//">投票</a>
            <div class="detail_counts">1459932</div>
          </div>
          <div class="detail detail-up detail-2">
            <div class="detail_title"><a href="http://www.cqetom.live//" target="_blank">TFBOYS</a></div>
            <div class="detail_pv">瀏覽量:1297萬</div>
            <a class="detail_vote cmn-inline-block" href="http://www.cqetom.live//">投票</a>
            <div class="detail_counts">1672974</div>
          </div>
          <div class="detail detail-down detail-3">
            <div class="detail_title"><a href="http://www.cqetom.live//" target="_blank">宋茜</a></div>
            <div class="detail_pv">瀏覽量:3122萬</div>
            <a class="detail_vote cmn-inline-block" href="http://www.cqetom.live//">投票</a>
            <div class="detail_counts">445551</div>
          </div>
          <div class="detail detail-up detail-4">
            <div class="detail_title"><a href="http://www.cqetom.live//" target="_blank">陳偉霆</a></div>
            <div class="detail_pv">瀏覽量:2.34億</div>
            <a class="detail_vote cmn-inline-block" href="http://www.cqetom.live//">投票</a>
            <div class="detail_counts">4298205</div>
          </div>
          <div class="detail detail-up detail-5">
            <div class="detail_title"><a href="http://www.cqetom.live//" target="_blank">鄧紫棋</a></div>
            <div class="detail_pv">瀏覽量:1866萬</div>
            <a class="detail_vote cmn-inline-block" href="http://www.cqetom.live//">投票</a>
            <div class="detail_counts">147881</div>
          </div>
          <div class="detail detail-up detail-6">
            <div class="detail_title"><a href="http://www.cqetom.live//" target="_blank">劉詩詩</a></div>
            <div class="detail_pv">瀏覽量:2.41億</div>
            <a class="detail_vote cmn-inline-block" href="http://www.cqetom.live//">投票</a>
            <div class="detail_counts">180287</div>
          </div>
          <div class="detail detail-up detail-7">
            <div class="detail_title"><a href="http://www.cqetom.live//" target="_blank">鹿晗</a></div>
            <div class="detail_pv">瀏覽量:2.59億</div>
            <a class="detail_vote cmn-inline-block" href="http://www.cqetom.live//">投票</a>
            <div class="detail_counts">3653553</div>
          </div>
          <div class="detail detail-down detail-8">
            <div class="detail_title"><a href="http://www.cqetom.live//" target="_blank">楊冪</a></div>
            <div class="detail_pv">瀏覽量:8277萬</div>
            <a class="detail_vote cmn-inline-block" href="http://www.cqetom.live//">投票</a>
            <div class="detail_counts">37446</div>
          </div>
          <div class="detail detail-down detail-9">
            <div class="detail_title"><a href="http://www.cqetom.live//" target="_blank">李易峰</a></div>
            <div class="detail_pv">瀏覽量:1920萬</div>
            <a class="detail_vote cmn-inline-block" href="http://www.cqetom.live//">投票</a>
            <div class="detail_counts">629319</div>
          </div>
          <svg class="svg" height="100%" width="100%">
          <path style="opacity: 0.01;" class="shape" d="M6,0 L310,0,158,152"></path>
          <path style="opacity: 0.01;" class="shape" d="M324,3 L476,155,172,155"></path>
          <path style="opacity: 0.01;" class="shape" d="M338,0 L642,0,490,152"></path>
          <path style="opacity: 0.01;" class="shape" d="M656,3 L808,155,504,155"></path>
          <path style="opacity: 0.01;" class="shape" d="M670,0 L974,0,822,152"></path>
          <path style="opacity: 0.01;" class="shape" d="M324,318 L476,165,172,165"></path>
          <path style="opacity: 0.01;" class="shape" d="M656,318 L808,165,504,165"></path>
          <path style="opacity: 0.01;" class="shape" d="M490,166 L649,325,490,484,331,325"></path>
          <path style="opacity: 0.01;" class="shape" d="M324,333 L476,485,172,485"></path>
          <path style="opacity: 0.01;" class="shape" d="M656,333 L808,485,504,485"></path>
          </svg></li>
      </ul>
    </div>
  </div>
</div>
<script type="text/javascript" src="js/wiki-common_sync_js_0_c71edc4.js"></script> 
<script type="text/javascript" src="js/wiki-common_sync_js_1_b8cc5ae.js"></script> 
<script type="text/javascript" src="js/wiki-activity_sync_js_0_92492a7.js"></script> 
<script type="text/javascript">!function(){  if (document.createElement('canvas').getContext) {
    require('wiki-activity:widget/moments-2014/guide/guide.js');
  } else {
    $('#momentsGuide').addClass('withImageBg');
  }; 
}();
!function(){  var $ = require('wiki-common:widget/lib/jquery/jquery.js'),
    mainRanking = require('wiki-activity:widget/moments-2014/subRankings/subRankings.js');
}();
!function(){  require('wiki-activity:widget/moments-2014/authorityComments/authorityComments.js');
}();
!function(){  require('wiki-activity:widget/moments-2014/sideNav/sideNav.js');
}();</script>
<div class="clear"></div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 滑動星星打分 其他 提示框/彈出層 投票 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子