专栏首页算法与编程之美网页|扇形菜单—你不get一下吗?

网页|扇形菜单—你不get一下吗?

一、扇形菜单介绍

扇形菜单,就是将导航菜单制作成扇形的形状。简单来说就是通过点击一个按钮,弹出一个以这个按钮为圆心的扇形按钮菜单,(可以根据需要添加按钮个数)。可以通过改变一下半径的长度,实现扇形形状的大小。

图1.1 扇形菜单效果图

二、解析思路

通过分析扇形菜单页面,可以归纳总结出如下实现细节 :

(1) 使用带有 touch 功能的 Zepto 文件实现。

(2) 使用类选择器、find()筛选需要的元素。

(3) 使用 hasClass、removeClass、addClass 等方法来判断该扇形菜单是否处于打开状态,如果是打开状态,则关闭扇形菜单;如果是关闭状态,就打开它。hasClass(class)用于检查当前的元素是否含有某个特定的类,如果有,则返回true,class:用于匹配的类名。

三、制作过程

(1)首先当然是引入zepto.min.js文件。

<script type="text/javascript"  src="js/zepto.min.js"></script>

(2)利用h5实现扇形菜单的的基础布局,这里还是使用的bootstrap框架。

<div style="height:1000px;width: 300px;"></div>

<div>

       <div><img src="img/menu.png"  /><span></span></div>

       <div  class="btn btn1" data-num="1"><span>照相</span></div>

       <div  class="btn btn2" data-num="2"><span>定位</span></div>

       <div  class="btn btn3" data-num="3"><span>音乐</span></div>

       <div  class="btn btn4" data-num="4"><span>聊天</span></div>

</div>

(3)添加css样式(其他样式代码已省略)。这里简单介绍一下各种浏览器的属性:-moz代表firefox浏览器私有属性。-ms代表IE浏览器私有属性。-webkit代表chrome、safari私有属性。这种写法主要是为了兼容比较老的版本。

.btn{

       -webkit-transition:bottom  .2s,right .2s;

       -moz-transition:bottom  .2s,right .2s;

       -o-transition:bottom  .2s,right .2s;

       -ms-transition:bottom  .2s,right .2s;

       transition:bottom  .2s,right .2s;

       }

(4)添加js代码实现最后的效果。

这里我们主要使用了hasClass,span.removeClass方法。removeClass([class])从所有匹配的元素中删除全部或者指定的类,class(可选):一个或多个要删除的CSS类名,请用空格分开。addClass(class)为每个匹配的元素添加指定的类名,class:一个或多个要添加到元素中的CSS类名,请用空格分开。

<script type="text/javascript">

$(function(){

       $(".menu").click(function(){

              var  span = $(this).find("span");

              if(span.hasClass("open")){

                     span.removeClass("open").addClass("close");

                     $(".btn").removeClass("open").addClass("close");

              }else{

                     span.removeClass("close").addClass("open");

                     $(".btn").removeClass("close").addClass("open");

              }

       });

});

</script>

END

编 辑 | 王楠岚

责 编 | 刘 连

where2go 团队

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:刘连

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java|“ Java”来爬取小说章节

    在上一篇Java|使用WebMagic进行电话爬取“的文章里就已经介绍了如何主要使用Pageprocessor去爬取电话号码,接下来将要学习到的是去爬取起点中文...

    算法与编程之美
  • Python|实现二叉树

    在树的种类中,有这样一类树,它每个节点下面有两个新的左右节点(一般称为该节点的左右子树),且每个节点的子树有左右之分不能颠倒,这样的树叫做二叉树。接下来就用py...

    算法与编程之美
  • 网页|css中的匹配问题

    众所周知在写css的时候,会根据html中类的定义或者id的定义来写相应的css代码。给不同的类定义不同的样式,当然为了能够少写一些代码,大家就会在css中引用...

    算法与编程之美
  • 前端之HTML DOM操作

    当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

    山河木马
  • CSS3-3D转换

    py3study
  • js获取input上传文件的文件名和扩展名的方法

    使用 js 可以获取 input 上传文件的文件名和扩展名,这里我整理一下具体方法:

    德顺
  • CSS清除浮动

    由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

    刘亦枫
  • css3转换(banner)

    天天_哥
  • 自适应表头和左侧列固定的表格

    在网站建设中,表格的出现提供了数据对比的便利以及数据查看的便利。但是当表格数据过多时,在同一个屏幕下无法完全展示,出现滚动条后,表头部分就被盖住,很容易不清楚看...

    无邪Z
  • JQuery选择器(中)

    HTML5学堂:在学习JQuery开发的时候,选择器有多种,而我们将接着介绍选择器的其他类型,希望对大家有帮助! 5.临近选择器: $("mix+mix"),选...

    HTML5学堂

扫码关注云+社区

领取腾讯云代金券