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

最新推荐文章于 2023-04-30 20:10:23 发布

whqet

最新推荐文章于 2023-04-30 20:10:23 发布

阅读量5.1k

点赞数 16

分类专栏： javascript 文章标签：跟名站学前端 web前端开发前端开发

本文链接：https://blog.csdn.net/whqet/article/details/42563211

版权

学习笔记同时被 3 个专栏收录

66 篇文章 1 订阅

订阅专栏

技术总结

59 篇文章 0 订阅

订阅专栏

案例研究

52 篇文章 0 订阅

订阅专栏

本文是《跟名站学前端》系列博客之一，解析了一个交互体验出色的某百科网站年度总结。文章介绍了网站的界面设计特点，尤其是三角形图像菜单的实现，通过HTML、CSS和JS展示了技术细节。

摘要由CSDN通过智能技术生成

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

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

------------------------------------------------------------

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

-----------------------------------------------------------------------------------------------------------------

欣赏

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

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

解析

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

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

三角形图像菜单实现

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

----------------

----------------------------------------

全屏预览点击这里，在线研究点击这里，下载收藏点击这里。

----------------------------------------

---------------

在该效果中，用一个图片来表示做背景显示图像，然后用空的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');
  }
);

完工!

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

----------------------------------------------------------

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

---------------------------------------------------------------------------------------------------------