1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jquery仿手机屏幕触摸切换界面效果</title>
  6. <meta name="description" content="jquery Promptu-menu菜单插件创建一个带有菜单的窗口来创建iPhone或Android的主屏幕触摸效果体验。可以用手指滑动图标、支持水平滑动和垂直滑动。jquery下载。" />
  7. <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  8. <script type="text/javascript" src="js/jquery.promptu-menu.js"></script>
  9. <script type="text/javascript">
  10.     $(function () {
  11.  
  12.         $('ul.promptu-menu01').promptumenu({
  13.             width: 272,   //自定义滚屏宽度
  14.             height: 385, //自定义滚屏搞定
  15.             rows: 3,     //自定义滚屏排列行数
  16.             columns: 2,  //自定义滚屏单行图标个数
  17.             direction: 'horizontal', //水平拖动效果
  18.             pages: false  //是否分页显示
  19.         });
  20.  
  21.         $('ul.promptu-menu02').promptumenu({
  22.             width: 272,   //自定义滚屏宽度
  23.             height: 385, //自定义滚屏搞定
  24.             rows: 4,     //自定义滚屏排列行数
  25.             columns: 2,  //自定义滚屏单行图标个数
  26.             direction: 'vertical', //水平拖动效果
  27.             pages: true //是否分页显示
  28.         });
  29.  
  30.         $('ul.promptu-menu03').promptumenu({
  31.             width: 500,   //自定义滚屏宽度
  32.             height: 500, //自定义滚屏搞定
  33.             rows: 3,     //自定义滚屏排列行数
  34.             columns: 4,  //自定义滚屏单行图标个数
  35.             direction: 'horizontal', //水平拖动效果
  36.             pages: true  //是否分页显示
  37.         });
  38.  
  39.         $('ul.promptu-menu04').promptumenu({
  40.             width: 500,   //自定义滚屏宽度
  41.             height: 500, //自定义滚屏搞定
  42.             rows: 3,     //自定义滚屏排列行数
  43.             columns: 4,  //自定义滚屏单行图标个数
  44.             direction: 'vertical', //水平拖动效果
  45.             pages: false  //是否分页显示
  46.         });
  47.  
  48.     });
  49. </script>
  50.  
  51. </head>
  52. <body>
  53.  
  54. <style type="text/css">
  55. *{margin:0;padding:0;list-style-type:none;}
  56. a,img{border:0;}
  57. body{font-family:Arial, Helvetica, sans-serif;font-size:12px;}
  58. .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;}
  59. .demo h1{font-size:16px;color:#3366cc;height:24px;line-height:24px;margin:20px 0;}
  60. .demo h2{padding:0 20px;font-size:14px;margin:10px 0;}
  61. .demo h3{font-size:14px;line-height:24px;margin:10px 0;}
  62. .demo p{line-height:24px;}
  63. .ipadbox{background:url(images/ipad.png) no-repeat;width:593px;height:682px;overflow:hidden;}
  64. .ipadbox .promptumenu_window{margin:50px 0 0 47px;}
  65. .iphonebox{background:url(images/iphone.png) no-repeat;width:320px;height:610px;overflow:hidden;}
  66. .iphonebox .promptumenu_window{margin:86px 0 0 25px;}
  67. /* 主要元素 */
  68. .promptumenu_nav{z-index:5;position:absolute;bottom:5px;left:50%;margin-right:-50%;}
  69. .promptumenu_window{cursor:url(images/hand.ico), move;background:#EEE;position:relative;}
  70. .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;}
  71. .promptumenu_nav a.active{background-position:0 0;}
  72. </style>
  73.  
  74. 	<div class="demo">
  75.  
  76. 		<h1>jquery Promptu-menu菜单插件</h1>
  77.  
  78. 		<h3>它是做什么呢？</h3>
  79.  
  80. 		<p>这个插件的目的是创建一个带有菜单的窗口来创建iPhone或类似的Android体验。</p>
  81.  
  82. 		<p>你必须熟悉iPhone或Android主屏幕概念。你有窗口。有各种实用的图标。如果图标的数量超过菜单上的空间，创建了新的一页。通过刷卡用手指，你可以看到下一个页面，并有互动的图标。</p>
  83.  
  84. 		<p>这个插件不完全一样。所有你必须做的是提供元素的无序列表，你要使用的用户，产品或其他类型的数据列表。然后调用只需$（'ul.my_list）promptumenu的插件promptumenu（）。</p>
  85.  
  86. 		<p>是什么使这个插件特别的是事实，我试图保持动态的经验，你的iPhone或Android刷卡时......因此，如果用户打开一个机器人，iPhone，iPad或iPod这样的移动设备的页面，他将能够用手指轻扫。还使用鼠标时，插件需要与您移动鼠标的势头在心中......因此，清单中移动与惯性，你松开鼠标后..</p>	
  87.  
  88. 		<h3>用法示例</h3>
  89. <pre style="padding:10px;margin:0;background:#eee;">
  90. $('ul').promptumenu({
  91. 	width:500,   //自定义滚屏宽度
  92. 	height:500, //自定义滚屏搞定
  93. 	rows:3,     //自定义滚屏排列行数
  94. 	columns:4,  //自定义滚屏单行图标个数
  95. 	direction:'vertical', //水平拖动效果
  96. 	pages:false  //是否分页显示
  97. });
  98. </pre>
  99.  
  100. 		<h2>iphone 图标水平拖动</h2>
  101. 		<div class="iphonebox">
  102. 			<ul class="promptu-menu01">
  103. 				<li><a target="_blank" ><img src="data:images/Books.png" alt="" /></a></li>
  104. 				<li><a target="_blank" ><img src="data:images/Browser.png" alt="" /></a></li>
  105. 				<li><a target="_blank" ><img src="data:images/Calculator.png" alt="" /></a></li>
  106. 				<li><a target="_blank" ><img src="data:images/Calendar.png" alt="" /></a></li>
  107. 				<li><a target="_blank" ><img src="data:images/Camera.png" alt="" /></a></li>
  108. 				<li><a target="_blank" ><img src="data:images/Clock.png" alt="" /></a></li>
  109. 				<li><a target="_blank" ><img src="data:images/Contacts.png" alt="" /></a></li>
  110. 				<li><a target="_blank" ><img src="data:images/Gallery.png" alt="" /></a></li>
  111. 				<li><a target="_blank" ><img src="data:images/GMail.png" alt="" /></a></li>
  112. 				<li><a target="_blank" ><img src="data:images/Mail.png" alt="" /></a></li>
  113. 				<li><a target="_blank" ><img src="data:images/Maps.png" alt="" /></a></li>
  114. 				<li><a target="_blank" ><img src="data:images/Market.png" alt="" /></a></li>
  115. 				<li><a target="_blank" ><img src="data:images/Movie Studio.png" alt="" /></a></li>
  116. 				<li><a target="_blank" ><img src="data:images/Music.png" alt="" /></a></li>
  117. 				<li><a target="_blank" ><img src="data:images/Phone.png" alt="" /></a></li>
  118. 				<li><a target="_blank" ><img src="data:images/Settings.png" alt="" /></a></li>
  119. 				<li><a target="_blank" ><img src="data:images/Talk.png" alt="" /></a></li>
  120. 				<li><a target="_blank" ><img src="data:images/YouTube.png" alt="" /></a></li>
  121. 			</ul>
  122. 		</div><!--iphonebox end-->
  123.  
  124. 		<h2>iphone 图标垂直拖动</h2>
  125. 		<div class="iphonebox">
  126. 			<ul class="promptu-menu02">
  127. 				<li><a target="_blank" ><img src="data:images/Books.png" alt="" /></a></li>
  128. 				<li><a target="_blank" ><img src="data:images/Browser.png" alt="" /></a></li>
  129. 				<li><a target="_blank" ><img src="data:images/Calculator.png" alt="" /></a></li>
  130. 				<li><a target="_blank" ><img src="data:images/Calendar.png" alt="" /></a></li>
  131. 				<li><a target="_blank" ><img src="data:images/Camera.png" alt="" /></a></li>
  132. 				<li><a target="_blank" ><img src="data:images/Clock.png" alt="" /></a></li>
  133. 				<li><a target="_blank" ><img src="data:images/Contacts.png" alt="" /></a></li>
  134. 				<li><a target="_blank" ><img src="data:images/Gallery.png" alt="" /></a></li>
  135. 				<li><a target="_blank" ><img src="data:images/GMail.png" alt="" /></a></li>
  136. 				<li><a target="_blank" ><img src="data:images/Mail.png" alt="" /></a></li>
  137. 				<li><a target="_blank" ><img src="data:images/Maps.png" alt="" /></a></li>
  138. 				<li><a target="_blank" ><img src="data:images/Market.png" alt="" /></a></li>
  139. 				<li><a target="_blank" ><img src="data:images/Movie Studio.png" alt="" /></a></li>
  140. 				<li><a target="_blank" ><img src="data:images/Music.png" alt="" /></a></li>
  141. 				<li><a target="_blank" ><img src="data:images/Phone.png" alt="" /></a></li>
  142. 				<li><a target="_blank" ><img src="data:images/Settings.png" alt="" /></a></li>
  143. 				<li><a target="_blank" ><img src="data:images/Talk.png" alt="" /></a></li>
  144. 				<li><a target="_blank" ><img src="data:images/YouTube.png" alt="" /></a></li>
  145. 			</ul>
  146. 		</div><!--iphonebox end-->
  147.  
  148. 		<h2>ipad 图标水平拖动</h2>
  149. 		<div class="ipadbox">
  150. 			<ul class="promptu-menu03">
  151. 				<li><a target="_blank" ><img src="data:images/Books.png" alt="" /></a></li>
  152. 				<li><a target="_blank" ><img src="data:images/Browser.png" alt="" /></a></li>
  153. 				<li><a target="_blank" ><img src="data:images/Calculator.png" alt="" /></a></li>
  154. 				<li><a target="_blank" ><img src="data:images/Calendar.png" alt="" /></a></li>
  155. 				<li><a target="_blank" ><img src="data:images/Camera.png" alt="" /></a></li>
  156. 				<li><a target="_blank" ><img src="data:images/Clock.png" alt="" /></a></li>
  157. 				<li><a target="_blank" ><img src="data:images/Contacts.png" alt="" /></a></li>
  158. 				<li><a target="_blank" ><img src="data:images/Gallery.png" alt="" /></a></li>
  159. 				<li><a target="_blank" ><img src="data:images/GMail.png" alt="" /></a></li>
  160. 				<li><a target="_blank" ><img src="data:images/Mail.png" alt="" /></a></li>
  161. 				<li><a target="_blank" ><img src="data:images/Maps.png" alt="" /></a></li>
  162. 				<li><a target="_blank" ><img src="data:images/Market.png" alt="" /></a></li>
  163. 				<li><a target="_blank" ><img src="data:images/Movie Studio.png" alt="" /></a></li>
  164. 				<li><a target="_blank" ><img src="data:images/Music.png" alt="" /></a></li>
  165. 				<li><a target="_blank" ><img src="data:images/Phone.png" alt="" /></a></li>
  166. 				<li><a target="_blank" ><img src="data:images/Settings.png" alt="" /></a></li>
  167. 				<li><a target="_blank" ><img src="data:images/Talk.png" alt="" /></a></li>
  168. 				<li><a target="_blank" ><img src="data:images/YouTube.png" alt="" /></a></li>
  169. 			</ul>
  170. 		</div><!--ipadbox end-->
  171.  
  172. 		<h2>ipad 图标垂直拖动</h2>
  173. 		<div class="ipadbox">
  174. 			<ul class="promptu-menu04">
  175. 				<li><a target="_blank" ><img src="data:images/Books.png" alt="" /></a></li>
  176. 				<li><a target="_blank" ><img src="data:images/Browser.png" alt="" /></a></li>
  177. 				<li><a target="_blank" ><img src="data:images/Calculator.png" alt="" /></a></li>
  178. 				<li><a target="_blank" ><img src="data:images/Calendar.png" alt="" /></a></li>
  179. 				<li><a target="_blank" ><img src="data:images/Camera.png" alt="" /></a></li>
  180. 				<li><a target="_blank" ><img src="data:images/Clock.png" alt="" /></a></li>
  181. 				<li><a target="_blank" ><img src="data:images/Contacts.png" alt="" /></a></li>
  182. 				<li><a target="_blank" ><img src="data:images/Gallery.png" alt="" /></a></li>
  183. 				<li><a target="_blank" ><img src="data:images/GMail.png" alt="" /></a></li>
  184. 				<li><a target="_blank" ><img src="data:images/Mail.png" alt="" /></a></li>
  185. 				<li><a target="_blank" ><img src="data:images/Maps.png" alt="" /></a></li>
  186. 				<li><a target="_blank" ><img src="data:images/Market.png" alt="" /></a></li>
  187. 				<li><a target="_blank" ><img src="data:images/Movie Studio.png" alt="" /></a></li>
  188. 				<li><a target="_blank" ><img src="data:images/Music.png" alt="" /></a></li>
  189. 				<li><a target="_blank" ><img src="data:images/Phone.png" alt="" /></a></li>
  190. 				<li><a target="_blank" ><img src="data:images/Settings.png" alt="" /></a></li>
  191. 				<li><a target="_blank" ><img src="data:images/Talk.png" alt="" /></a></li>
  192. 				<li><a target="_blank" ><img src="data:images/YouTube.png" alt="" /></a></li>
  193. 			</ul>
  194. 		</div><!--ipadbox end-->

jquery 仿手机屏幕切换界面效果的更多相关文章

  1. jQuery精仿手机上的翻牌效果菜单

    代码简介: jQuery精仿手机上的翻牌效果菜单,很平滑的动画翻牌效果,每点击一下菜单,就会翻去一下,貌似很灵敏的动作.注意:如果预览时没看到效果,请刷新一下页面,让jquery载入就行了,在实际使用 ...

  2. HTML5仿手机微信聊天界面

    HTML5仿手机微信聊天界面 这篇文章主要为大家详细介绍了HTML5仿手机微信聊天界面的关键代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下     给大家带来的是HTML5仿手机微信聊天界面, ...

  3. 基于jQuery仿Flash横向切换焦点图

    给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...

  4. UI特效--Android利用ViewFlipper实现屏幕切换动画效果

    .屏幕切换指的是在同一个Activity内屏幕见的切换,最长见的情况就是在一个FrameLayout内有多个页面,比如一个系统设置页面:一个个性化设置页面.2.介绍ViewFilpper类ViewFl ...

  5. Android利用ViewFlipper实现屏幕切换动画效果

    1.屏幕切换指的是在同一个Activity内屏幕见的切换,最长见的情况就是在一个FrameLayout内有多个页面,比如一个系统设置页面:一个个性化设置页面. 2.介绍ViewFilpper类 Vie ...

  6. Android：仿微信开场切换界面

    这实例很多人仿做,好实例还是不容错过!最重要是素材容易拿~ 效果: 默认3页面的切换,最后一个页面带按钮,点击进入另外一个页面 思路: 1.准备5个布局页面,1个为主函数布局页面,3个为切换的页面(其 ...

  7. jQuery实现手机竖直手风琴效果

    效果:http://hovertree.com/texiao/jquery/65/ 效果图: 手机扫描二维码查看效果: 代码: <!doctype html> <html lang= ...

  8. Android成长日记-使用ViewFlipper实现屏幕切换动画效果

    (一) ViewFlipper介绍 Android系统自带的一个多页面管理控件,它可以实现子界面的自动切换 (二) 为ViewFlipper加入View 1. 静态导入:在Layout布局文件中直接导 ...

  9. Jquery仿彩票更换数字动画效果

    <script type="text/javascript" src="jquery-1.11.3.min.js"></script> ...

随机推荐

  1. java泛型的使用

    package com.wzh.test.generic; import java.util.ArrayList; import java.util.HashMap; import java.util ...

  2. RBStoryboardLink库的使用注意事项 -转载至--坤哥MartinLi博客

    RBStoryboardLink库的使用注意事项 demo下载:https://github.com/MartinLi841538513/RBStoryboardLinkDemo 操作步骤: 1,引入 ...

  3. 离线使用echarts及一些细节

    最近要做图表,用js起来太麻烦,所以就找些开源的库来用,发现echarts挺不错, echarts的文档把所有东西都说的很明白了,直接下载zip包,要是想离线使用的话只需要引用下载包里面的dist文件 ...

  4. Stream语法详解

    1. Stream初体验 我们先来看看Java里面是怎么定义Stream的: A sequence of elements supporting sequential and parallel agg ...

  5. C语言中fseek函数

    C语言fseek()函数:用来设定文件的当前读写位置 头文件: #include <stdio.h> 定义函数: int fseek(FILE * stream, long offset, ...

  6. [ActionScript 3.0] AS3 绘制12面体

    package { import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; im ...

  7. GroupId和ArtifactId

    <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc --><dependency> ...

  8. 03-position和anchorPoint

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  9. infoWindowRenderer之个人见解

    在地图上以类似于提示框的方式显示查询信息,类似于arcmap中单击图层查看属性 由于Class Graphic有infoWindowRenderer : IFactory这个属性 (注:infoWin ...

  10. 实验室中搭建Spark集群和PyCUDA开发环境

    1.安装CUDA 1.1安装前工作 1.1.1选取实验器材 实验中的每台计算机均装有双系统.选择其中一台计算机作为master节点,配置有GeForce GTX 650显卡,拥有384个CUDA核心. ...