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



53 208 70



特效描述:基于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.51qianduan.com//" target="_blank">周笔畅</a></div>
            <div class="detail_pv">浏览量:2.49亿</div>
            <a class="detail_vote cmn-inline-block" href="http://www.51qianduan.com//">投票</a>
            <div class="detail_counts">199506</div>
          </div>
          <div class="detail detail-down detail-1">
            <div class="detail_title"><a href="http://www.51qianduan.com//" target="_blank">张艺兴</a></div>
            <div class="detail_pv">浏览量:1.13亿</div>
            <a class="detail_vote cmn-inline-block" href="http://www.51qianduan.com//">投票</a>
            <div class="detail_counts">1459932</div>
          </div>
          <div class="detail detail-up detail-2">
            <div class="detail_title"><a href="http://www.51qianduan.com//" target="_blank">TFBOYS</a></div>
            <div class="detail_pv">浏览量:1297万</div>
            <a class="detail_vote cmn-inline-block" href="http://www.51qianduan.com//">投票</a>
            <div class="detail_counts">1672974</div>
          </div>
          <div class="detail detail-down detail-3">
            <div class="detail_title"><a href="http://www.51qianduan.com//" target="_blank">宋茜</a></div>
            <div class="detail_pv">浏览量:3122万</div>
            <a class="detail_vote cmn-inline-block" href="http://www.51qianduan.com//">投票</a>
            <div class="detail_counts">445551</div>
          </div>
          <div class="detail detail-up detail-4">
            <div class="detail_title"><a href="http://www.51qianduan.com//" target="_blank">陈伟霆</a></div>
            <div class="detail_pv">浏览量:2.34亿</div>
            <a class="detail_vote cmn-inline-block" href="http://www.51qianduan.com//">投票</a>
            <div class="detail_counts">4298205</div>
          </div>
          <div class="detail detail-up detail-5">
            <div class="detail_title"><a href="http://www.51qianduan.com//" target="_blank">邓紫棋</a></div>
            <div class="detail_pv">浏览量:1866万</div>
            <a class="detail_vote cmn-inline-block" href="http://www.51qianduan.com//">投票</a>
            <div class="detail_counts">147881</div>
          </div>
          <div class="detail detail-up detail-6">
            <div class="detail_title"><a href="http://www.51qianduan.com//" target="_blank">刘诗诗</a></div>
            <div class="detail_pv">浏览量:2.41亿</div>
            <a class="detail_vote cmn-inline-block" href="http://www.51qianduan.com//">投票</a>
            <div class="detail_counts">180287</div>
          </div>
          <div class="detail detail-up detail-7">
            <div class="detail_title"><a href="http://www.51qianduan.com//" target="_blank">鹿晗</a></div>
            <div class="detail_pv">浏览量:2.59亿</div>
            <a class="detail_vote cmn-inline-block" href="http://www.51qianduan.com//">投票</a>
            <div class="detail_counts">3653553</div>
          </div>
          <div class="detail detail-down detail-8">
            <div class="detail_title"><a href="http://www.51qianduan.com//" target="_blank">杨幂</a></div>
            <div class="detail_pv">浏览量:8277万</div>
            <a class="detail_vote cmn-inline-block" href="http://www.51qianduan.com//">投票</a>
            <div class="detail_counts">37446</div>
          </div>
          <div class="detail detail-down detail-9">
            <div class="detail_title"><a href="http://www.51qianduan.com//" target="_blank">李易峰</a></div>
            <div class="detail_pv">浏览量:1920万</div>
            <a class="detail_vote cmn-inline-block" href="http://www.51qianduan.com//">投票</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

加群请备注:从官网了解到