转载

发表于 2015年07月06日
浏览 (696)
评论 (0)

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

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

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

查看演示下载插件

制作方法

HTML结构 该APP特效的最主要功能是界面的切换，其中圆形菜单的HTML结构如下：

<div class="editable">
<div class="editable__circle">
<div class="editable__rotater">
<div class="editable__rotater-item">
<i class="fa fa-camera"></i>
</div>
</div>
<div class="editable__rotater">
<div class="editable__rotater-item">
<i class="fa fa-comments"></i>
</div>
</div>
<div class="editable__rotater">
<div class="editable__rotater-item">
<i class="fa fa-video-camera"></i>
</div>
</div>
<div class="editable__rotater">
<div class="editable__rotater-item">
<i class="fa fa-user"></i>
</div>
</div>
</div>
<div class="editable__cont">
<img src="img/user.jpg" class="editable__cont-img">
<span class="editable__cont-edit js-edit">
<i class="fa fa-pencil-square-o"></i>
</span>
</div>
</div>

复制代码

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

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

正文到此结束

所属分类：编程技术

本文标签： 代码 CSS IDE UI jquery 插件 js HTML tab App
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

热门推荐

openfire数据库安装指南

浏览(14,001) 评论(0)
Caffe 深度学习框架上手教程

浏览(10,665) 评论(0)
ReactiveCocoa入门教程：第一部分

浏览(11,495) 评论(0)
开源HIDS-OSSEC使用实例:监测CC攻击

浏览(11,411) 评论(0)
Decorators in ES7

浏览(15,949) 评论(4)
用Electron（Atom编辑器的兄弟项目）开发桌面应用

浏览(28,964) 评论(0)
Windows下JetBrains CLion中文输出乱码的解决方法

浏览(12,421) 评论(1)
同步-@synchronized, NSLock, pthread, OSSpinLock性能比较

浏览(11,368) 评论(0)
Seaweedfs之Volume读请求重定向

浏览(25,668) 评论(3)
HTML、CSS及JavaScript ：有Promise，不会搞大肚子

浏览(13,506) 评论(0)

相关文章

阿里云首购8折

Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号

HBLOG

HBLOG