咨询:13529513104

简要教程 这是一款使用jQuery和CSS3制作的手机APP功能界面切换特效。该特效在点击用户头像上的编辑按钮之后,或弹出一个圆形的功能菜单,可以选择其中的某一项功能子菜单进入相应的界面。  

查看演示   下载插件

制作方法

HTML结构 该APP特效的最主要功能是界面的切换,其中圆形菜单的HTML结构如下:  
  1. <div class="editable">

  2.  <div class="editable__circle">

  3.    <div class="editable__rotater">

  4.      <div class="editable__rotater-item">

  5.        <i class="fa fa-camera"></i>

  6.      </div>

  7.    </div>

  8.    <div class="editable__rotater">

  9.      <div class="editable__rotater-item">

  10.        <i class="fa fa-comments"></i>

  11.      </div>

  12.    </div>

  13.    <div class="editable__rotater">

  14.      <div class="editable__rotater-item">

  15.        <i class="fa fa-video-camera"></i>

  16.      </div>

  17.    </div>

  18.    <div class="editable__rotater">

  19.      <div class="editable__rotater-item">

  20.        <i class="fa fa-user"></i>

  21.      </div>

  22.    </div>

  23.  </div>

  24.  <div class="editable__cont">

  25.    <img src="img/user.jpg" class="editable__cont-img">

  26.    <span class="editable__cont-edit js-edit">

  27.      <i class="fa fa-pencil-square-o"></i>

  28.    </span>

  29.  </div>

  30. </div>              

复制代码

具体的CSS代码请参考下载文件。 高APP特效中使用jQuery来添加和删除相应的CLASS,以及处理一些菜单项的点击事件。      本文版权属于jQuery之家,转载请注明出处


【责任编辑:(Top) 返回页面顶端