跟名站学前端之某百科网站

柔光的暖阳◎ 2022-08-06 09:20 149阅读 0赞

前端开发whqet,csdn,王海庆,whqet,前端开发专家

如果您是资深前端er，经验丰富、富有创意，也有可能面对新项目一时踌躇；如果您是前端初学者，可能胸中沟壑，无从下手。多多赏析优秀网站，开阔视野、寻求灵感、解析技术，很有必要。我们从国内外网页欣赏站([Awwwards][]\\[CSS Winner][]\\[Best CSS][]等)的收录作品中，选择一些有代表性的作品进行解析，欣赏、研读、提高，开始一个全新的系列博客《跟名站学前端》，希望对大家有所帮助。

今天来看某百科网站的[年度总结][Link 1]，交互体验超赞！

\------------------------------------------------------------

\--[我参加了博客之星评选，如果你喜欢我的博客，求投票，您的支持是我的动力之源][Link 2]，[走起！][Link 2]

\-----------------------------------------------------------------------------------------------------------------

## 欣赏 ##

某百科网站的[年度总结][Link 1]，交互体验超赞！网站界面如下。

![1421027506_3023.jpg][]

![1421027506_5831.jpg][]

![1421027506_2481.jpg][]

![1421027507_7040.jpg][]

请大家移步欣赏之后，5分钟之后回来继续。系列文章的目的有两个，一是开拓视野、激发灵感、积蓄创意，其次才是获取技术的提高，所以大家不可偷懒。

## 解析 ##

沿袭某度简洁、大方的一贯风格，使用一些圆形、三角形元素装点页面，整个页面显得非常亲民。同时交互体验良好。

我们来重点三角形图像菜单的实现。

## 三角形图像菜单实现 ##

源码我放在了codepen，请大家移步。

\----------------

\----------------------------------------

**[全屏预览][Link 3]点击这里，[在线研究][Link 4]点击这里，[下载收藏][Link 5]点击这里。**

\----------------------------------------

\---------------

在该效果中，用一个图片来表示做背景显示图像，然后用空的div作透明按钮（类似于flash里面的透明按钮）。hove之后的显示的灰色用svg画出来。

html部分如下。

<div class="subRanking">
      <div class="detail detail-up detail-0">
        <div class="detail_title">
          <a style="font-size: 16px" href="http://baike.baidu.com/subview/38681/5279942.htm" target="_blank">邓超</a> 
          <a style="font-size: 16px" href="http://baike.baidu.com/view/16973.htm" target="_blank">孙俪</a>
        </div>
      </div>
      <div class="detail detail-down detail-1">
        <div class="detail_title">
          <a style="font-size: 16px" href="http://baike.baidu.com/view/3286.htm" target="_blank">谢霆锋</a> 
          <a style="font-size: 16px" href="http://baike.baidu.com/subview/3208/5954154.htm" target="_blank">王菲</a>
        </div>
      </div>
      <div class="detail detail-down detail-2">
        <div class="detail_title">
          <a style="font-size: 16px" href="http://baike.baidu.com/view/8234763.htm" target="_blank">陈思诚</a> 
          <a style="font-size: 16px" href="http://baike.baidu.com/view/1614105.htm" target="_blank">佟丽娅</a>
        </div>
      </div>
      <div class="detail detail-down detail-3">
        <div class="detail_title">
          <a style="font-size: 16px" href="http://baike.baidu.com/subview/48513/11093165.htm" target="_blank">皮特</a> 
          <a style="font-size: 16px" href="http://baike.baidu.com/view/68401.htm" target="_blank">朱莉</a>
        </div>
      </div>
      <div class="detail detail-up detail-4">
        <div class="detail_title">
          <a style="font-size: 16px" href="http://baike.baidu.com/view/15398.htm" target="_blank">汪峰</a> 
          <a style="font-size: 16px" href="http://baike.baidu.com/view/2793.htm" target="_blank">章子怡</a>
        </div>
      </div>
      <div class="detail detail-up detail-5">
        <div class="detail_title">
          <a style="font-size: 16px" href="http://baike.baidu.com/view/2149822.htm" target="_blank">赵又廷</a> 
          <a style="font-size: 16px" href="http://baike.baidu.com/view/10531.htm" target="_blank">高圆圆</a>
        </div>
      </div>
      <div class="detail detail-up detail-6">
        <div class="detail_title"><a style="font-size: 16px" href="http://baike.baidu.com/view/172294.htm" target="_blank">刘恺威</a> <a style="font-size: 16px" href="http://baike.baidu.com/view/3871.htm" target="_blank">杨幂</a>
        </div>
      </div>
      <div class="detail detail-up detail-7">
        <div class="detail_title">
          <a style="font-size: 16px" href="http://baike.baidu.com/subview/13909/5530564.htm" target="_blank">黄晓明</a> 
          <a style="font-size: 16px" href="http://baike.baidu.com/view/1513794.htm" target="_blank">Angelababy</a>
        </div>
      </div>
      <div class="detail detail-down detail-8">
        <div class="detail_title">
          <a style="font-size: 16px" href="http://baike.baidu.com/view/2632.htm" target="_blank">周杰伦</a> 
          <a style="font-size: 16px" href="http://baike.baidu.com/view/2200222.htm" target="_blank">昆凌</a>
        </div>
      </div>
      <div class="detail detail-down detail-9">
        <div class="detail_title">
          <a style="font-size: 16px" href="http://baike.baidu.com/view/6231131.htm" target="_blank">高圣远</a> 
          <a style="font-size: 16px" href="http://baike.baidu.com/subview/6095/5885891.htm" target="_blank">周迅</a>
        </div>
      </div>
      <svg width="100%" height="100%" class="svg">
        <path d="M6,0 L310,0,158,152" class="shape"></path>
        <path d="M324,3 L476,155,172,155" class="shape"></path>
        <path d="M338,0 L642,0,490,152" class="shape"></path>
        <path d="M656,3 L808,155,504,155" class="shape"></path>
        <path d="M670,0 L974,0,822,152" class="shape"></path>
        <path d="M324,318 L476,165,172,165" class="shape"></path>
        <path d="M656,318 L808,165,504,165" class="shape"></path>
        <path d="M490,166 L649,325,490,484,331,325" class="shape"></path>
        <path d="M324,333 L476,485,172,485" class="shape"></path>
        <path d="M656,333 L808,485,504,485" class="shape"></path>
      </svg>
    </div>

