jQuery和CSS3手机APP功能界面切换特效

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

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>              

复制代码

jQuery和CSS3手机APP功能界面切换特效

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

PS:如果您想和业内技术大牛交流的话,请加qq群(527933790)或者关注微信公众 号(AskHarries),谢谢!

转载请注明原文出处:Harries Blog™ » jQuery和CSS3手机APP功能界面切换特效

赞 (0)

分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址