jquery 仿手机屏幕切换界面效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery仿手机屏幕触摸切换界面效果</title>
<meta name="description" content="jquery Promptu-menu菜单插件创建一个带有菜单的窗口来创建iPhone或Android的主屏幕触摸效果体验。可以用手指滑动图标、支持水平滑动和垂直滑动。jquery下载。" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.promptu-menu.js"></script>
<script type="text/javascript">
$(function () { $('ul.promptu-menu01').promptumenu({
width: 272, //自定义滚屏宽度
height: 385, //自定义滚屏搞定
rows: 3, //自定义滚屏排列行数
columns: 2, //自定义滚屏单行图标个数
direction: 'horizontal', //水平拖动效果
pages: false //是否分页显示
}); $('ul.promptu-menu02').promptumenu({
width: 272, //自定义滚屏宽度
height: 385, //自定义滚屏搞定
rows: 4, //自定义滚屏排列行数
columns: 2, //自定义滚屏单行图标个数
direction: 'vertical', //水平拖动效果
pages: true //是否分页显示
}); $('ul.promptu-menu03').promptumenu({
width: 500, //自定义滚屏宽度
height: 500, //自定义滚屏搞定
rows: 3, //自定义滚屏排列行数
columns: 4, //自定义滚屏单行图标个数
direction: 'horizontal', //水平拖动效果
pages: true //是否分页显示
}); $('ul.promptu-menu04').promptumenu({
width: 500, //自定义滚屏宽度
height: 500, //自定义滚屏搞定
rows: 3, //自定义滚屏排列行数
columns: 4, //自定义滚屏单行图标个数
direction: 'vertical', //水平拖动效果
pages: false //是否分页显示
}); });
</script> </head>
<body> <style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font-family:Arial, Helvetica, sans-serif;font-size:12px;}
.demo{width:880px;margin:0 auto;box-shadow:2px 2px 20px rgba(0,0,0,0.5);-webkit-box-shadow:2px 2px 20px rgba(0,0,0,0.5);-moz-box-shadow: 2px 2px 20px rgba(0,0,0,0.5);padding:20px 40px;}
.demo h1{font-size:16px;color:#3366cc;height:24px;line-height:24px;margin:20px 0;}
.demo h2{padding:0 20px;font-size:14px;margin:10px 0;}
.demo h3{font-size:14px;line-height:24px;margin:10px 0;}
.demo p{line-height:24px;}
.ipadbox{background:url(images/ipad.png) no-repeat;width:593px;height:682px;overflow:hidden;}
.ipadbox .promptumenu_window{margin:50px 0 0 47px;}
.iphonebox{background:url(images/iphone.png) no-repeat;width:320px;height:610px;overflow:hidden;}
.iphonebox .promptumenu_window{margin:86px 0 0 25px;}
/* 主要元素 */
.promptumenu_nav{z-index:5;position:absolute;bottom:5px;left:50%;margin-right:-50%;}
.promptumenu_window{cursor:url(images/hand.ico), move;background:#EEE;position:relative;}
.promptumenu_nav a{cursor:pointer;width:20px;height:20px;text-indent:-9999px;outline:none;background:url(images/pagelink.png) 0 -20px no-repeat;display:block;float:left;position:relative;left:-50%;margin:0 2px;}
.promptumenu_nav a.active{background-position:0 0;}
</style> <div class="demo"> <h1>jquery Promptu-menu菜单插件</h1> <h3>它是做什么呢？</h3> <p>这个插件的目的是创建一个带有菜单的窗口来创建iPhone或类似的Android体验。</p> <p>你必须熟悉iPhone或Android主屏幕概念。你有窗口。有各种实用的图标。如果图标的数量超过菜单上的空间，创建了新的一页。通过刷卡用手指，你可以看到下一个页面，并有互动的图标。</p> <p>这个插件不完全一样。所有你必须做的是提供元素的无序列表，你要使用的用户，产品或其他类型的数据列表。然后调用只需$（'ul.my_list）promptumenu的插件promptumenu（）。</p> <p>是什么使这个插件特别的是事实，我试图保持动态的经验，你的iPhone或Android刷卡时......因此，如果用户打开一个机器人，iPhone，iPad或iPod这样的移动设备的页面，他将能够用手指轻扫。还使用鼠标时，插件需要与您移动鼠标的势头在心中......因此，清单中移动与惯性，你松开鼠标后..</p> <h3>用法示例</h3>
<pre style="padding:10px;margin:0;background:#eee;">
$('ul').promptumenu({
width:500, //自定义滚屏宽度
height:500, //自定义滚屏搞定
rows:3, //自定义滚屏排列行数
columns:4, //自定义滚屏单行图标个数
direction:'vertical', //水平拖动效果
pages:false //是否分页显示
});
</pre> <h2>iphone 图标水平拖动</h2>
<div class="iphonebox">
<ul class="promptu-menu01">
<li><a target="_blank" ><img src="data:images/Books.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Browser.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Calculator.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Calendar.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Camera.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Clock.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Contacts.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Gallery.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/GMail.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Mail.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Maps.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Market.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Movie Studio.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Music.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Phone.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Settings.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Talk.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/YouTube.png" alt="" /></a></li>
</ul>
</div><!--iphonebox end--> <h2>iphone 图标垂直拖动</h2>
<div class="iphonebox">
<ul class="promptu-menu02">
<li><a target="_blank" ><img src="data:images/Books.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Browser.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Calculator.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Calendar.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Camera.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Clock.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Contacts.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Gallery.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/GMail.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Mail.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Maps.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Market.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Movie Studio.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Music.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Phone.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Settings.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Talk.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/YouTube.png" alt="" /></a></li>
</ul>
</div><!--iphonebox end--> <h2>ipad 图标水平拖动</h2>
<div class="ipadbox">
<ul class="promptu-menu03">
<li><a target="_blank" ><img src="data:images/Books.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Browser.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Calculator.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Calendar.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Camera.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Clock.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Contacts.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Gallery.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/GMail.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Mail.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Maps.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Market.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Movie Studio.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Music.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Phone.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Settings.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Talk.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/YouTube.png" alt="" /></a></li>
</ul>
</div><!--ipadbox end--> <h2>ipad 图标垂直拖动</h2>
<div class="ipadbox">
<ul class="promptu-menu04">
<li><a target="_blank" ><img src="data:images/Books.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Browser.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Calculator.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Calendar.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Camera.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Clock.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Contacts.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Gallery.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/GMail.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Mail.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Maps.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Market.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Movie Studio.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Music.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Phone.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Settings.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/Talk.png" alt="" /></a></li>
<li><a target="_blank" ><img src="data:images/YouTube.png" alt="" /></a></li>
</ul>
</div><!--ipadbox end-->
jquery 仿手机屏幕切换界面效果的更多相关文章
- jQuery精仿手机上的翻牌效果菜单
代码简介: jQuery精仿手机上的翻牌效果菜单,很平滑的动画翻牌效果,每点击一下菜单,就会翻去一下,貌似很灵敏的动作.注意:如果预览时没看到效果,请刷新一下页面,让jquery载入就行了,在实际使用 ...
- HTML5仿手机微信聊天界面
HTML5仿手机微信聊天界面 这篇文章主要为大家详细介绍了HTML5仿手机微信聊天界面的关键代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 给大家带来的是HTML5仿手机微信聊天界面, ...
- 基于jQuery仿Flash横向切换焦点图
给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...
- UI特效--Android利用ViewFlipper实现屏幕切换动画效果
.屏幕切换指的是在同一个Activity内屏幕见的切换,最长见的情况就是在一个FrameLayout内有多个页面,比如一个系统设置页面:一个个性化设置页面.2.介绍ViewFilpper类ViewFl ...
- Android利用ViewFlipper实现屏幕切换动画效果
1.屏幕切换指的是在同一个Activity内屏幕见的切换,最长见的情况就是在一个FrameLayout内有多个页面,比如一个系统设置页面:一个个性化设置页面. 2.介绍ViewFilpper类 Vie ...
- Android：仿微信开场切换界面
这实例很多人仿做,好实例还是不容错过!最重要是素材容易拿~ 效果: 默认3页面的切换,最后一个页面带按钮,点击进入另外一个页面 思路: 1.准备5个布局页面,1个为主函数布局页面,3个为切换的页面(其 ...
- jQuery实现手机竖直手风琴效果
效果:http://hovertree.com/texiao/jquery/65/ 效果图: 手机扫描二维码查看效果: 代码: <!doctype html> <html lang= ...
- Android成长日记-使用ViewFlipper实现屏幕切换动画效果
(一) ViewFlipper介绍 Android系统自带的一个多页面管理控件,它可以实现子界面的自动切换 (二) 为ViewFlipper加入View 1. 静态导入:在Layout布局文件中直接导 ...
- Jquery仿彩票更换数字动画效果
<script type="text/javascript" src="jquery-1.11.3.min.js"></script> ...
随机推荐
- SQL Server查询死锁并KILL
杀掉死锁的sqlserver进程 SELECT request_session_id spid,OBJECT_NAME (resource_associated_entity_id)tableNa ...
- RunJS - 在线编辑、展示、分享、交流你的 JavaScript 代码
发现一个很好玩,很强大的网站 RunJS - 在线编辑.展示.分享.交流你的 JavaScript 代码 http://runjs.cn/ 比如: http://runjs.cn/detail/l ...
- python输出重定向
0表示标准输入1表示标准输出2表示标准错误输出> 默认为标准输出重定向,与 1> 相同2>&1 意思是把 标准错误输出 重定向到 标准输出.&>file 意思是 ...
- 九度OJ1084
这道题一旦想开,其实思想十分简单的. 首先考虑n为奇数的情况,不难知f(n)=f(n-1).(只需要把n的所有拆分式-1即可……) 然后考虑n为偶数的情况,将拆分式划分为两种情况:一种是式子中带1的, ...
- 项目积累——CSS应用
<tr onmouseover=" this.style.backgroundColor= '#E0FFFF' " onmouseout="this.style. ...
- jBox 弹出窗口中焦点设置问题
jBox 是一个不错的组件库,可以用来比较简单地弹出窗口. 我希望在 jBox 弹出窗口之后,自动将焦点设置到子窗口的某个输入框中,可是发现并不容易. 在 jBox 2.3 中,提供了如下的增强. ...
- 使用 iMacros 来自动化日常的工作
利用 iMacros 的浏览器附加组件来提高工作效率 介绍 iMacros 这个强大的工具,使用简单的范例演示了如何使用这个工具来完成对于网页的操作,对于大量的具有重复性的工作内容尤其可以提高效率.对 ...
- 日志组件logback的介绍及配置使用方法
一.logback的介绍 Logback是由log4j创始人设计的又一个开源日志组件.logback当前分成三个模块:logback-core,logback- classic和logback-acc ...
- 输出1——n的排列（深度优先搜索）
样例输入: 3 样例输出: 123132213231312321 #include <stdio.h> int n; void dfs(int step,int* a,int* book) ...
- Android网络编程之Socket
Socket(套接字)是一种通信机制,可以实现单机或跨网络进行通信,其创建需要明确的区分C(客户端)/S(服务器端),支持多个客户端连接到同一个服务器.有两种传输模式: 1).面向连接的传输:基于TC ...