css主要实现布局，同时考虑hover之后的元素表现。

.subRanking{
      width:980px;
      height: 485px;
      margin:30px auto;
     background:url(http://baike.bdimg.com/cms/static/moments-2014/subRankings/result/entertain-2.png) no-repeat 100% 100%;
    }
    .detail {
    	position: absolute;
    	z-index: 1;
    	width: 90px;
    	height: 90px;
    	text-align: center;
    	color: #fff;
    	cursor: default;
    	transition:all .2s linear;
      cursor:pointer;
    }
    .detail-0 {
    	left: 113px;
    	top: 7px
    }
    .detail-2 {
    	left: 445px;
    	top: 7px
    }
    .detail-4 {
    	left: 777px;
    	top: 7px
    }
    .detail-1 {
    	left: 279px;
    	top: 60px
    }
    .detail-3 {
    	left: 611px;
    	top: 60px
    }
    .detail-5 {
    	left: 279px;
    	top: 171px
    }
    .detail-6 {
    	left: 611px;
    	top: 171px
    }
    .detail-7 {
    	left:445px;
    	top:285px
    }
    .detail-8 {
    	left: 279px;
    	top: 390px
    }
    .detail-9 {
    	left: 611px;
    	top: 390px
    }
    .detail .detail_title {
    	position: relative;
    	margin: 3px 0 5px;
    	height: 24px;
    	line-height: 24px;
    	font-size: 18px;
    	opacity: 0;
       transition:all .1s linear;
    }
    .detail .detail_title a {
    	color: #fff;
    	text-decoration: none;
    	border-bottom: 1px solid #fff
    }
    .detail-up .detail_title {
    	left: -35px;
       top:50px;
    	width: 200px
    }
    .detail-down .detail_title {
    	left: -35px;
       bottom:-50px;
       width: 200px;
    }
    .svg {
    	position: relative;
    	z-index: 0
    }
    .svg .shape {
      opacity:0.1;
    	transition:opacity .1s ease-in;
    }
    .show {
    	opacity: 1;
    }
    .show .detail_title {
    	opacity: 1;
    }

js主要实现hover响应，hover之后显示detail\_title元素，显示对应的svg元素，我们使用jquery类库简化书写。

$('.detail').hover(
      function(){
        $(this).addClass('show');
        $('.shape').eq($(this).index()).css('opacity','.6');
      },
      function(){
         $(this).removeClass('show');
        $('.shape').eq($(this).index()).css('opacity','.1');
      }
    );

完工!

感谢您耐心读完，如果对您有帮助，[请支持我][Link 2]

\----------------------------------------------------------

[前端开发whqet][whqet]，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。

\---------------------------------------------------------------------------------------------------------

[Awwwards]: http://www.awwwards.com/
[CSS Winner]: http://www.csswinner.com/
[Best CSS]: http://www.bestcss.in/
[Link 1]: http://baike.baidu.com/shiji/2014#activity
[Link 2]: http://vote.blog.csdn.net/blogstar2014/details?username=whqet#content
[1421027506_3023.jpg]: https://img-my.csdn.net/uploads/201501/12/1421027506_3023.jpg
[1421027506_5831.jpg]: https://img-my.csdn.net/uploads/201501/12/1421027506_5831.jpg
[1421027506_2481.jpg]: https://img-my.csdn.net/uploads/201501/12/1421027506_2481.jpg
[1421027507_7040.jpg]: https://img-my.csdn.net/uploads/201501/12/1421027507_7040.jpg
[Link 3]: http://codepen.io/whqet/full/WbRPgz/
[Link 4]: http://codepen.io/whqet/pen/WbRPgz
[Link 5]: http://codepen.io/whqet/share/zip/WbRPgz/
[whqet]: http://blog.csdn.net/whqet