<!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 仿手机屏幕切换界面效果的更多相关文章

  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. 01.base-v1.js

    /* Date: 2014-01-21 */ function login() { return location.href = "https://passport.jd.com/new/l ...

  2. 为什么wait()，notify()和notifyAll()必须在同步块或同步方法中调

    我们常用wait(),notify()和notifyAll()方法来进行线程间通信.线程检查一个条件后就行进入等待状态,例如,在"生产者-消费者"模型中,生产者线程发现缓冲区满了就 ...

  3. 对json数据进行类似sql查询

    添加js引用:jsonsql-0.1.js 通过下面列子得到一个json类型的结果 Example: jsonsql.query("select * from json.channel.it ...

  4. POJ3352 Road Construction (双连通分量)

    Road Construction Time Limit:2000MS    Memory Limit:65536KB    64bit IO Format:%I64d & %I64u Sub ...

  5. 蓝桥杯--- 历届试题 大臣的旅费 （DFS & Vector）

    题目提交链接:http://lx.lanqiao.org/problem.page?gpid=T32 问题描述 很久以前,T王国空前繁荣.为了更好地管理国家,王国修建了大量的快速路,用于连接首都和王国 ...

  6. 06-CABasicAnimation基础核心动画

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

  7. 转载：Cocos2D-x 游戏接入 Windows 设备所需做的六件事

    原文地址:http://msopentech.com/zh-hans/blog/2014/05/09/cocos2d-x-%E6%B8%B8%E6%88%8F%E6%8E%A5%E5%85%A5-wi ...

  8. 剑指Offer:面试题6——重建二叉树（java实现）

    问题描述:输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不包含重复的数字. 例如: 输入:前序{1,2,4,7,3,5,6,8},中序{4,7,2,1 ...

  9. ubuntu设置vim语法高亮显示和自动缩进

    转自:http://nichael1983.blog.163.com/blog/static/114969433201002711850604/ 今天自己学习使用vim,当我在vim中输入程序时,默认 ...

  10. Facebook三种分享方式

    一.去Facebook开发者中心注册APP,获取APP ID https://developers.facebook.com 二.导入 FBSDKCoreKit.Framework, FBSDKLog ...